add class in angular 8 code example
Example 1: Angular add class dynamically
<button
*ngFor="let button of buttons"
class="general"
(click)="ChangeScreen(button.label)"
[class.selected]="CurrentPage == button.label">
{{ button.label }}
</button>
Example 2: angualr add class to component
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',,
host: {'class': 'your-class'}
})
export class YourComponent implements OnInit {
...
}
Example 3: add class to element angular in ts
type one
[class.my-class]="step === 'step1'"
type two
[ngClass]="{'my-class': step === 'step1'}"
and multiple option:
[ngClass]="{'my-class': step === 'step1', 'my-class2':step === 'step2' }"
type three
[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"
type four
[ngClass]="(step=='step1')?'my-class1':'my-class2'"
Example 4: Angular add class dynamically
buttons: Array<{label: string}> = [
{
label: 'Global'
},
{
label: 'Maintenance'
},
{
label: 'Settings'
},
{
label: 'Profile'
},
{
label: 'Transactions'
}
]