Breaking News: Grepper is joining You.com. Read the official announcement!

ngfor ionic example

Innocent Ibis answered on February 17, 2020 Popularity 8/10 Helpfulness 4/10

answer ngfor ionic example

related ionic ngfor in component

ngfor ionic example

Comment

<ion-select placeholder="Select" [(ngModel)]="selected">
    <ion-option *ngFor="let item of strings" [value]="item">{{item}}</ion-option>
</ion-select>`

Popularity 8/10 Helpfulness 4/10 Language typescript

Source: forum.ionicframework.com

Tags: ngfor typescript

Link to this answer
Share Copy Link

Contributed on Feb 17 2020

Innocent Ibis

0 Answers Avg Quality 2/10

Closely Related Answers

ionic ngfor in component

Comment


I'm going crazy, i've created a new component and he's working fine. Now i would like to use this on two pages.

Then i've created a component module (/components/all-components.module.ts) like this :

import { NgModule } from '@angular/core';
import { TagsComponent } from './tags/tags.component';
import { IonicModule } from '@ionic/angular';


@NgModule({
  imports: [IonicModule],
  declarations: [
    TagsComponent
  ],
  exports: [
    TagsComponent
  ]
})

export class AllComponentsModule {}

I've added on app.module.ts the AllComponentsModule and on my 2 pages module i have added same.

Now, my component work fine when i'm displaying text or variable, my console.log return the data, but if i use *ngFor nothing appear.

Finally, here's my component

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-tags',
  templateUrl: './tags.component.html',
  styleUrls: ['./tags.component.scss'],
})
export class TagsComponent implements OnInit {

  @Input() userTags: any;

  constructor() {
  }

  ngOnInit() {
      console.log(this.userTags);
  }
}

And the view:

<p>hi</p>
<div *ngFor="let tag of userTags">
  <p>{{tag?.name}}</p>
</div>

Ok i don't understand why but if i use a module to store all of components. On my all-components.module.ts i have to put the CommonModule to interpret *ngFor, *ngIf, etc.

With CommonModule import all working fine !

Here's the code updated:

import { NgModule } from '@angular/core';
import { TagsComponent } from './tags/tags.component';
import { CommonModule } from "@angular/common";

@NgModule({
  imports: [CommonModule],
  declarations: [
    TagsComponent
  ],
  exports: [
    TagsComponent
  ]
})

export class AllComponentsModule {}

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: ngfor javascript ngfo

Link to this answer
Share Copy Link

Contributed on Oct 14 2020

Cute Caterpillar

0 Answers Avg Quality 2/10

ngfor ionic example

Contents

More Related Answers

ngfor ionic example

Closely Related Answers

ionic ngfor in component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.