How to init materialize sidenav in Angular 5 project?

Question

I have angular project. Included materialize css and js using cdn. Can't init sidenav using script tag in index.html since navbar is one of component in my project. So what's best way to include materialize css in angular projects(for production) and how ro init the materlize components like sidenav, Carousel etc.

  var elem = document.querySelector('.sidenav');
  var instance = M.Sidenav.init(elem, options);

Above code is used to initialise sidenav while using JavaScript.

Answer 1

You can make use of 'AfterViewInit' of angular to initialize elements. In your 'ts' file, implement 'AfterViewInit' and override ngAfterViewInit() method. Then write your initialization code inside setTimeout() function inside ngAfterViewInit().

export class NameComponent implements OnInit, AfterViewInit {
  ....

  ngAfterViewInit(): void {
    setTimeout( function() {
      var elem = document.querySelector('.sidenav');
      var instance = M.Sidenav.init(elem, options);
    }, 0)
  }

  .....

}