Add a class to directive in angular

Question

I have a simple directive and I would like to add a class to it :

@Directive({
  selector: '[appFieldLabel]',
})
export class FieldLabelDirective {
  @Input() tooltip: string;
  @Input() showOptional = true;

  @HostBinding('class.text-truncate')
  test = true;
}

this works, but I want it to always be set, is there a way without assigning an useless property like here test = true;

thank you

there are more options to do it https://stackoverflow.com/questions/39639098/using-a-directive-to-add-class-to-host-element — Kordrad, Oct 19 '21 at 07:25

Adrian Kokot · Accepted Answer · 2021-10-19T07:34:35.933

3

Instead of prop = true you can just bind to class and then set value to a classes that you want, like this:

@Directive({
  selector: '[appFieldLabel]',
})
export class FieldLabelDirective {
  @Input() tooltip: string;
  @Input() showOptional = true;

  @HostBinding('class') private hostClass = 'text-truncate';
}

It's less useless, because you can modify classes via variable.

You could also bind class like this:

@Directive({
  selector: '[appFieldLabel]',
  host: {
    'class': 'text-truncate',
  }
})
export class FieldLabelDirective {
  // the rest of the code
}

edited Oct 19 '21 at 07:34

answered Oct 19 '21 at 07:28

Adrian Kokot

2,172
2
5
18

the second option tell me is deprecated, I will do the first I guess – Bobby Oct 19 '21 at 07:50
Which version of angular do you use? – Adrian Kokot Oct 19 '21 at 07:56
I use 12. Anyway, I went with your first solution. – Bobby Oct 20 '21 at 06:00
I may be wrong, but I checked the official docs and there's no word about deprecation. I also checked on my machine and eslint isn't complaining. I guess it may be related to your eslint/tslint config. – Adrian Kokot Oct 20 '21 at 11:14

Add a class to directive in angular

1 Answers1