Cannot read property addclass of undefined

Question

I pass a dom node along with a classname to a directive where the directive then will add class to the passed dom element. I get an error Cannot read property addclass of undefined. Please have a look at the plnkr. https://plnkr.co/edit/kT37XoeMWMZ7qexwZ15W?p=preview

export class App implements AfterViewInit {
  constructor(private el: ElementRef) {
   }

    @ViewChild(changeStyleClass) vc: changeStyleClass;
    @ViewChild('h1Ref') h1: el;
    @ViewChild('mbc') mbc: el;

  ngAfterViewInit() {
    this.vc.addClass(this.h1.nativeElement, 'redColor');
    this.vc.addClass(this.mbc.nativeElement, 'makeBorder');
  }
  }
}

you need to add the html side of this component in the question — Suraj Rao
– Suraj Rao, Commented Nov 12, 2017 at 10:59
That will be the part of the answer. Please check the plunkr — Karty
– Karty, Commented Nov 12, 2017 at 11:02
you need to provide a minimal reproducible example here and not in a link — Suraj Rao
– Suraj Rao, Commented Nov 12, 2017 at 11:04

Mohib Wasay · Accepted Answer · 2017-11-12 13:15:50Z

1

Apply your directive to DOM elements.

<h1 changeStyleClass #h1Ref>change this to green color</h1>
<p changeStyleClass #mbc>make border class</p>

Edit

Instead of creating a ViewChild reference for a directive. You can also use nativeElement.classList to add and remove classes on the element directly too.

@ViewChild('h1Ref') h1: ElementRef;
@ViewChild('mbc') mbc: ElementRef;

ngAfterViewInit() {
  this.h1.nativeElement.classList.add('makeBorder');
  this.h1.nativeElement.classList.add('redColor');

  this.mbc.nativeElement.classList.add('makeBorder');
  this.mbc.nativeElement.classList.add('redColor');
}

edited Nov 12, 2017 at 13:15

answered Nov 12, 2017 at 11:05

Mohib Wasay

3191 gold badge3 silver badges14 bronze badges

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

4 Comments

Karty Over a year ago

sorry thats incorrect. check this plnkr plnkr.co/edit/5Htzsl0jp4ZdKeqrkAlU?p=preview The p tag doesnt work by that way

Mohib Wasay Over a year ago

I realized the problem, This was because vc was only referring to first instance of ViewChild() defined in the component. Check my edited answer. :)

Karty Over a year ago

I wanted to pass without a reference.

Mohib Wasay Over a year ago

I just checked the first example is working correctly. It was not working in the plunkr because you had the wrong order actually. In your example you declared view child before directive declaration on the DOM. If you write <h1 changeStyleClass #h1Ref>change this to green color</h1> instead of <h1 #h1Ref changeStyleClass>change this to green color</h1> It won't work

Collectives™ on Stack Overflow

Cannot read property addclass of undefined

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related