Component not allowing input properly

Ionic Framework ionic-v3
1

I am working on building my own Components but I can’t get it to work correctly. I created a Component called PostCard, it is going to be reused in a lot of placed throughout the app. It has an @Input decorator but I keep getting an error when trying to run the application. I am getting the error

“Can’t bind to ‘post’ since it isn’t a known property of ‘post-card’.”

The code is extremely simple right now, I was just trying to learn it, so it is super simple. Here is the post-card.ts file in the components directory…

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


@Component({
  selector: 'post-card',
  templateUrl: 'post-card.html'
})
export class PostCardComponent {

  @Input() post;

  constructor() {

  }

}

As you can see I am using the @Input to tell it it has an input called post. Then in my home.html file I am using it like so…
<post-card *ngFor="let post of posts" [post]="post"></post-card>

My home.module.ts file imports the components,

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
      ComponentsModule
  ],
})
export class HomePageModule {}

And finally the components.module.ts file is importing the PostCard stuff…

import { NgModule } from '@angular/core';
import { PostCardComponent } from './post-card/post-card';
import { PostItemComponent } from './post-item/post-item';
import { PostAuthorComponent } from './post-author/post-author';
import { PostMediaComponent } from './post-media/post-media';
import { PostContentComponent } from './post-content/post-content';
@NgModule({
	declarations: [PostCardComponent,
    PostItemComponent,
    PostAuthorComponent,
    PostMediaComponent,
    PostContentComponent],
	imports: [],
	exports: [PostCardComponent,
    PostItemComponent,
    PostAuthorComponent,
    PostMediaComponent,
    PostContentComponent]
})
export class ComponentsModule {}

I don’t see why it is telling me that post-card doesn’t have a property for post, it is right there in the class. Any help would be greatly appreciated. I am more than happy to provide more code if it is needed. Thank you.

2

I don’t see the point of ComponentsModule, and making it go away and just putting all the components into the app module may make things easier for you in the future. That being said, I took an existing scratch component, gave it a module (I had to import BrowserModule in order for it to work because it uses ngIf inside its template), and used your basic code structure and it worked, so I fear that the problem lies outside of what you have posted so far.

3

That is weird. I don’t really have anything else in the project. I have a post provider that handles getting the posts from a firebase database, but that wouldn’t have anything to do with it. I will post up my files that should matter…
The app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import {FCM} from '@ionic-native/fcm';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    HttpModule,
    IonicStorageModule.forRoot({
                                 driverOrder: ['sqlite', 'websql', 'indexeddb', 'asyncstorage']
                               })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Camera,
    MediaCapture,
    File,
    AngularFireDatabase,
    Deeplinks,
    PostsProvider,
    FCM
  ]
})
export class AppModule {}

I’m not using the component anywhere in there since it is being input through the home.module.ts file, then the only other things that are being used is the home.module.ts file…

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
      ComponentsModule
  ],
})
export class HomePageModule {}

The post-card.ts file…

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


@Component({
  selector: 'post-card',
  templateUrl: 'post-card.html'
})
export class PostCardComponent {

  @Input('thisPost') post;

  constructor() {

  }

}

and the components.module.ts file…

import { NgModule } from '@angular/core';
import { PostCardComponent } from './post-card/post-card';
@NgModule({
	declarations: [PostCardComponent],
	imports: [],
	exports: [PostCardComponent]
})
export class ComponentsModule {}
4

Finally found it. I am importing the components in my home.module.ts file, but in the app.module.ts file I am importing HomePage and using it in the declarations and the entry components. So it was never getting the the home.module.ts file to load the custom components, since it was using home directly from the app.module.ts file. Man what a headache that was. Thank you for the help.

1 Like