Cannot read properties of undefined (reading 'add') while adding a class through angular's renderer2

Question

Here's my code:

@Directive({
  selector: '[appDropdown]',
})

export class DropdownDirective {
  isClassApplied: boolean;
  @Input('appDropdown') className: string;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {
    this.isClassApplied = false;
  }

    @HostListener('click') onClickAddClass() {
        if (!this.isClassApplied) {
            this.isClassApplied = true;
            this.renderer.addClass(this.elRef, this.className);
        } else {
            this.isClassApplied = false;
            this.renderer.removeClass(this.elRef, this.className);
        }
    }
}

Here's the html: CodePen Link

It is giving me an error when trying to add a class on the elRef. Can anyone please tell me what's wrong in this.

What is the error you get ?

Chen Peleg
– Chen Peleg

2023-02-11 11:07:17 +00:00
Commented Feb 11, 2023 at 11:07 — Chen Peleg
– Chen Peleg, Commented Feb 11, 2023 at 11:07

Shubham Maheshwari · Accepted Answer · 2023-02-16 12:53:02Z

What happens here is i haven't given the correct argument to addClass function. I must have to pass the element on which the directive sits on. And that should be found under the nativeElement of the ElementRef.

So the code look like this:

@Directive({
  selector: '[appDropdown]',
})

export class DropdownDirective {
  isClassApplied: boolean;
  @Input('appDropdown') className: string;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {
    this.isClassApplied = false;
  }

    @HostListener('click') onClickAddClass() {
        if (!this.isClassApplied) {
            this.isClassApplied = true;
            this.renderer.addClass(this.elRef.nativeElement, this.className);
        } else {
            this.isClassApplied = false;
            this.renderer.removeClass(this.elRef.nativeElement, this.className);
        }
    }
}

Now, it should work as expected.

Chen Peleg · Accepted Answer · 2023-02-11 11:20:11Z

0

I'm not sure what the error is exactly, but notice that the input in your directives should be without the bindingPropertyName, like that:

@Input() appDropdown: string;

Then in your component you can write:

<div [appDropdown]="class_name"></div>

source

answered Feb 11, 2023 at 11:20

Chen Peleg

3,1903 gold badges27 silver badges44 bronze badges

2 Comments

Shubham Maheshwari Over a year ago

Error is exactly what's in the title, but this solution doesn't work error persists anyways. Can you suggest any other solution? Thanks.

Shubham Maheshwari Over a year ago

Here's is the image of an error: ibb.co/x8Ntb93

Vigneshwaran Sourirajalu · Accepted Answer · 2023-02-11 12:51:32Z

0

It seems the DOM element is missing when the directive tries to add a class name. This issue may arise when the directive appDropDown is inside *ngIf structural directive. Trying using [hidden] property or use css opacity property in case you are using ngIf.

answered Feb 11, 2023 at 12:51

Vigneshwaran Sourirajalu

1274 bronze badges

2 Comments

Shubham Maheshwari Over a year ago

Here's the html of it: codepen.io/shubhRepository/pen/mdjNjZZ. Btw i don't have any structural directives.

Vigneshwaran Sourirajalu Over a year ago

The codepen which you share doesn't seem to replicate the issue, could you share it in stackblitz?

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'add') while adding a class through angular's renderer2

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related