Angular

Pour utiliser mdui dans Angular, suivez d'abord les instructions de la page Installation, puis effectuez les configurations requises.

Configuration

Vous devez d'abord activer la prise en charge des Web Components dans Angular. Exemple :

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

Une fois la configuration terminée, vous pouvez importer et utiliser les composants mdui dans le code du composant Angular :

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

@Component({
  selector: 'app-dialog-example',
  template: `<div id="page">
    <button (click)="openDialog()">Ouvrir la boîte de dialogue</button>
    <mdui-dialog #dialog headline="Titre de la boîte de dialogue">Contenu de la boîte de dialogue</mdui-dialog>
  </div>`
})
export class DialogExampleComponent implements OnInit {

  // Utiliser @ViewChild pour obtenir une référence à l'élément #dialog
  @ViewChild('dialog')
  dialog?: ElementRef<Dialog>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  openDialog() {
    // Utiliser nativeElement pour accéder au composant mdui
    this.dialog?.nativeElement.open = true;
  }
}