0
Hello! I have a parent component the Connectorwizardmodalcomponent and a child component Connectorwizardcomponent. The child component extends from Cdkstepper, and in the parent component I have an array of Steps objects, which has all the information I want displayed by the child component, but I can’t get them to communicate. I’ll post the code to get a better understanding. Connectorwizardmodalcomponent.ts
@Component({
selector: 'app-connector-wizard-modal',
templateUrl: './connector-wizard-modal.component.html',
styleUrls: ['./connector-wizard-modal.component.scss']
})
export class ConnectorWizardModalComponent implements OnInit, AfterViewInit {
@ViewChild(ConnectorWizardComponent) connectorwizardComponent: ConnectorWizardComponent;
@ViewChildren('linkRefs') linkRefs: QueryList<CdkStep>;
contentReady = false;
stepsRefs = [];
selectedIndex;
isEditable = false;
steps: ConnectorStepModel[];
currentComponent: number;
@Output() closeModalEvent = new EventEmitter();
constructor() {}
ngOnInit() {
this.steps = [
{
name: 'Select Engine',
component: SelectEngineComponent,
// stepControl: 'pending',
descripition: 'select engine',
icon: 'fa-share-alt',
completed: false,
data: new Step01Model(),
outputs: {
onNextStepEvent: data => this.onNextStep(data)
}
},
{
name: 'Connector Configuration',
component: ConnectorConfigIdentificationComponent,
// stepControl: 'pending',
descripition: 'select engine',
icon: 'fa-share-alt',
completed: false,
data: new Step01Model(),
outputs: {
onPreviousStepEvent: data => this.onPreviousStep(data),
onNextStepEvent: data => this.onNextStep(data)
}
},
{
name: 'Connector Configuration',
component: ConnectorConfigCommunicationComponent,
// stepControl: 'pending',
descripition: 'select engine',
icon: 'fa-share-alt',
completed: false,
data: new Step01Model(),
outputs: {
onPreviousStepEvent: data => this.onPreviousStep(data),
onNextStepEvent: data => this.onNextStep(data),
}
},
];
// this.currentComponent = this.steps[1];
this.contentReady = true;
// console.log('os filhos', this.linkRefs);
}
ngAfterViewInit() {
// this.openModal();
// console.log('os filhoszzzz', this.linkRefs.toArray());
// this.stepsRefs = this.linkRefs.toArray();
}
onCancel() {
// redirect!
}
onPreviousStep(data) {
this.connectorwizardComponent.previousStep();
}
onNextStep(data) {
this.connectorwizardComponent.setComplete(data.isComplete);
this.connectorwizardComponent.nextStep();
}
onSubmit() {
// DO final work!!
}
}
Connectorwizard.ts
@Component({
selector: 'app-connector-wizard',
templateUrl: './connector-wizard.component.html',
styleUrls: ['./connector-wizard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: CdkStepper, useExisting: ConnectorWizardComponent }]
})
export class ConnectorWizardComponent extends CdkStepper implements OnInit, AfterViewInit {
constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef) {
super(dir, changeDetectorRef);
}
ngOnInit() { }
ngAfterViewInit() {
super.ngAfterViewInit();
}
stepState(stepIndex: number) {
const step = this.steps.toArray()[stepIndex];
if (stepIndex === this.selectedIndex) { return 'selected'; }
if (step.completed) { return 'completed'; }
if (step.interacted) { return 'warning'; }
return 'pending';
}
nextStep(): void {
if (this.selectedIndex < this.steps.length - 1) {
this.selectedIndex++;
}
}
previousStep(): void {
if (this.selectedIndex > 0) {
this.selectedIndex--;
}
}
gotoStep(index: number): void {
this.selectedIndex = index;
}
setComplete(b: boolean): void {
this.selected.completed = b;
}
}
Connectorwizard.html
<div content class="body bg-light w-100 h-100">
<div class="row h-100">
<div class="col-3 bg-white col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-3">
<div leftbar class="h-100 bg-white">
<div class="m-wizard__head text-center h-75 p-0">
<div class="d-flex justify-content-center w-100 p-5">
<div class="step stepper-horizontal" *ngFor="let step of _steps; let i = index;" [ngClass]="stepState(i)" (click)="gotoStep(i)">
<div [ngClass]=" {'step-active border-primary rounded-circle': i === selectedIndex}"> {{i + 1}}</div> <!-- rever esta condição (e trocar o selectedIndex pelo "step.selected") -->
</div>
</div>
<div class="step-info w-75 h-50 m-auto pt-5">
<i class="fa {{ steps.icon}} fa-8x text-secondary"></i>
<h2 class="pt-4">{{ steps.label | translate}}</h2>
<span class="pt-4">{{ steps.description | translate}}</span>
</div>
</div>
</div>
</div>
<div class="col-9 pr-0 py-5 col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-9">
<div rightbar class="right-bar-content">
<ng-container [ngTemplateOutlet]="selected.content"></ng-container>
</div>
<ng-template [ngTemplateOutlet]="footerActions"></ng-template>
</div>
</div>
</div>
<ng-template #footerActions>
<div class="actions" [ngClass]=" {'first-step-actions': selectedIndex === 0, 'forms-actions': selectedIndex > 0}">
<a *ngIf="selectedIndex === 0; else elseBlock" class="btn btn-secondary m-btn--icon" (click)="cancelProcess()"> <!-- trocar o 0 por "primeiroStep" (e trocar o selectedIndex pelo "step.selected") -->
<span>
<i class="fa fa-times wizard-btns-icon"></i>
<span class="wizard-btns-text">
{{ 'actions.cancel' | translate}}
</span>
</span>
</a>
<ng-template #elseBlock>
<a *ngIf="selectedIndex !== 0" class="btn btn-secondary m-btn--icon ml-3" (click)="onPreviousStep()"> <!-- trocar o 0 por "primeiroStep" (e trocar o selectedIndex pelo "step.selected") -->
<span>
<i class="fa fa-arrow-left wizard-btns-icon"></i>
<span class="wizard-btns-text">
{{ 'actions.previous' | translate}}
</span>
</span>
</a>
<button *ngIf="selectedIndex === 3" class="btn btn-primary m-btn--icon ml-3" (click)="finishProcess()"> <!-- trocar o 3 por "ultimoStep" (e trocar o selectedIndex pelo "step.selected") -->
<span>
<i class="fa fa-check wizard-btns-icon"></i>
<span class="wizard-btns-text">
{{ 'labels.finish' | translate}}
</span>
</span>
</button>
<button *ngIf="selectedIndex < 3" class="btn btn-primary m-btn--icon ml-3" (click)="onNextStep()"> <!-- trocar o 3 por "ultimoStep" (e trocar o selectedIndex pelo "step.selected") -->
<span>
<i class="fa fa-arrow-right wizard-btns-icon"></i>
<span class="wizard-btns-text">
{{ 'actions.next' | translate}}
</span>
</span>
</button>
</ng-template>
</div>
</ng-template>
Connectorwizardmodal.html
<app-fullscreen-modal [onCloseAction]="closeModalAction">
<div content class="body w-100 h-100">
<app-connector-wizard linear>
<cdk-step #linkRefs *ngFor="let step of steps; let stepIndex = index" [label]="step.name" [completed]="step.completed">
<ng-container
[ngComponentOutlet]="step.component"
[ndcDynamicInputs]="{data: step.data}"
[ndcDynamicOutputs]="step.outputs">
</ng-container>
</cdk-step>
</app-connector-wizard>
</div>
</app-fullscreen-modal>
Since there’s no communication between them I can’t find the properties I need
<div class="step-info w-75 h-50 m-auto pt-5">
<i class="fa {{ steps.icon}} fa-8x text-secondary"></i>
<h2 class="pt-4">{{ steps.label | translate}}</h2>
<span class="pt-4">{{ steps.description | translate}}</span>
</div>
How can I do that?
Got a little confused your question, you want to spend a object array parent component for child component?
– LeAndrade
Yes that is the intention
– Rafaela Castro
But this is simple and basic Angular, using the directive @Input() you can pass data from parent component to children.
– LeAndrade
Leandrade, it’s not that simple... The Komponent child extends Cdkstepper, which already has a step that only knows the label property. And in my parent component I have a step which is an array of objects that has other properties, which I need to access in the child component.
– Rafaela Castro
Vc wants to iterate in the array that comes from the parent component in which html element in the child?
– LeAndrade
``` <div class="step-info w-75 h-50 m-auto pt-5"> <i class="fa {{ Steps.icon}} fa-8x text-Secondary"></i> <H2 class="pt-4">{{ Steps.label | Translate}}</H2> <span class="pt-4">{{ Steps.Description | Translate}}</span> </div> ` ``
– Rafaela Castro