You need to make an input property of input and then use the ngOnChanges hook to tell when the input property changes. @Directive({ selector: ‘[number]’ }) export class NumberDirective implements OnChanges { @Input() public number: any; @Input() public input: any; ngOnChanges(changes: SimpleChanges){ if(changes.input){ console.log(‘input changed’); } } } Plunkr Stackblitz
You can just inject it class MyDirective { constructor(private host:MyComponent) {} A severe limitation is, that you need to know the type of the component in advance. See also https://github.com/angular/angular/issues/8277 It also provides some workarounds for when you don’t know the type in advance.
Basically there are three types of directives in Angular2 according to documentation. Component Structural directives Attribute directives Component It is also a type of directive with template,styles and logic part which is most famous type of directive among all in Angular2. In this type of directive you can use other directives whether it is custom … Read more
Asterisk syntax is a syntatic sugar for more wordy template syntax which directive expands to under the hood, you are free to use any of these options. Quote from the docs: The asterisk is “syntactic sugar”. It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk … Read more
Official solution As answered by Ryan Miglavs – smart usage of Angular’s selectors solves the issue. /** Note: requires the [a] attribute to be passed */ @Component({ selector: ‘my-dir[a]’, // <– use attribute selector along with tag to ensure both tag name and attribute are used to “select” element by Angular in DOM }); export … Read more
Can’t use two template binding on one element in Angular 2 (like *ngIf and *ngFor). But you can achieve the same by wrapping the element with a span or any other element. It is good to append with an <ng-container> as it is a logical container and it will not get append to the DOM. … Read more
To set the disabled property to true or false use <button [disabled]=”!nextLibAvailable” (click)=”showNext(‘library’)” class=” btn btn-info btn-xs” title=”Next Lib”> {{libraries.name}}”> <i class=”fa fa-chevron-right fa-fw”></i> </button>
What it is (see the clear definition of jQuery as an example)? A directive is essentially a function†that executes when the Angular compiler finds it in the DOM. The function(s) can do almost anything, which is why I think it is rather difficult to define what a directive is. Each directive has a name … Read more
Alternative Solution: This answer of Thierry Templier is an alternative way to get around the problem. After some questions with Thierry Templier, I came to the following working example that meets my expectations as an alternative to inheritance limitation mentioned in this question: 1 – Create custom decorator: export function CustomComponent(annotation: any) { return function … Read more