add class to element angular code example
Example 1: Angular 8 ngClass If
[ngClass]="{'my-class': step=='step1'}"
Example 2: if condition in class angular 8
<i [class]="user.login_status == 1 ? 'fas fa-circle user_active' : 'fas fa-circle user_inactive'" aria-hidden="true"></i>
Example 3: 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 4: addclass to elementref angular
export class CustomDirective {
constructor(private renderer: Renderer2,
private elementRef: ElementRef,
service: SomService) {
}
addClass(className: string, element: any) {
this.renderer.addClass(element, className);
// or use the host element directly
// this.renderer.addClass(this.elementRef.nativeElement, className);
}
removeClass(className: string, element: any) {
this.renderer.removeClass(element, className);
}
}
Example 5: 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'"