Properties not displayed in Angular

I'm new to Angular, trying to learning by doing.

There is something I do not understand, why don't the properties display in the following code under .wagon-placeholder? There is for me no difference between {{TrackIdStyle}} in the first div and {{TrackId}} in the second div. And why [pos] doesn't work too?

Thank you for your clarification.

(full) track.component.html

<div class="setRelative">
    <div class="track-id" style={{TrackIdStyle}}>{{TrackId}}</div>
    <div class="track-id track-id-2" *ngIf="TrackIsBoth">{{TrackId}}</div>
    <div class="track-line"></div>
    
    <div class="setFlex">
        <div class="placeholder" *ngFor="let place of qty_placeholder;"
             track={{TrackId}}
             [pos]="place"
             style="width:{{placewidth}}px"
             >
        </div>
    </div>
</div>

Returns the following:

<div _ngcontent-uvg-c46="" class="setRelative">
    <div _ngcontent-uvg-c46="" class="track-id" style="right: -1.3em;">86</div>
    <!--bindings={
      "ng-reflect-ng-if": "false"
    }-->
    <div _ngcontent-uvg-c46="" class="track-line"></div>
    <div _ngcontent-uvg-c46="" class="setFlex">
        <div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
        <div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
        <div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
        <div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
        <!--bindings={
          "ng-reflect-ng-for-of": "1,1,2,3"
        }-->
    </div>
</div>

What I want is <div class="placeholder" style="blabla" track="blabla" pos=1></div>

qty_placeholder is simply an array [1,2,3,...] *

Solution

To add a custom attribute on an HTML element, use [attr.attribute-name] = "value"

Below is the modified snippet of the second div.

 <div class="placeholder" *ngFor="let place of qty_placeholder;"
 [attr.track] ="TrackId"
 [attr.pos]="place"
 [ngStyle]="{'width.px': placewidth}"
 >
    </div>

Since, The values were not provided. I have set out the property values as below:

 qty_placeholder = [1,2,3,4];
  TrackId = "TRACK_ID";
  placewidth = 300

The output:

<!--bindings={
"ng-reflect-ng-for-of": "1,2,3,4"
}-->
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]" 
track="TRACK_ID" pos="1" style="width: 300px;"></div>
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]" 
track="TRACK_ID" pos="2" style="width: 300px;"></div>
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]" 
track="TRACK_ID" pos="3" style="width: 300px;"></div>
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]" 
track="TRACK_ID" pos="4" style="width: 300px;"></div>