Angular

Um mdui in Angular zu verwenden, müssen Sie zuerst die Installation wie auf der Installationsseite beschrieben abschließen und dann einige notwendige Konfigurationen vornehmen.

Konfiguration

Zuerst müssen wir die Unterstützung für Web Components in Angular aktivieren. Beispiel:

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 {}

Nach der Konfiguration können wir die mdui-Komponenten in den Angular-Komponentencode importieren und verwenden:

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

@Component({
  selector: 'app-dialog-example',
  template: `<div id="page">
    <button (click)="openDialog()">Dialog öffnen</button>
    <mdui-dialog #dialog headline="Dialog-Titel">Dialog-Inhalt</mdui-dialog>
  </div>`
})
export class DialogExampleComponent implements OnInit {

  // Verwenden Sie @ViewChild, um eine Referenz auf das #dialog-Element zu erhalten
  @ViewChild('dialog')
  dialog?: ElementRef<Dialog>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  openDialog() {
    // Verwenden Sie nativeElement, um auf die mdui-Komponente zuzugreifen
    this.dialog?.nativeElement.open = true;
  }
}