I attempted to implement the solution found on this post:
Unfortunately, the solution didn't work as expected. I am working with Angular and Typescript in my project.
Here is a snippet of my Typescript class:
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import * as M from 'materialize-css/dist/js/materialize';
@Component({
selector: 'app-list-nav',
templateUrl: './list-nav.component.html',
styleUrls: ['./list-nav.component.css']
})
export class ListNavComponent implements OnInit, AfterViewInit {
@ViewChild('collapsible') elCollapsible: ElementRef;
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
const instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}
}
In the HTML section, the element has an ID of 'collabsible', and the Class 'collabsible'. Despite this setup, I encountered the following error message:
ng:///AppModule/ContentComponent.ngfactory.js:12 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at ListNavComponent.ngAfterViewInit (webpack-internal:///../../../../../src/app/list-nav/list-nav.component.ts:20)
at callProviderLifecycles (webpack-internal:///../../../core/esm5/core.js:12922)
at callElementProvidersLifecycles (webpack-internal:///../../../core/esm5/core.js:12889)
at callLifecycleHooksChildrenFirst (webpack-internal:///../../../core/esm5/core.js:12872)
at checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14027)
at callViewAction (webpack-internal:///../../../core/esm5/core.js:14369)
at execComponentViewsAction (webpack-internal:///../../../core/esm5/core.js:14301)
at checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14024)
at callViewAction (webpack-internal:///../../../core/esm5/core.js:14369)
at execEmbeddedViewsAction (webpack-internal:///../../../core/esm5/core.js:14327)