Angular

Per utilizzare mdui in Angular, completa prima l'installazione. Quindi aggiungi la configurazione sottostante.

Configurazione

Innanzitutto, abilita i Web Component in Angular aggiungendo CUSTOM_ELEMENTS_SCHEMA all'array schemas nel tuo modulo.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }

Una volta impostato, puoi importare i componenti mdui nel codice del tuo componente Angular.

import { Dialog } from 'mdui/components/dialog.js';

@Component({
  selector: 'app-dialog-example',
  template: `<div id="page">
    <button (click)="openDialog()">Apri il dialogo</button>
    <mdui-dialog #dialog headline="Titolo del Dialogo">Contenuto del Dialogo</mdui-dialog>
  </div>`
})
export class DialogExampleComponent implements OnInit {

  // Usa @ViewChild per ottenere un riferimento all'elemento #dialog
  @ViewChild('dialog')
  dialog?: ElementRef<Dialog>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  openDialog() {
    // Usa nativeElement per accedere al componente mdui
    this.dialog?.nativeElement.open = true;
  }
}