3
 <tbody>
   <tr *ngFor="let employee of employees">
     <td>{{ employee.firstName }}</td>
     <td>{{ employee.lastName }}</td>
     <td>{{ employee.emailId }}</td>
   </tr>
  </tbody>

im using ngfor But Error sshowing like No directive is matched on attribute ngFor

5 Answers 5

5

Please import CommonModule inside your custom module. After that include it inside the imports array.

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

imports: [
  CommonModule
]

Sign up to request clarification or add additional context in comments.

4 Comments

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {CommonModule} from '@angular/common'; import { AppComponent } from './app.component'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import {HttpClientModule} from "@angular/common/http"; @NgModule({ declarations: [ AppComponent, EmployeeListComponent ], imports: [ CommonModule, BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
i used it brother
@Thushankavinda can you please update your question with the error?
No directive is matched on attribute ngFor. need to make this one. Watch code I used ngFor but showing weak warnings
1

import {NgForOf} from "@angular/common";

in your component.ts file, works for Angular 17

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
0

You need import CommonModule into your module, or component if you are using v14 standalone components. Share a stackblitz example of the error to better understand.

2 Comments

wait and I will update you now
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {CommonModule} from '@angular/common'; import { AppComponent } from './app.component'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import {HttpClientModule} from "@angular/common/http"; @NgModule({ declarations: [ AppComponent, EmployeeListComponent ], imports: [ CommonModule, BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
0

I found the problem. After importing CommonModule If it doesn't work after doing that, then check the CORS policy. Give Access to Access-Control-Allow-Origin.

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://example.com:8080

1 Comment

Access-Control-Allow-Origin: "*"
0

For me I found a hidden .idea folder (contains IntelliJ's project specific settings files, other code editors might have different folder names) inside my project, and once I deleted that, the warnings disappeared.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.