Subscribe the values of forRoot service in component for page wise alert messages

Question

My requirement is to show the alert message on page for error and success. I am following the stackblitz demo https://stackblitz.com/edit/angular-9-alerts-mdhjed?file=app%2Fapp.component.html and found it working to show the alert messages for same page but it not sufficient. I have created forRoot module for sharing same service via all component as well.

On given example

<app-alert></app-alert>

Is only declared to app.component.ts file and alert coming to specific position only but I want it to my screen on different different place page wise.

i.e

login screen - Above the title
dashboard - below the form , etc...

So I place in every component based on design and working for all alert message that emitting from same component but not working any came from another component.

Like save message alert and redirect to another page and showing there the alert messsage needs data to transfer from one screen to another like below.

sign-in .html

sign-in component.ts

constructor(  
private router: Router,
private alertService: AlertService
) {
 const alerts = this.router.getCurrentNavigation()?.extras.state;
    console.log(alerts);

    if (alerts && alerts['message']) {
      alertService.createNewBasedOncode(alerts['message']);
    }
}

Forget password HTML

<app-alert></app-alert>

Forget password component

 data: NavigationExtras = {
    state: {
      message: this.alertMessage,
    },
  };


 this.alertMessage = {
            message: res.message,
            config: {
              keepAfterRouteChange: true,
            },
            type: AlertType.Success,
          };

   this.router.navigate(['/'], this.data);

This way only alerts on another screen is working but this seems unnecessary code to each component in constructor.

I am wondering for best solution.