How To Style A Programatically Add Element In Angular

Could I please ask for help with the following (pictures are not working for me otherwise I would provide screenshots) Am using Angular. In my .scss code I have the following style

Solution 1:

User, apologies about my comment. I want to say that in Angular we should think in variables. when we want to repeat something usually we use some like

//in .ts
array=[0,1,2]

//in html
<div *ngFor="let item of array">
Hello word
</div>

Well, nobody want repeat only "Hello word", so ours arrays usually are array of object

So, some like

//in .ts
array=[{name:'jhon'},'name:'peter'}]

//in html
<div *ngFor="let item of array">
{{item.name}}
</div>

Show the names "jhon" and "peter".

See your code, see that you're repeating structure, you can think in an array like

array=[
       {entryText:'3548XA',options:['374656543']},
       {entryText:'9878XB',options:['435454323']}
]

So you can create the .html as

<table id="AssetManagementTable">
    <tr background-color: #F8FAF9; height="56px">
      <th class="tableHeaderText">Tool Series</th>
      <th class="tableHeaderText">Serial Number</th>
    </tr>
    <!--see that you iterate over array using *ngFor-->
    <tr *ngFor="let item of array" height="50px">
            <!--as the variable you use to iterate is "item"
                you can "interpolate" and in item.entryText
                you has the value of entryText-->
      <td class="tableEntryText">{{item.entryText}}</td>
      <td class="dropdown tableEntryText">
        <form action="" name="FILTER">
            <select class="noBorder" name="filter_for" >
                <!--here see that you iterate over item.options
                    if you simple want to show the option use {{option}}
                    but in "value" you can use [value]="option"
                    also you can write value="{{option}}" -->
                
                <option *ngFor="let option of item.options" [value]="option">{{option}}</option>
            </select>
        </form>
      </td>
    </tr>
</table>

See that if you want to add a new row, the only is add a new element to the array. You can create a function

addElement()
{
   this.array.push({entry:'another',options:['one',two']})
}

And call the function in a button, e.g.

<button (click)="addElement()">add</button>

Yes is a "simple" exercise, but I hope understand me when say that "you should think in "variables"