show and hide between 2 different component Angular

Question

I have Parent component with 2 different child, inquiryForm and inquiryResponse, I got situation when I need to hide and show this 2 component based on condition:

If user had click submit on inquiryForm, it will hide inquiryForm component and show inquiryResponse component
On inquiryResponse component, there are button display inquiry form, where user clicked it and will hide inquiryResponse component and show inquiryForm.I cant solved this.
I know it can be solved using router but I want different solution like using service or subject

this is demo I created using stackblitz, this is what I had tried;

inquiry-response.ts

  getReceivedSummons() {
    this.inquiryStore.summons$.subscribe(result => {
      this.receivedSummon = result;
      this.addCheckboxes();
      this.isShowResponse = true;
    });
  }

    showInquiryForm() {
    // do something
    }

inquiry-response.html

<div *ngIf="isShowResponse">
  <p>Inquiry Response</p>
  <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
  <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
    <ng-container [formGroup]="summon">
      <ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
        <ng-container [formGroup]="item">
          <input type="checkbox" formControlName="isChecked"> {{item.value.name}}
        </ng-container>
      </ng-container>
    </ng-container>
    <div *ngIf="!summon.valid">At least one order must be selected</div>
  </ng-container>
  <br>
  <span class="button">
  <button [disabled]="!form.valid">submit</button>
  </span>
  <button (click)="showInquiryForm()"> ( change ID number ) display inquiry form</button>
</form>
</div>

use ngif on the parent, use `@Output()` to communicate from child to parent when component should be hidden: https://angular.io/guide/component-interaction — AT82, Sep 08 '19 at 18:11

score 0 · Answer 1 · answered Sep 08 '19 at 22:27

As AJT_82 say, you app.component can be like

<app-inquiry-form *ngIf="step==1" (submit)="step=2"></app-inquiry-form>
<br>
<app-inquiry-response *ngIf="step==2" (click)="step=1"></app-inquiry-response>

//you has a variable
step:number=1;

And in each component

  @Output() submit=new EventEmitter<any>()
  ..in somewhere...
  this.submit.emit()

  @Output() click=new EventEmitter<any>()
  ..in somewhere...
  this.click.emit()

show and hide between 2 different component Angular

1 Answers1