How to use materialize-css with angular

Question

I have created an angular4 project with angular-cli. I want to materialize-css@next library. So I have installed it using

np         


        

Answer 1

1) Install Materialize:

yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css

2) Import Materialize styles:

@import '~material-design-icons-iconfont/dist/material-design-icons.css';
@import '~materialize-css/sass/materialize';

3) Create HTML for the component:

  

    
Logout
  
  

    

      Akita
      

        
Dashboard
        
Todos
        
Login
        
Welcome, {{ name$ | async}}!arrow_drop_down
      
    
  

4) Import Materialize and bind the dropdown:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import * as M from 'materialize-css';
import { Observable } from 'rxjs';
import { AuthQuery, AuthService } from '../auth/state';

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.scss']
})
export class MainNavComponent implements OnInit, AfterViewInit {
  name$: Observable;

  @ViewChild('dropdown') dropdown: ElementRef;

  constructor(private router: Router, private authService: AuthService, private authQuery: AuthQuery) {}

  ngOnInit() {
    this.name$ = this.authQuery.name$;
  }

  ngAfterViewInit() {
    new M.Dropdown(this.dropdown.nativeElement, {});
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('');
  }
}