Angular Error NG0303 bei use NGFor in app.component.html in angular project

Question

I want ti use for loop in angular and this is my code in app.component.ts

export class AppComponent {
  title = 'CatsBookProject';


    postText =[
      'Hello , i am here to meet new friends and make a friends relationship',
      'Hello everyone, Iam glad you are here',
      'Hey, my name is Susanne. I amm 2 years old',
         'I like eating cookies.'
     ]
    postImgs = [
      'assets/Imge/img1.png',
      'assets/Imge/im21.png',
      'assets/Imge/img3.jpg',
      'assets/Imge/img4.jpg',
     ]


   buttonClicked(){
    alert("What's up");
  }
}
and this in `app.componwnt.html`
[![enter image description here](https://i.stack.imgur.com/0IDE4.png)](https://i.stack.imgur.com/0IDE4.png)

<app-stroy *ngFor='let i of [0, 1, 2, 3]' [img]='postImgs[0]' [text]='postText[0]'>

and I have this error 

[![enter image description here](https://i.stack.imgur.com/a0PPp.png)](https://i.stack.imgur.com/a0PPp.png)

NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'app-stroy' (used in the '_AppComponent' component template).

1. If 'app-stroy' 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 'app-stroy' 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.

this is the code in `story.component.ts `

    import { Component, Input, OnInit } from '@angular/core';
    @Component({
    selector: 'app-stroy',
    standalone: true,
    imports: [],
    templateUrl: './stroy.component.html',
    styleUrl: './stroy.component.scss'
    })
    export class StroyComponent implements OnInit{
    @Input() text:string='';
    @Input() img :string='';
    constructor(){ }
    ngOnInit(): void {
    }}

and this is in 

> app.component.ts

    import { Component } from '@angular/core';
    import { RouterOutlet } from '@angular/router';
    import {HeaderComponent} from './header/header.component';
    import {StroyComponent} from './stroy/stroy.component';
    import { NgModel } from '@angular/forms';

    @Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, HeaderComponent, StroyComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
    })
    export class AppComponent {
    title = 'CatsBookProject';
    postText =[
      'Hello , i am here to meet new friends and make a friends         relationship',
      'Hello everyone, Iam glad you are here',
      'Hey, my name is Susanne. I amm 2 years old',
         'I like eating cookies.'
     ]
    postImgs = [
      'assets/Imge/img1.png',
      'assets/Imge/im21.png',
      'assets/Imge/img3.jpg',
      'assets/Imge/img4.jpg',
     ]
   buttonClicked(){
    alert("What's up");
   }}

maybe some one know why ??
I need some help.

Answer 1

You should include NgForOf or CommonModule in the imports array of the AppComponent.

import { NgForOf } from '@angular/common';
// Or
//import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeaderComponent, StroyComponent, NgForOf, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {

}

Demo @ StackBlitz

Answer 2

If you're on Angular v17, I'd recommend using the @for block instead of ngFor.

It provides the same feature but doesn't require to import the directive or CommonModule.