libs/control/src/lib/string-toggler/string-toggler.component.ts
| selector | n52-string-toggler |
| templateUrl | ./string-toggler.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
| icon | |
Type : string
|
|
| option | |
Type : string
|
|
| tooltip | |
Type : string
|
|
| value | |
Type : string
|
|
| onToggled | |
Type : EventEmitter<string>
|
|
| Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| Public toggle |
toggle()
|
|
Returns :
void
|
| Public isToggled |
Type : boolean
|
import { Component, Input, OnChanges, Output, SimpleChanges, EventEmitter } from '@angular/core';
@Component({
selector: 'n52-string-toggler',
templateUrl: './string-toggler.component.html'
})
export class StringTogglerComponent implements OnChanges {
@Input()
public value: string;
@Input()
public option: string;
@Input()
public icon: string;
@Input()
public tooltip: string;
@Output()
public onToggled: EventEmitter<string> = new EventEmitter();
public isToggled: boolean;
public ngOnChanges(changes: SimpleChanges) {
if (changes.value) {
this.isToggled = this.option === this.value;
}
}
public toggle() {
this.onToggled.emit(this.option);
}
}
<button type="button" class="btn" (click)="toggle()" [ngClass]="isToggled ? 'btn-primary' : 'btn-light'" title="{{tooltip}}">
<i class="fa fa-{{icon}}" aria-hidden="true"></i>
</button>