Angular component selector on a bound attribute value

Question

I'm trying to code a component selector on attribute value like this:

selector: '[data-type=Type1]'

This works great in the following HTML:

<div *ngFor="let item of items">
  <div data-type="Type1"></div>
</div>

But does not work like this (which is of course what I want):

<div *ngFor="let item of items">
  <div [data-type]="item.type"></div>
</div>

I'm guessing it is due to the order in which Angular resolves things. Is what I want possible?

Aviad P. · Accepted Answer · 2021-07-23 18:33:01Z

3

+50

Directives cannot be added or removed based on change detection. Either the directive is there always or it is not.

Your directive should take as an input the data-type value and then determine whether to perform its job or not.

E.g.

@Directive({
  selector: '[data-type]'
})
export class DataTypeDirective {
  @Input('data-type') dataType: string;

  doSomeStuff() {
    if (this.dataType !== 'Type1') {
      return;
    }
    // perform the directive's function
  }
}

Or in case it's a component, use an *ngIf in the template:

<div *ngIf="dataType === 'Type1'">
  <!-- the component's body -->
</div>

edited Jul 23, 2021 at 18:33

answered Jul 23, 2021 at 18:19

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

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

3 Comments

Jon Vance Over a year ago

It's a component, and I want to be able to have a lot of them, add more when needed and not have to update all the HTML where they are used with increasing numbers of ngIf's. And what I'm reading in your answer is what seemed to be the case when I posted the question: just not possible.

Aviad P. Over a year ago

You don't have to update the templates where they are used, just the template of the component itself, just one time.

Jon Vance Over a year ago

I see what you're saying. That's not as bad.

Dharman · Accepted Answer · 2021-07-21 18:35:33Z

0

I think there's a slight problem in syntax maybe. Try using '[selector_name]'. Adding a link, this one for use of selector.

edited Jul 21, 2021 at 18:35

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 21, 2021 at 18:30

Ankur Anand

133 bronze badges

3 Comments

Jon Vance Over a year ago

I don't follow you. What do you think needs to change, specifically?

Ankur Anand Over a year ago

In selector -> selector: '[selector_value]' In Component -> @Component({ selector: '[my-app]', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) In HTML -> <body> <div my-app> </div> </body>

Ankur Anand Over a year ago

So the upper one is the correct format of taking selector as an attribute. That you've already done! <div data-type="Type1"></div>

Andres Doncel · Accepted Answer · 2021-07-21 19:10:27Z

0

For attribute binding syntax resembles property binding, but instead of an element property between brackets, you precede the name of the attribute with the prefix attr, followed by a dot. Then, you set the attribute value with an expression that resolves to a string. https://angular.io/guide/attribute-binding

in your case, should be in this way

<div *ngFor="let item of items">
  <div [attr.data-type]="item.type"></div>
</div>

answered Jul 21, 2021 at 19:10

Andres Doncel

444 bronze badges

3 Comments

Jon Vance Over a year ago

I'm afraid that doesn't seem to work either. Not getting the component matched to the div.

Andres Doncel Over a year ago

should be worked, for me works here stackblitz.com/edit/…

Jon Vance Over a year ago

In your stack blitz I do not see where you have indicated an attribute value based selector for any component. Please see the first code block in my question.

Collectives™ on Stack Overflow

Angular component selector on a bound attribute value

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related