1
2
3I'm going crazy, i've created a new component and he's working fine. Now i would like to use this on two pages.
4
5Then i've created a component module (/components/all-components.module.ts) like this :
6
7import { NgModule } from '@angular/core';
8import { TagsComponent } from './tags/tags.component';
9import { IonicModule } from '@ionic/angular';
10
11
12@NgModule({
13  imports: [IonicModule],
14  declarations: [
15    TagsComponent
16  ],
17  exports: [
18    TagsComponent
19  ]
20})
21
22export class AllComponentsModule {}
23
24I've added on app.module.ts the AllComponentsModule and on my 2 pages module i have added same.
25
26Now, my component work fine when i'm displaying text or variable, my console.log return the data, but if i use *ngFor nothing appear.
27
28Finally, here's my component
29
30import { Component, OnInit, Input } from '@angular/core';
31
32@Component({
33  selector: 'app-tags',
34  templateUrl: './tags.component.html',
35  styleUrls: ['./tags.component.scss'],
36})
37export class TagsComponent implements OnInit {
38
39  @Input() userTags: any;
40
41  constructor() {
42  }
43
44  ngOnInit() {
45      console.log(this.userTags);
46  }
47}
48
49And the view:
50
51<p>hi</p>
52<div *ngFor="let tag of userTags">
53  <p>{{tag?.name}}</p>
54</div>
55
56Ok 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.
57
58With CommonModule import all working fine !
59
60Here's the code updated:
61
62import { NgModule } from '@angular/core';
63import { TagsComponent } from './tags/tags.component';
64import { CommonModule } from "@angular/common";
65
66@NgModule({
67  imports: [CommonModule],
68  declarations: [
69    TagsComponent
70  ],
71  exports: [
72    TagsComponent
73  ]
74})
75
76export class AllComponentsModule {}
77