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>

CodePudding user response：

To rephrase your question. What you actually want is when you click save, which triggers the save function in form1, you need away to update the isCheck in form2.

---

The reason why your code failed to update the isCheck property in form2 is that you do it in the constructor and ngOnInit.

These two only got called once. The constructor got called first, then the ngOnInit.

---

To solve that, you need the mat-stepper to broadcast the selection change using the selectionChange output.

I haven't tested this, but this should solve your problem.

app.component.html

<mat-stepper (selectionChange)="notifyForm2($event)">

  <mat-step [stepControl]="form1">
    <app-form1></app-form1>
  </mat-step>

  <mat-step [stepControl]="form2">
     <app-form2></app-form2>
  </mat-step>

</mat-stepper>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  @viewChild(form2Component) // access the form2Component here.
  public form2: !form2Component;
  
  public notifyForm2(event: StepperSelectionEvent) {
    
    const savedValue = localStorage.getItem('SAVED-VALUE');

    if(savedValue !== null)
      this.form2.isClick = true;
    else
      this.form2.isClick = false;
  }
}

form2.component.ts

@Component({
  selector: 'app.form2',
  templateUrl: './form2.component.html'
})
export class Form2Component {
  
  public isClick = false;
}

CodePudding user response：

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