CODEWITHSUNDEEP
typescriptangularangular2-routing
user3794166
user3794166

Reputation:

angular2, how to show the same component more than once

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:

  1. 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.

  2. 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!

Upvotes: 0

Views: 641

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658225

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

Upvotes: 1

kemsky
kemsky

Reputation: 15288

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>

Upvotes: 0

Related Questions