Angular

Angular에서 mdui를 사용할 때는 먼저 설치 페이지의 지침에 따라 설치를 완료한 후 몇 가지 필요한 구성을 수행해야 합니다.

구성

먼저 Angular에서 Web Components 지원을 활성화해야 합니다. 예시는 다음과 같습니다:

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

구성이 완료되면 Angular 컴포넌트 코드에서 mdui 컴포넌트를 가져와서 사용합니다:

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

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

  // @ViewChild를 사용해 #dialog 요소의 참조를 가져옵니다
  @ViewChild('dialog')
  dialog?: ElementRef<Dialog>;

  ...

  constructor(...) {
  }

  ngOnInit() {
  }

  ...

  openDialog() {
    // nativeElement를 사용해 mdui 컴포넌트에 접근합니다
    this.dialog?.nativeElement.open = true;
  }
}