CODEWITHSUNDEEP
angular
Mr. A
Mr. A

Reputation: 111

Can't bind to property since it isn't a known property of a component

I have two folders inside app:

app/
├─ shared/
├─ main/
...

Each comprising their own module file.

I have imported shared module inside main module so that Shared components can be used in Main:

enter image description here

I have a snack-bar component inside Shared:

enter image description here

enter image description here

What I am trying to do is to take inputs from one of the Main folder components:

enter image description here

But then I get an error:

enter image description here

I am not sure where am I making mistake.

Thanks.

Upvotes: 2

Views: 991

Answers (3)

Mr. A
Mr. A

Reputation: 111

Got the answer! Inside Shared Module file, I forgot to put SnackBarComponent inside exports array:

enter image description here

Thanks for the answers.

Upvotes: 1

zmag
zmag

Reputation: 8241

SnackBar component should be declared and exported in Shared module.

@NgModule({
  // ...
  declarations: [ SnackBarComponent ],
  exports:      [ SnackBarComponent ],
  // ...
})
export class SharedModule { }

Shared module should be imported in Main module. (In Angular way)

@NgModule({
  // ...
  imports:      [ SharedModule ],
  // ...
})
export class MainModule { }

Upvotes: 2

Andy Lamb
Andy Lamb

Reputation: 2221

You need to add the shared module into the main module imports list. it's not enough to just reference it as an import at the top of the file. See the Angular docs: https://angular.io/guide/sharing-ngmodules

Upvotes: 1

Related Questions