Как запустить материализацию sidenav в проекте Angular 5?

Я действительно рекомендую вам использовать официальный пакет Angular Material, чтобы использовать материальный дизайн в вашем проекте Angular5. Он имеет отличную интеграцию с angular, и вам не нужна установка javascript в вашем index.html.

Вы можете узнать больше в Angular Material сайт с очень понятным руководством по установке и хорошей документацией.

Что касается вашего вопроса, с Angular Material вы можете получить рабочий сайдинг с помощью этого:

<mat-sidenav-container class = "example-container">
  <mat-sidenav mode = "side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

Просто не забудьте правильно импортировать модуль sidenav в ваш app.module.ts.

Если вы хотите использовать библиотеку материализации в проекте angular 5, я настоятельно рекомендую вам взглянуть на angular2-материализовать, а не просто импортировать JS и CSS из CDN.

Вы просто импортируете модуль в свой app.module и получаете доступ ко всем материализованным элементам.

Вы можете использовать «AfterViewInit» angular для инициализации элементов. В вашем ts-файле реализуйте AfterViewInit и переопределите метод ngAfterViewInit (). Затем напишите свой код инициализации внутри функции setTimeout () внутри ngAfterViewInit ().

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

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

  .....

}