CODEWITHSUNDEEP
angulartypescript
amlyhamm
amlyhamm

Reputation: 1150

Angular 7 Can't bind to <property> since it isn't a known property of <component> (from imported module)

I have a module that is importing another module to use a component declared within it. In the example below, ModuleAComponentC is trying to use ModuleBComponentA. It would seem that ModuleA would need to import ModuleB in order to use it and therefore, ModuleB would need to export ModuleBComponentA. Seems straightforward enough, but the following is not working for me.

I get the Can't bind to 'name' since it isn't a known property of 'module-b-component-a'

src/a/moduleA.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"

import { ModuleAComponentC } from './c.component'
import { ModuleAComponentD } from './d.component'

import { ModuleB } from './../b/b.module'

@NgModule({
  imports: [
    BrowserModule,
    CommonModule, 
    ModuleB
  ],
  declarations: [
    ModuleAComponentC,
    ModuleAComponentD
  ]
})
export class ModuleA {}

src/b/moduleB.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"

import { ModuleBComponentA } from './a.component'
import { ModuleBServiceA } from './a.service'

@NgModule({
  imports: [
    BrowserModule,
    CommonModule
  ],
  declarations: [
    ModuleBComponentA
  ],
  providers: [
    ModuleBServiceA
  ],
  exports: [
    ModuleBComponentA
  ]
})
export class ModuleB {}

src/b/a.component.ts

@Component({
  selector: 'module-b-component-a'
})
export class ModuleBComponentA {

  @Input('@') name: string

}

src/a/c.component.html

<module-b-component-a name="{{ test }}"></module-b-component-a>

Upvotes: 5

Views: 18540

Answers (1)

Anand Undavia
Anand Undavia

Reputation: 3543

The thing you missed was to specify name in @Input():

@Component({
  selector: 'module-b-component-a'
})
export class ModuleBComponentA {
  @Input('name') name: string; // <-- 'name' in place of '@'
}

Upvotes: 12

Related Questions