CODEWITHSUNDEEP
angularionic3componentsngfor
Kreepz
Kreepz

Reputation: 149

ngFor in custom component

I work on a custom component in Ionic v3, and I'm trying to use a ngFor.

In my .ts file I've this in my ngOnInit: 

this.nb_stars = [];

for(let i=1; i<=4; i++) {
   this.nb_stars.push(i);
}

And in my .html I've this:

<div *ngFor="let star in nb_stars">
    test
</div>

But I've this error:

Uncaught Error: Template parse errors: Can't bind to 'ngForIn' since it isn't a known property of 'div'. (" --> ]*ngFor="let test in nb_stars">

"): ng:///ComponentsModule/CompStarsComponent.html@3:5 Property binding ngForIn not used by any directive on an embedded template.

Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" --> [ERROR ->]

If anyone can help me.

Upvotes: 0

Views: 1863

Answers (1)

Sandy.....
Sandy.....

Reputation: 2870

You need to replace in with of inside ngFor directive to get the values.
Basically of is used when we have to iterate over values and in is used when we have to iterate over properties.
Please find detailed code below:

<!-- Using of, which iterates over values -->
<div *ngFor="let star of nb_stars">

and

<!-- Using in, which iterate over properties -->
<div *ngFor="let star in nb_stars">

Also as per the error you received, you have to import the CommonModule in the root module (app.module.ts) as follows:

import { CommonModule } from "@angular/common";
@NgModule({
    imports: [CommonModule]
})

Upvotes: 1

Related Questions