I am struggling with styling ng-template tag.
what i have tried in my .css file until now:
- using #other_content as ID in my .css file
- adding a class to
<ng-template> - styling all
<td>tags
It's not working and after searching i have not found any solution.
HTML:
<div> <div> <table border="1"> <thead> <tr> <th>Char</th> <th>Break After</th> <th>Remove</th> </tr> </thead> <tbody> <tr *ngFor="let charobj of Chars;let i = index" [attr.data-index]="i"> <td>{{charobj.char}}</td> <td *ngIf= "charobj.after; else other_content">YES</td> <ng-template #other_content>NO</ng-template> <td> <MyBtn [ID]="'btnaddchars_' + i" [BackColor]= "globals.sysButtonBackColor" [Color]= "globals.sysButtonForeColor" [HoverBackColor] = "globals.sysHoverButtonBackColor" [HoverColor] = "globals.sysHoverButtonForeColor" [Text] ="'Delete'" [SecondText]="'Close'" [Width] ="'70px'" [Height]="'17px'" (buttonWasClicked) ="onSymbolsFormButtonClick($event)" > </MyBtn> </td> </tr> </tbody> </table> </div>
</div>Image:
1 Answer
Since the tag <ng-template> is converted into bindings when DOM is rendered something like this
<!--bindings={ "ng-reflect-ng-if": "false", "ng-reflect-ng-if-else": "[object Object]"
}-->Try to give a class(CSS class) to your text example:
<ng-template #other_content> <label class='_YOUR CSS CLASS_'>No</label>
</ng-template>
