I'm trying to access parent component from child component using dependence injection. It works, I can access to parent to using its methods and properties but I have not seen this approach on Angular doc. So do you have any idea about this approach? Should I use it?
Because the parent component using ng-content (like transclude angularjs) so I cannot using EventEmitter @Output approach.
The bellow is my code:
wizard.component.ts (parent)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'wizard',
template: `
<div>
<ng-content></ng-content>
<button>Back</button>
<button>Next</button>
</div>
`
})
export class WizardComponent implements OnInit {
steps = [];
constructor() { }
addStep(step) {
this.steps.push(step);
}
ngOnInit() { }
}
step.component.ts (child)
import { WizardComponent } from './wizard.component';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'step',
template: `
<div>Step <ng-content></ng-content></div>
`
})
export class StepComponent implements OnInit {
constructor(private parent: WizardComponent) {
this.parent.addStep(this);
}
ngOnInit() { }
}
app.component.html (main app)
<wizard>
<step>1</step>
<step>2</step>
<step>3</step>
</wizard>
Looking forward to hearing your opinions. Thanks!
Parent Component-> Wizard Component
@Component({
selector: 'wizard',
template: `
<div>
<steps [steps]="steps"> </steps>
<button> Back </button>
<button> Next </button>
<button (click)="addStep()"> Add a step </button>
</div>
`,
})
export class WizardComponent {
steps:any[]=new Array();
constructor() {
this.steps.push({id:1,name:'abc'});
this.steps.push({id:2,name:'abc'});
this.steps.push({id:3,name:'abc'});
}
addStep(){
let count = parseInt(this.steps.count) + 1;
this.steps.push({id:count,name:'abc'});
}
}
StepComponent -> Child component
@Component({
selector: 'steps',
template: `
<div>
<span *ngFor="let step of steps">
<label> {{step.id}} </label>
<div> {{step.name}} </div>
</span>
</div>
`,
})
export class StepsComponent {
@Input() steps:any[]=new Array();
constructor() {
}
}
Update 1: Different elements will be present in each steps, so I suggest you to use the <ng-content>
as below
<div>
<ng-content select=".step-body"> </ng-content>
</div>
Your wizard will look like
<table>
<tr>
<td>
<steps>
<div class="step-body">
hi hello
</div>
</steps>
</td>
<td>
<steps>
<div class="step-body">
something else
</div>
</steps>
</td>
</tr>
</table>