Angularで要素を追加する実装例まとめ

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
})
export class AppComponent {
  // メッセージを表示するかどうかを制御するプロパティ
  showMessage = false;

  // ボタンがクリックされたときに実行されるメソッド
  toggleMessage() {
    this.showMessage = !this.showMessage;
  }
}

<!-- app.component.html -->

<h1>if文で要素を追加する例</h1>

<button (click)="toggleMessage()">メッセージを表示/非表示</button>

@if (showMessage) {
  <p>こんにちは！この要素はshowMessageがtrueのときだけ表示されます。</p>
}

// app.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  // 表示する項目のリスト
  items: string[] = [];

  // 入力欄にバインドされる値
  newItem = '';

  // 新しい項目を追加するメソッド
  addItem() {
    if (this.newItem.trim()) {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
}

<!-- app.component.html -->

<h1>for文で要素を追加する例</h1>

<input [(ngModel)]="newItem" placeholder="新しい項目を入力">
<button (click)="addItem()">追加</button>

<ul>
  @for (item of items; track $index) {
    <li>{{ item }}</li>
  }
</ul>

// app.component.ts
import { Component, ElementRef, Renderer2, inject } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
})
export class AppComponent {
  // inject()を使ってRenderer2とElementRefを注入
  private renderer = inject(Renderer2);
  private el = inject(ElementRef);

  // ボタンクリックで新しい要素を追加するメソッド
  addElement() {
    // 新しいdiv要素を作成
    const newDiv = this.renderer.createElement('div');

    // テキストノードを作成
    const text = this.renderer.createText('新しく追加された要素です。');

    // テキストをdivに追加
    this.renderer.appendChild(newDiv, text);

    // divをコンポーネントのルート要素に追加
    this.renderer.appendChild(this.el.nativeElement, newDiv);
  }
}

<!-- app.component.html -->

<h1>Renderer2で要素を追加する例</h1>

<button (click)="addElement()">要素を追加</button>

addStyledElement() {
  // 新しいp要素を作成
  const newParagraph = this.renderer.createElement('p');

  // テキストを追加
  const text = this.renderer.createText('スタイル付きの要素です。');
  this.renderer.appendChild(newParagraph, text);

  // クラスを追加
  this.renderer.addClass(newParagraph, 'highlight');

  // スタイルを設定
  this.renderer.setStyle(newParagraph, 'color', 'blue');
  this.renderer.setStyle(newParagraph, 'font-weight', 'bold');

  // 属性を設定
  this.renderer.setAttribute(newParagraph, 'data-info', 'custom-element');

  // 要素を追加
  this.renderer.appendChild(this.el.nativeElement, newParagraph);
}

// message.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-message',
  standalone: true,
  template: '<p>動的に追加されたコンポーネントです。</p>',
})
export class MessageComponent {}

// app.component.ts
import { Component, viewChild, ViewContainerRef } from '@angular/core';
import { MessageComponent } from './message.component';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
})
export class AppComponent {
  // viewChild.required関数を使ってViewContainerRefへの参照を取得（Signalとして取得）
  // テンプレート内に必ず存在する場合は required を使うことで undefined チェックが不要になります
  container = viewChild.required('container', { read: ViewContainerRef });

  // コンポーネントを動的に追加するメソッド
  addComponent() {
    // Signalなので関数として呼び出して値にアクセスします
    this.container().createComponent(MessageComponent);
  }
}

<!-- app.component.html -->

<h1>ViewContainerRefでコンポーネントを追加する例</h1>

<button (click)="addComponent()">コンポーネントを追加</button>

<div #container></div>