Angular – Standalone component – NG0303: Can’t bind to ‘ngForOf’ since it isn’t a known property of

How to reproduce it

component.ts

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-paginator',
  templateUrl: './paginator.component.html',
  styleUrls: [ './paginator.component.css' ]
})
export class PaginatorComponent {

  pages = [ 1, 2, 3 ]

  constructor() {
  }
}

component.html

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item" *ngFor="let page of pages">
      <a class="page-link" href="#">{{ page }}</a>
    </li>
  </ul>
</nav>

Error

NG0303: Can't bind to 'ngForOf' since it isn't a known property of ...

Solution

Import CommonModule.

The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported. Please make sure that either the `NgFor` directive or the `CommonModule` is included in the `@Component.imports` array of this component.

component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-paginator',
  templateUrl: './paginator.component.html',
  styleUrls: [ './paginator.component.css' ],
  imports: [ CommonModule ]
})
export class PaginatorComponent {

  pages = [ 1, 2, 3 ]

  constructor() {
  }
}

• Share on Facebook