小さなTODOアプリ

導入

*ngFor・イベント・入力・配列操作を組み合わせると、もう小さなアプリになります。やることを追加・削除できる TODO を作ってみましょう。

説明

imports: [CommonModule] を忘れずに。

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>やることリスト</h2>
    <input [value]="text" (input)="text = $any($event.target).value" placeholder="やること" />
    <button (click)="add()">追加</button>
    <ul>
      <li *ngFor="let item of items; let i = index">
        {{ item }} <button (click)="remove(i)">✕</button>
      </li>
    </ul>
    <p>残り {{ items.length }} 件</p>
  `,
})
class AppComponent {
  items: string[] = ['牛乳を買う', 'Angular を学ぶ'];
  text: string = '';
  add(): void {
    if (this.text.trim() === '') return;
    this.items.push(this.text);
    this.text = '';
  }
  remove(i: number): void {
    this.items.splice(i, 1);
  }
}

• (input)="text = $any($event.target).value" … テンプレート内で直接代入する書き方。$any(...) は型チェックを一時的に緩める Angular の関数です。
• add() で配列に追加、remove(i) で splice により削除。
• *ngFor の let i = index で各行の番号を取り、削除に使っています。

やってみよう

「全部消す」ボタンを追加してみましょう（ヒント: this.items = []）。入力が空のときは追加ボタンを押しても増えないことも確かめてください。