I have a stream that outputs strings, and based on these strings I want to apply certain classes to a specific tag:
- If the string is "ok", add class "fa-check"
- If the string is "loading", add classes "fa-spin" and "fa-spinner"
- If the string is "error", add class "fa-times"
I tried using [class.className] in angular2, but it doesn't seem to be working for me.
@Component({
selector: '[event-spinner]',
template: `
<i class="fa fa-2x" [class.fa-spinner]="icon == 'loading'" id="spin"></i>
`
// The code below also didn't work
//directives: [NgClass],
//template: `
//<div class="col-xs-5">
// <i class="fa fa-2x" [ngClass]="{'fa-check': icon == 'ok', 'fa-spin': icon == 'loading', 'fa-spinner': icon == 'loading', 'fa-times': icon == 'error'}" id="spin"></i>
//</div>
//`
})
export class EventSpinner {
icon: string = "ok";
constructor(public eventsService: EventsService) {
//eventsService.icons.subscribe((x) => {
// this.icon = x;
//});
}
}