Ngfor ionic example

Ionic ngfor in component


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 {}

Ngfor ionic example

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

Source: forum.ionicframework.com

Similar codes

9 votes198 views3 answers
Create next app typescript
TypeScript
2 votes126 views1 answer
Type of setinterval typescript
TypeScript
0 vote111 views1 answer
Error: either specify it explicitly with --sdk_root= or move this package into its expected location: <sdk>/cmdline-tools/latest/
TypeScript
0 vote109 views1 answer
Wordpress posts sidebar with category link programmatically
TypeScript
0 vote124 views1 answer
If image is broken show alternative image angular
TypeScript
0 vote113 views1 answer
Typescript cast to type remove properties
TypeScript
1 vote117 views1 answer
Edit card-deck breakingpoints bootstrap
TypeScript
0 vote109 views1 answer
Requests python-passlib python-pil -y ubuntu 18.04
TypeScript
0 vote120 views2 answers
Npm WARN [email protected] requires a peer of tslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
TypeScript
0 vote132 views1 answer
Outputs i angular
TypeScript