Issue
I'm having a problem accessing a method from another child component. I need this method to do a validation on a form. When I start the registration all the constructors are called but when I save a record and I try to recover this value saved in localStorage I can't. How should I solve the problem to be able to access the ngOnInit method or another method that can retrieve the values saved in localStorage
Component.html
<mat-horizontal-stepper #stepper [linear]="true">
<mat-step [stepControl]="form" [optional]="isOptional">
<ng-template matStepLabel>Form One</ng-template>
<app-form
[stepper]="stepper">
</app-form>
</mat-step>
<mat-step [stepControl]="formT" [optional]="isOptional">
<ng-template matStepLabel>Arma</ng-template>
<app-formT
[stepper]="stepper">
</app-formT>
</mat-step>
</mat-horizontal-stepper>
Component
export class FirstComponent implements OnInit {
isOptional: boolean;
ngOnInit() {
this.isOptional = false;
}
stepChanged(stepper){
stepper.selected.interacted = false;
}
}
Form1.component
export class Form1Component implements OnInit {
@Input() stepper: any;
private save(stepper: any) {
this.dadosArmaService.save(frm).subscribe(() => {
localStorage.setItem("objext", JSON.stringify(object));
stepper.next();
}, (e) => {
console.log(e);
});
}
Form2.Component
export class Form2Component implements OnInit {
@Input() stepper: any;
ngAfterViewInit() {
this.stepper._getIndicatorType = () => 'number';
}
constructor(
private formBuilder: FormBuilder,
) {
const objectSave = localStorage.getItem('obj);
if(armaSalva !== null) {
this.isCheck = true; //Value form
} else {
this.isCheck = false;
}
}
ngOnInit() {
if(armaSalva !== null) {
this.isCheck = true;
} else {
this.isCheck = false;
}
}
}
html
<div fxLayout="row">
<div fxFlex="50%" *ngIf="!isCheck">
<mat-checkbox formControlName="check">
<strong>NOT</strong> <mat-label>Change </mat-label>
</mat-checkbox>
</div>
</div>
Solution
You can use the hashTag (#) to export component Reference and using @Input to get the Reference in Other Component Like in Example:
<app-form [stepper]="stepper" #form1></app-form>
<app-formT [stepper]="stepper" [form1Ref]="form1"></app-formT>
I have commented the changes with //--------------
export class Form1Component implements OnInit {
@Input() stepper: any;
@Input() form1Ref: any; //--------------
callMethodFromForm1() { //--------------
this.form1.ngOnInit();
}
private save(stepper: any) {
this.dadosArmaService.save(frm).subscribe(() => {
localStorage.setItem("objext", JSON.stringify(object));
stepper.next();
}, (e) => {
console.log(e);
});
}
Check this example: How to call child components's method from the parent component in Angular 6
Answered By - ferhado
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.