Angular.js: Cannot set a custom attribute directive

Question

I have ultra-simple code with a directive and a component trying to use it but the code doesn't work. Cannot understand what I am doing wrong.

@Directive({
  selector: '[classSetter]'
})
class classSetter implements OnInit {
  
  @Input() classSetter : string = "";

  el : ElementRef;

  constructor (el : ElementRef) {
    this.el = el;
  }

  ngOnInit () {
    this.el.nativeElement.classList.add(this.classSetter);
  }
}

@Component({
  selector: 'app-root',
  styles: ['.blue {background-color: blue;}'],
  template: `
              <span [classSetter]="'blue'">{{title}}</span>
            `
})
export class AppComponent {
  title = 'directive';
}

The error I get is Can't bind to 'classSetter' since it isn't a known property of 'span'.

StackBlitz: https://stackblitz.com/edit/angular-ivy-gf1ee4

Please, tell me, what do I miss here?

Have you provided the directive in provider array either in module or component? — Ashik
– Ashik, Commented Feb 13, 2022 at 14:02
Yes. And even tried to mention classSetter in imports: [...] of AppComponent where I use it. And still same error. — Daniil
– Daniil, Commented Feb 13, 2022 at 14:50
can you please provide me with a stackblitz with this code and issue — Aakash Garg
– Aakash Garg, Commented Feb 13, 2022 at 15:02
Have you tried this; <span classSetter [classSetter]="'blue'"> . Since you have to bind to the input property not the directive itself. — Fatih Ersoy
– Fatih Ersoy, Commented Feb 13, 2022 at 15:07
Thank you so much for your time! Aakash Garg, tried your suggestion and got the same result. Faith Ersoy, here it is! stackblitz.com/edit/angular-ivy-gf1ee4 — Daniil
– Daniil, Commented Feb 13, 2022 at 15:46

Aakash Garg · Accepted Answer · 2022-02-13 16:23:07Z

1

The directive needs to go in declarations array of module not the providers array of component decorator. fixed it here as well :-

https://stackblitz.com/edit/angular-ivy-bz2sez?file=src/app/app.component.ts

answered Feb 13, 2022 at 16:23

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

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

1 Comment

Daniil Over a year ago

That's right! Thank you so much! :)

Collectives™ on Stack Overflow

Angular.js: Cannot set a custom attribute directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related