Angular 2: Simple *ngFor not working


I have this in my app/component.ts

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

  selector: 'app-root',
  template: `
      <li *ngFor="let course of courses">
        {{ course }}
  styleUrls: ['./app.component.css']

export class AppComponent {
  course = ['Course 1', 'Course 2', 'Course 3'];

And in my app.module.ts, I also imported the necessary things

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'

import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

This is just a simple *ngFor code but why is it not working. Aside from these, I have not touched anything


You have a typo, check in ur component definition. You defined course = [...]; but you use courses in your template. Try changing the variable name in the component to courses

Answered By – Jota.Toledo

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.