angular2, how to show the same component more than once

Question

I have a wizard component with multiple step components, these steps are routed to by the wizard component and the wizard itself is routed to from the root component. As the last step of the wizard, i need to show all the navigated steps at once for reviewing purposes with all the data that's entered while navigating them. How could i achieve this?

what I've tried:

Added @Injectable() to each step component and used Angular2 injection provider, but no matter what I've tried, it always instantiates a new instance and all the data entries are gone.
Passing hard-coded references around. Not only terrible and bad practice, thankfully it didn't work since you can't access prototype properties outside the component domain.

All fresh out of options. Anything is welcomed!

score 1 · Accepted Answer · edited May 23 '17 at 12:17

Maintain your data in a service and bind the view to the service instead of the component class, then each component will show the same data.

@Injectable()
class SharedData {
  name:string;
}

@Component({
  selector: 'wiz-step1',
  template`
<input type="text" [(ngModel)]="sharedData.name">
`})
export class WizStep1 {
  constructor(private sharedData:SharedData) {}
}

@Component({
  selector: 'my-app',
  directives: [WizStep1],
  providers: [SharedData],
  template`
<wiz-step1></wiz-step1>
<wiz-step1></wiz-step1>
`})
export class AppComponent {}

Plunker example

For how to use services with more complex data see also

score 0 · Answer 2 · answered Apr 22 '16 at 00:37

I would make components model-driven (data-driven) and reuse implementation.

Lets say you have 2 steps and 1 input in each step, so you create model:

private steps = [
     {
       description: 'step 1',
       value: '0'
     },
     {
       description: 'step 2',
       value: '1'
     }
]

Show each step:

component.model = this.steps[currentStep];

<component [model]="steps[currentStep]"></component>

<input [(ngModel)]="model.value">

Show all steps:

<component [model]="steps[1]"></component>

angular2, how to show the same component more than once

2 Answers2