I created a custom directive that controls the opacity of an element based on an input value:
import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs/Rx';
@Directive({
selector: '[myDisabled]'
})
export class DisableDirective implements OnInit {
private el: HTMLElement;
@Input('myDisabled') isDisable: boolean;
constructor(el: ElementRef) { this.el = el.nativeElement;}
ngOnInit() {
this.disable();
}
private disable() {
this.isDisable ? this.el.style.opacity = '0.65' : this.el.style.opacity = '1';
}
}
Although the directive works as intended, I am looking for a way to update the opacity setting when the input value changes.
To use this directive, you can add it to an element like this:
<button class="btn" [myDisabled]="!sharedDetails.isEnabled">A button !</button>