How can one create an element directive in angular 6? I see how to create an attribute directive, but what if I want to create a custom element?
@Directive({
selector: '[appCards]'//you can't do something like -- element: name
})
export class CardsDirective {
constructor(el: ElementRef) {
}
}
I tried creating a Directive with Selector as and it works. Angular is so powerful.
import {Directive, ElementRef, Input} from '@angular/core';
@Directive({
selector: '<appCards>'
})
export class CardsDirective {
@Input() label;
constructor(el: ElementRef) {
console.log('it called');
}
ngOnInit(){
console.log(this.label);
}
}
Template:
<appCards label="change"></appCards>
In angular, you can create element directive in following way
@Directive({
selector: 'appCards'
})
export class CardsDirective {
constructor(el: ElementRef) {
}
}
You only have to remove the [] brackets in the selector , in order to make it element directive.
According to Angular Documentation, you can declare the selector as one of the following ways. So if you want to create an element with directive, you have to declare the selector of the directive as
selector: 'elementName'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.