Skip to content Skip to sidebar Skip to footer

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 .tsarray=[{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

<tableid="AssetManagementTable"><trbackground-color: #F8FAF9; height="56px"><thclass="tableHeaderText">Tool Series</th><thclass="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--><tdclass="tableEntryText">{{item.entryText}}</td><tdclass="dropdown tableEntryText"><formaction=""name="FILTER"><selectclass="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"

Post a Comment for "How To Style A Programatically Add Element In Angular"