Standalone components provide a simplified way to build Angular applications.
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() {
}
}