CODEWITHSUNDEEP
angularjstypescriptangularmodal-dialog
C.B.
C.B.

Reputation: 310

componentHandler is not defined

Hello my fellow stackoverflowers,

I am currently working a project. And i am kind of stuck now. I am trying to get a dialog box working but so far not so good. I am at the final stage where i have to define my componentHandler to work. But i get the error message "EXCEPTION: ReferenceError: componentHandler is not defined".

This is my code in my AppComponent where i define the componentHandler. 

import { Component, OnInit, ViewContainerRef, Input } from '@angular/core';

import '../styles/global.css';

import { ROUTER_DIRECTIVES } from "@angular/router";
import { MODAL_DIRECTVES, BS_VIEW_PROVIDERS, CollapseDirective } from '../../node_modules/ng2-bootstrap/ng2-bootstrap';

import { LoginService } from "./services/login.service";
import { MenuService } from "./services/menu.service";
import { Menu } from './models/menu';
import { MenuGroup } from './models/menu-group';
import { MenuGroupedArea } from './models/menu-grouped-area';
import { MenuItem } from './models/menu-item';

import {ConfirmService} from "./components/confirm/confirm.service";
import {ConfirmComponent} from "./components/confirm/confirm.component";
    declare var componentHandler: any;

    @Component({
      selector: 'app-container',
      template: require('./app.component.html'),
      styles: [require('./app.component.css')],
      viewProviders: [BS_VIEW_PROVIDERS],
      directives: [MODAL_DIRECTVES, ROUTER_DIRECTIVES, CollapseDirective, ConfirmComponent],
      providers: [
        LoginService, MenuService, ConfirmService]
    })

    export class AppComponent implements OnInit {

      public isCollapsed: boolean;

      public viewContainerRef: ViewContainerRef;

      public menu: Menu;

      constructor(viewContainerRef: ViewContainerRef, private _confirmService: ConfirmService) {
        this.viewContainerRef = viewContainerRef;
        this.menu = new Menu();

        var area = new MenuGroupedArea();
        area.identifier = "Navigation";
        var group = new MenuGroup();
        group.identifier = "Group";
        var item = new MenuItem();
        item.identifier = "Item";
        group.items.push(item);
        area.groups.push(group);
        this.menu.areas.push(area);

      }

      title = "Notifier!!!"

      showConfirmDialog() {
        this._confirmService.activate("Are you sure?")
          .then(res => console.log(`Confirmed: ${res}`));
      }

      ngOnInit(): any {
          componentHandler.upgradeDom();
      }

    }

any sorts of answers or question is welcome!

Upvotes: 0

Views: 2509

Answers (1)

yurzui
yurzui

Reputation: 214047

Check source code 

 <script src="https://code.getmdl.io/1.1.3/material.min.js"
                    asp-fallback-src="lib/material-design-lite/material.min.js"
                    asp-fallback-test="window.componentHandler"><== look at here

Upvotes: 3

Related Questions