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

Question

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>

Answer 1

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 '@'
}