クリックして子コンポーネントを追加する｜AngularでWebサイト作成

ntuti

クリックして子コンポーネントを追加する｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回は「＋」ボタンをクリックして登録フォームを追加するコンポーネントを作成してみます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

Angularサンプルプログラム

子コンポーネントのテンプレート

まずは追加する子コンポーネントのテンプレートを作成しておきます。
sub.component.html

<li style="list-style:none;margin:10px;">
        <input class="form-control" placeholder="name">
        <input class="form-control" placeholder="age">
        <button class="btn btn-default" (click)="removeObject()">削除</button>
</li>

2つのテキストフォームを表示するコンポーネントです。
次に、親コンポーネントのテンプレートを作成します。
parent.component.html

<form class="form-inline">
  <div #add></div>
  <button class="btn btn-warning" style="margin-left:10px;" (click)="addComponent()">＋</button>
</form>

「＋」をクリックするとaddComponentメソッドが実行されるようにします。

parent.component.ts(該当箇所のみ抜粋しています)

export class ParentComponent implements OnInit {
  @ViewChild('add', { read: ViewContainerRef }) container: ViewContainerRef;
  constructor(
    private _cfr: ComponentFactoryResolver
  ){}
  addComponent(){
      var sub = this._cfr.resolveComponentFactory(SubComponent);
      var subComponent = this.container.createComponent(sub);
      subComponent.instance._ref = subComponent;
  }
}