How to handle multiple compositions for the same component ?

[ccreusat]

Hi !

• First, I'm struggling to create multiple compositions for the same component with Angular.

• Then, I can't figure how to pass my Input/Ouput with compositions:

-> passing [name]="test" is crashing

Property 'test' does not exist on type  'DropdownCompositionComponent'.

The composition file:

import { Component, NgModule } from '@angular/core';
import { DropdownModule } from './dropdown.module';

@Component({
  selector: 'dropdown-composition-cmp',
  template: `<ode-dropdown [name]="test"></ode-dropdown>`
})
class DropdownCompositionComponent {}

@NgModule({
  declarations: [DropdownCompositionComponent],
  imports: [DropdownModule],
  bootstrap: [DropdownCompositionComponent]
})
export class DropdownCompositionModule {}

Thanks

[ocombe]

It makes sense, you need the test property on your composition component (just like the error message is explaining), something like:

@Component({
  selector: 'dropdown-composition-cmp',
  template: `<ode-dropdown [name]="test"></ode-dropdown>`
})
class DropdownCompositionComponent {
  public test = "some name";
}

And if you want to make multiple compositions, just create multiple compositions files

[ccreusat]

It makes sense, indeed :-)

Thank you @ocombe