Using an HTML Tag for a Directive in Angular

Question

In Angular (2+), typically components would be added to templates using HTML tags, and directives would be added using HTML attributes: in both cases this is achieved through the selector argument within the @Component/@Directive decorator:

<!-- component set up using-- selector: 'my-component' -->
<my-component></my-component>
<!-- directive set up using-- selector: '[myDirective]' -->
<div myDirective></div>

I tested to see if I could set up a directive that will use an HTML tag instead of attribute, and it seemed to work fine:

<!-- directive set up using-- selector: 'my-tag-directive' -->
<my-tag-directive></my-tag-directive>

I would just like to know if this is officially supported in Angular.

Note: we're currently using Angular 2 so I tested on that, although the intention is to upgrade. — Hutch
– Hutch, Commented Jun 21, 2018 at 15:38
By saying "seemed to work fine" you meant that you didn't get any errors or some logic in that Directive works fine? — Buczkowski
– Buczkowski, Commented Jun 21, 2018 at 15:39
@Buczkowski I set it up, added it to my template, and added alert('hello') to the ngOnInit, and that worked without generating any errors. — Hutch
– Hutch, Commented Jun 21, 2018 at 15:46
@ChellappanV do you have a link? The link provided in stackoverflow.com/a/50972583/2661556 seems to suggest it's allowed. — Hutch
– Hutch, Commented Jun 21, 2018 at 15:47

Gurvinder Guraya · Accepted Answer · 2018-06-21 15:41:09Z

3

Yes it could be tag as well see this documentation for more info

https://angular.io/api/core/Directive#selector

answered Jun 21, 2018 at 15:41

Gurvinder Guraya

6694 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tfrascaroli Over a year ago

But can it be a 'made-up' tag? From the link you have provided (and others I've found) it doesn't look like it. They are just binding to existing, well-established tags, not 'new' ones. I feel you can do this for a component tag, for instance, but not completely generate a new one.

tfrascaroli Over a year ago

EDIT to previous: Nevermind, I've actually tested this and can confirm THIS WORKS.

Collectives™ on Stack Overflow

Using an HTML Tag for a Directive in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related