update boolean property in grand parent component from grand children component in angular

Question

I have a Grand Parent component in which I have a button, and basis on some code I want to show/hide that button so for that my code is as follow:

grandparent.component.html

 <button
            mat-raised-button
            title="Send RFP to Suppliers"
            (click)="RequestForBid()"
            *ngIf="IsAllSuppliersGetRFP"           
 >

and grandparent.component.ts

 this.IsAllSuppliersGetRFP=!this.SetSendButton();

and method SetSendButton as follow:

     SetSendButton() {
    let all_supplier_request_recived=true;
    this.quoteDTO.lineitems.forEach(x=>{
      x.item_quantity.forEach(y=>{
         y.quote_lineitem_rfp.forEach(z=>{
           z.rfp_suppliers.forEach(a=>{
              if(!a.is_request_for_bid)
               {
                all_supplier_request_recived=a.is_request_for_bid;                
               }
           })
         })
      })
    });
    return all_supplier_request_recived;
  }

now I have another child and in child component I have another grand child component, that component is opening as pop up on parent box. On close of that pop-up I want to set that Grand Parent field IsAllSuppliersGetRFP to true.

I am not sure how i can get that property from grand parent to grand child and set it. I know about input and output but as this is grand children so I dont want to pass between Grand Parent -> Parent -> grand child way.

I read about the services as well to pass the values between multiple components but I am not sure how can I get the this.quoteDTO in service class?

Answer 1

I read about the services as well to pass the values between multiple components

Yes, you can do that with below approach.

In shared service add subject variable

public quoteSubject: Subject<any> = null;

public notifyWithType(type: string, message: any = null) {
   this.quoteSubject.next({ type: type, text: message });
}

while closing the pop up set the value here..

this.sharedService.notifyWithType("all_suppliers_getRFP", 'boolean value' or 'DTO');

Add a method to bind the service subject to receive the value when event is triggered.

ngOnInit() {
  this.sharedService.quoteSubject.subscribe(result => {
      if (result.type === 'all_suppliers_getRFP') {
        this.setAllSuppliers(result.text);
      }
  });
}

setAllSuppliers(value: any) {
   // sent object (DTO or boolean)
   this.quoteDTO = value;
   this.IsAllSuppliersGetRFP = // 'value from DTO' as boolean;
}

You might need to change some things here as I am not able to understand your requirement exactly.

Happy Coding.. :)