using rxjs subject to show and hide component in Angular 7

Question

I had 3 components inquiry-form, inquiry-response and inquiry-summary and for some conditions, this components can be hide and show, Im using rxjs subject to send data between component, this is the scenario:

inquiry-form

has 2 div
user enter id number (redirect to inquiry response 1) and it will hide 2 div on inquiry form

inquiry-response

has 2-div
change ID button redirect to Inquiry Form 1
checked checkbox and submit button redirect to Inquiry Summary 2

here I created stackblitz and this is what I had tried:

inquiry-store.service.ts

  private hideContainer = new Subject<boolean>();
  public hideContainer$ = this.hideContainer.asObservable
  ();

  private summary = new Subject<boolean>();
  public summary$ = this.summary.asObservable
  ();

  private checkbox = new Subject<boolean>();
  public checkbox$ = this.checkbox.asObservable
  ();

  setHideContainer(data: boolean) {
  this.hideContainer.next(data);
  }

 setSummary(data: boolean) {
  this.summary.next(data);
  }

setCheckbox(data: boolean) {
  this.checkbox.next(data);
  }
}

and in each component will subscribe this based on conditon,

inquiry-form.component.ts

      ngOnInit() {
            this.inquiryStore.hideContainer$.subscribe(istrue => {
          this.isHasSummon = istrue;
        });
      }

      onSubmit(): void {
        this.inquiryService.getData(data).subscribe((res: any)=> {
          this.inquiryStore.setSummon(res);
          this.isHasSummon = true;

        })
      }

inquiry-response.component.ts

  ngOnInit() {

    this.inquiryStore.hideContainer$.subscribe(isTrue => {
      this.showChangeId = isTrue;
    });

    this.inquiryStore.checkbox$.subscribe(isTrue => {
          this.hideCheckbox = isTrue;
    })
  }

  submitSelectedCheckbox() {
    this.inquiryStore.setSummary(false)
    this.hideCheckbox = true;
 }

   goToInquiryForm() {
    this.inquiryStore.setHideContainer(false);
    this.isShowResponse = false;
  }
}

I got few problems, where in inquiry response 1, after I click change ID it will redirect to inquiry Form 1, after I click submit button, it will not go to inquiry response 1 again,and if there any better way to do this ?

You can use rxjs subject to manage state of the divs as well as pass data between components. Using those states you can show or hide your divs — Buddhika Chathuranga, Sep 13 '19 at 07:12

score 1 · Answer 1 · answered Sep 13 '19 at 08:19

inquiry-store.service.ts

public formState = new Subject<boolean>();
public responseState = new Subject<boolean>();

inquiry-form.component.ts

isHasSummon = false;

ngOnInit() {
    this.inqueryStore.formState.subscribe(res => {this.isHasSummon = res});
}

onSubmit() {
    this.isHasSummon = true;
    this.inqueryStore.responseState.next(true);
}

inquiry-response.component.ts

isShowResponse = false;

ngOnInit() {
    this.inqueryStore.responseState.subscribe(res => {this.isShowResponse = res});
}

goToInquiryForm() {
    this.isShowResponse = false;
    this.inqueryStore.formState.next(true);
}

Try this out. You can use same pattern in order to show and hide your summary section

I create two new public Subjects for that. But it's not compulsory. You have used nice way to en-capsule the subject. You can use that way and i did this just for simplicity. Hope this will work.

using rxjs subject to show and hide component in Angular 7

1 Answers1