Angular スタンドアローンコンポーネントでngForを使うにはimportが必要だった話

AngularのスタンドアローンコンポーネントでngForを使用しようとした際にエラーが発生し、解決方法を記載しました。ngForを使用する際はTypeScriptで明示的にインポートする必要があります。その際、@ComponentのimportsにNgForを追加することで問題が解決します。

Angularのスタンドアローンコンポーネントを使ってアプリケーションを開発する際、ngForを使おうとしてエラーに遭遇したので、その対応方法を簡単にまとめました。

背景とエラー

Angularを使った開発へ久しぶりに挑戦しているのですが、どうせならとスタンドアローンコンポーネントでの開発にもチャレンジしています。Angularでリスト要素を作るときなどには、ngForを使う・・・というのは覚えていたので、次のような実装をHTMLファイルに書きました。


    <ion-item *ngFor="let region of regions" (click)="onRegionClick(region)" button>
      <ion-label>{{ region.ja }}</ion-label>
      <ion-icon name="chevron-forward" slot="end"></ion-icon>
    </ion-item>

すると以下のエラーメッセージと共にアプリケーションが動かなくなりました。

NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-item' (used in the 'Tab1Page' component template). 1. If 'ion-item' is an Angular component and it has the 'ngForOf' input, then verify that it is included in the '@Component.imports' of this component. 2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

利用するコンポーネントファイルなどで、明示的インポートが必要

ざっと調べたところどうやらngForを使いたい場合は、TypeScript側で明示的にインポートする必要があるみたいです。次のように@ComponentのimportsにNgForを追加すると動くようになりました。

import { Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel } from '@ionic/angular/standalone';
import { RegionService } from 'src/app/services/region.service';
import { NavController } from '@ionic/angular';
import { NgFor } from '@angular/common';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel, NgFor],
})
export class Tab1Page implements OnInit {

参考ドキュメント

https://v17.angular.jp/guide/standalone-components