Angular - Calling grandparent component method from grandchild component

Grandparent component:

export class DepartmentComponent {
department: Department = {} as Department;
public sendBlockToBlockchain(message: string) {
//This is the method to be called by the grandchild!
}
}

.

  <mat-card *ngIf=”department”>
<h1>{{ department.name }}</h1>   
<app-department-message [department]=“department”></app-department-message>
</mat-card>

the component between them:

export interface MessageComponent {
sendMessage(message: string): void;
}
export class DepartmentMessageComponent {
@Input() department: Department = {} as Department;
}

.

<ng-container *ngIf="department" [ngSwitch]="department.id">
<app-client-message *ngSwitchCase="1"></app-client-message>
<app-buyer-message *ngSwitchCase="2"></app-buyer-message>
<app-financier-message *ngSwitchCase="3"></app-financier-message>
<app-shipper-message *ngSwitchCase="4"></app-shipper-message>
<app-producer-message *ngSwitchCase="5"></app-producer-message>
<app-spectator-message *ngSwitchDefault></app-spectator-message>
</ng-container>

Grandchild component: [There are 5 departments, I'll use buyer in this example]

import {MessageComponent} from "../department-message/department-message.component";
export class BuyerMessageComponent implements MessageComponent {
sendMessage(message: string) {
//I want this to call sendBlockToBlockchain! <-----
}
}

.

<textarea rows="3" cols="40" #message></textarea>
<button (click)="sendMessage(message.value)">Send Message</button>

How do I do this? And is there a better way to do what I am doing? Thanks!

Going Down the Road You Are On

It is best practice to, instead of calling the function directly in the grandchild, to use @Output events to send a message to the higher components. The idea is that the child components should not be able to impact their parent's state. This causes lots of difficult to diagnose bugs.

child component TS

export class BuyerMessageComponent implements MessageComponent {
@Output messageChange = new EventEmitter<string>(); // name this to whatever makes sense
sendMessage(message: string) {
messageChange.emit(message);
}
...
}

The parent component then can listen for the output and re-emit it just like the child did from the button.

parent component HTML

<ng-container *ngIf="department" [ngSwitch]="department.id">
<app-client-message *ngSwitchCase="1"></app-client-message>
<app-buyer-message *ngSwitchCase="2" (messageChange)="forwardMessage($event)"></app-buyer-message> // notice the output event
<app-financier-message *ngSwitchCase="3"></app-financier-message>
<app-shipper-message *ngSwitchCase="4"></app-shipper-message>
<app-producer-message *ngSwitchCase="5"></app-producer-message>
<app-spectator-message *ngSwitchDefault></app-spectator-message>
</ng-container>

Continue this pattern until you reach the level the data needs to flow up to.

A Better Approach: Services

Obviously this can get pretty tedious to send a message up from a great-grandchild to its great-grandparent, since every layer between needs to have output bindings to forward the data along, and in your case it gets even worse with the multiple different grandchildren which I assume you also want to send messages from.

Another approach would be to move the sendBlockToBlockchain to some sort of shared service that can be injected into the child components. I don't know how much refactoring you would need to do, but this is the approach I would take.

revised child component TS

export class BuyerMessageComponent implements MessageComponent {
constructor(private blockchainService: BlockchainService) {}  // Inject the newly created blockchain service into the child component
sendMessage(message: string) {
this.blockchainService.sendBlockToBlockchain(message);
}
...
}

You will need to move the sendBlockToBlockchain code into the new service and add add the service to your module's providers so it gets injected.

It is good practice to have services be responsible for "owning" data, and having components "ask" them for the current data. This allows the components to be in charge of presenting the data, and the services in charge of managing data. This lets you update data from multiple places without multiple copies floating around, assuming you configure your module correctly.

This approach will likely require you to move a lot of the state management of the blockchain out of the grandparent component, and into the service, but that is probably better for maintenance anyway. The DepartmentComponent will likely also need the blockchain service injected into it so it can get the state from the service.