Angular

Angular'da mdui'yi kullanırken, öncelikle Kurulum sayfasındaki yönergeleri izleyerek kurulumu tamamlamanız ve ardından bazı gerekli yapılandırmaları yapmanız gerekir.

Yapılandırma

İlk olarak, Angular'da Web Bileşenleri (Web Components) desteğini etkinleştirmemiz gerekiyor. Örnek aşağıda verilmiştir:

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

Yapılandırma tamamlandıktan sonra, Angular bileşen kodumuza mdui bileşenlerini dahil edip kullanabiliriz:

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

@Component({
  selector: 'app-dialog-example',
  template: `<div id="page">
    <button (click)="openDialog()">Diyalogu Aç</button>
    <mdui-dialog #dialog headline="Diyalog Başlığı">Diyalog İçeriği</mdui-dialog>
  </div>`
})
export class DialogExampleComponent implements OnInit {

  // #dialog öğesine referans almak için @ViewChild kullanın
  @ViewChild('dialog')
  dialog?: ElementRef<Dialog>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  openDialog() {
    // mdui bileşenine erişmek için nativeElement kullanın
    this.dialog?.nativeElement.open = true;
  }
}