在Angular 2中将属性指令转换为元素

Question

I'm trying get my head around this Attribute Directive provided in Angular 2.

Initially I thought I can create only directives using Attribute, but then when I tried few things I'm able to create directives using Elements also.

Please refer following code where I'm able to create a Element directive

@Directive({
    selector: 'myDir'
})
export class MyDirective implements OnInit {
    @Input() prop1: boolean;
    @Input() prop2: boolean;
    constructor() {
    }
    ngOnInit(): void {
        console.log(this.prop1);
        console.log(this.prop2);
    }
}

Can use it like below

<myDir [prop2]="true">Hello World</myDir>

Rendered HTML

Questions:

• Why it is called Attribute directive if it is based on the selector you provide.

  For example:

  • if I'm providing [myDir] then I can use it as attribute
  • But if I'm using myDir as selector this will make it as element directive.

Answer 1

I's called attribute directive only if you're using an attribute selector.

If you're using a class or element selector it's not an attribute directive anymore.

In general directives are just called directives.