File

libs/control/src/lib/string-toggler/string-toggler.component.ts

Implements

OnChanges

Metadata

selector n52-string-toggler
templateUrl ./string-toggler.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

icon
Type : string
option
Type : string
tooltip
Type : string
value
Type : string

Outputs

onToggled
Type : EventEmitter<string>

Methods

Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public toggle
toggle()
Returns : void

Properties

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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""