Materialize css carousel doesn't work in Angular

Question

I'm new to Angular and materialize and i faced a problem. I imported materialize successfully into Angular, materialize css elements work but js elements don't. Carousel and other elements such as select, don't show up in my component. Just an empty spot.

Here is package.json

  "private": true,
  "dependencies": {
    "@angular/animations": "^10.0.14",
    "@angular/common": "~10.0.11",
    "@angular/compiler": "~10.0.11",
    "@angular/core": "~10.0.11",
    "@angular/forms": "~10.0.11",
    "@angular/platform-browser": "~10.0.11",
    "@angular/platform-browser-dynamic": "~10.0.11",
    "@angular/router": "~10.0.11",
    "@mdi/font": "^5.6.55",
    "@tinymce/tinymce-angular": "^4.2.0",
    "materialize-css": "^1.0.0-rc.2",
    "ngx-materialize": "^6.1.3",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.7",
    "@angular/cli": "~10.0.7",
    "@angular/compiler-cli": "~10.0.11",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

here is angular.json

"styles": [
              "src/styles.css",
              "node_modules/materialize-css/dist/css/materialize.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
   "node_modules/materialize-css/dist/js/materialize.min.js",
   "node_modules/@mdi/font/css/materialdesignicons.min.css"
            ]
          },

Here is my component

import { Component, Input, OnInit } from '@angular/core';
declare const M: any;

@Component({
  selector: 'app-recommended-posts',
  templateUrl: './recommended-posts.component.html',
  styleUrls: ['./recommended-posts.component.css']
})
export class RecommendedPostsComponent implements OnInit {



  constructor) { }

  ngOnInit(): void {
    
    M.AutoInit();
    
   }
 
}

and html file:

<div class="carousel">
    <a class="carousel-item" href="#one!">test message</a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>

I i tried to put js code as to html page and even jquery code from the materilize website. But doesn't help either.

This solution i looked up on a question on this website but the result is the same.

Everything seems to be imported, but i don't know why it doesn't work. What is my mistake? Thank you!

RandomCode RandomCode · Accepted Answer · 2020-10-02T13:37:41

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

Materialize css carousel doesn't work in Angular

1 Answers