How to Use Materialize-CSS with Angular

How to use materialize-css with angular

angular2-materialize is based on materialize-css 0.X. As materialize-css 1.X has not dependency on jQuery. Even I did not found any wrapper over this and I don't want to use the wrapper modules. So I have solved this problem by following these steps.

1) JS and CSS Reference in angular-cli.json

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
  "../node_modules/hammerjs/hammer.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

hammerjs is required for some components to listen sliding events.

2) Import in ts

import * as M from "materialize-css/dist/js/materialize";

3) Get the element Reference

@ViewChild('collapsible') elCollapsible: ElementRef;

4) Wrap the element

ngAfterViewInit() {
    let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}

5) Do not forget #collapsible on your <ul #collapsible>

And done.

Materialize in Angular 10 - CSS being applied, but JS not executing

TH JS isue was resolved replacing declare const M: any; with impoert* as M from 'materialize.css/js/materialize.min.js but the carousel stiil didin't work.

adding materialize to angular 8 not working

Found your error atlast.

The styles and scripts you declared in angular.json file is within the test section

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/hammerjs/hammer.js",
              "node_modules/materialize-css/dist/js/materialize.js"
            ]
          }
        }

Move it inside the build section and your code will work fine

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/panel",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/hammerjs/hammer.js",
              "node_modules/materialize-css/dist/js/materialize.js"
            ]
          }

Materialize css carousel doesn't work in Angular

Take a look at this example (it isn't mine). I think that issue is that you are initializing carousel from ngOnInit but it is too early since child component won't be rendered at that point.

https://stackblitz.com/edit/angular-materialize-carousel?file=src%2Fapp%2Fapp.component.ts

Angular 5 with materialize css

Use import 'materialize-css'; before import {MaterializeModule} from 'angular2-materialize'; in app.module.ts.

how to implement materialize navbar with angular 8

I would suggest to use Angular Material.

In the components section you can find several material components like the menu which can be used as main nav bar.

A minimal example would look like this:

<mat-menu #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

Have a look at the examples for Menu to get some ideas:

https://material.angular.io/components/menu/examples

Additionally you can make use of several starter repos to see how Angular works together with Material e.g. angular-ngrx-material-starter

---

If you insist to use to use materializecss 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)
  }

  .....

}

---

Related Topics