CODEWITHSUNDEEP
angular
Jagadish KM
Jagadish KM

Reputation: 175

*ngFor not working and no error in console

I went through most of the questions where "ngFor is not working". below are the details.

app.modules.ts

import { NgModule } from '@angular/core';    
import { BrowserModule } from '@angular/platform-browser';    
import { TweetComponent } from './tweet.component';    
import { AppComponent } from './app.component';

@NgModule({    
    imports: [BrowserModule],
    declarations: [AppComponent, TweetComponent],
    bootstrap: [AppComponent]
    })

export class AppModule { }

app.components.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>List of tweets</h1>
            <tweets><tweets>`,
 })

export class AppComponent  { name = 'Angular'; }

tweet.component.ts

import { Component } from "@angular/core"
@Component({
   selector: 'tweets',
   template: `<ul>
                <li *ngFor="let item of myList">
                     <span> {{ item}}</span>
                  </li>  
              </ul> `
})

export class TweetComponent {
        myList: ['.net', 'C#', 'web services'];
}

Output:

Output

Elements:

Elements

And there are errors in console.

Upvotes: 0

Views: 5004

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222722

There are two issues,

values in the array myList should be assigned using =,

myList= ['.net', 'C#', 'web services'];

and you're missing tag on template

@Component({
  selector: 'my-app',
  template: `<h1>List of tweets</h1>
            <tweets></tweets>`,
 })

Upvotes: 3

eko
eko

Reputation: 40677

It should've been

myList = ['.net', 'C#', 'web services'];

if you use : it will try to declare the fields type.

Example:

myList: Array<string> = ['.net', 'C#', 'web services'];

Upvotes: 3

Related Questions