CODEWITHSUNDEEP
angular7viewchildsimplebar
Angus
Angus

Reputation: 31

ViewChild or Local Reference to external npm module component

I am using SimpleBar (https://www.npmjs.com/package/simplebar-angular) in my project.

Since I would like to modify some styles of that component, so I added a local reference in the template,

<ngx-simplebar [options]="simpleBarOptions" #simplebar></ngx-simplebar>

and viewchild like this in my Typescript file:

@ViewChild('simplebar') simplebar: ElementRef;

However, when I try to log it in console with this code. It returns undefined. Why is that? If I local reference to a <div> directly, then it works fine.

  ngAfterViewInit() {
    console.log('log: ' + this.simplebar.nativeElement);
  }

The component code I see in Chrome (F12 mode) is as follows:

<ngx-simplebar _ngcontent-opy-c3="" data-simplebar="init" ng-reflect-options="[object Object]">
  <div class="simplebar-wrapper" style="margin: 0px;">
  ......
  </div>
</ngx-simplebar>

Many thanks!

Angus

Upvotes: 1

Views: 283

Answers (1)

ratgcode
ratgcode

Reputation: 1

try this:

@ViewChild(SimplebarAngularComponent, { static: false }) simplebar: ElementRef<SimplebarAngularComponent>;

Upvotes: 0

Related Questions