How to interpolate two different strings into the same template conditionally?

I am new to Angular and I can't find a solution for the following scenario: I have the following navigation, where register as a family and register as a sitter links to the same component template, e.g register.

My question is that how can I dynamically customise the register template for instance with interpolation so that when I am at register as a family it displays a title suchregister as a family and vice versa.

Or am I using the wrong approach ?

This is navbar.component.html :

<mat-toolbar>
  <div class="navigation">
    <button mat-button [matMenuTriggerFor]="menuSitter">For sitters
    </button>
    <mat-menu class="example-menu" #menuSitter="matMenu">
      <button mat-menu-item routerLink="find-family" routerLinkActive="active">
        <span>Find a familiy</span>
      </button>
      <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register" routerLinkActive="active">
        <span>Register as a sitter</span>
      </button>
    </mat-menu>
    <button mat-button [matMenuTriggerFor]="menuFamily">For host families
    </button>
    <mat-menu class="example-menu" #menuFamily="matMenu">
      <button mat-menu-item routerLink="find-sitter" routerLinkActive="active">
        <span>Find a sitter</span>
      </button>
      <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register" routerLinkActive="active">
        <!--(click)="showSignupForm()"-->
        <span>Register as a family</span>
      </button>
    </mat-menu>
</mat-toolbar>

This is register.component.html:

 <h2 class="mat-title" style="text-align:center;">Register as a {{person}}</h2>
<form class="example-form" [formGroup]="registerForm" (submit)="onSubmit(registerForm)" novalidate>
 /* code */
</form>

Shortly how can I conditionally change the value of {{person}} in register.componet.ts ?

Solution

Modify your routing to include a parameter indicating the type of registration

//routing.ts
//Add this route
{path: '/register/:registrationType', component: RegistrationComponent }

Inject the route in your component and initialise person variable based on the registration type

import {ActivatedRoute, Params} from '@angular/router';

constructor(private route: ActivatedRoute){}

person: string;
  ngOnInit()
  {
    this.route.params.forEach((params: Params) => {
      let registrationType = params['registrationType'];
      this.person = registrationType == 'person' : 'Person' : 'Family'
    });

Modify your router links

 <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register/person" routerLinkActive="active">
    <span>Register as a sitter</span>
  </button>


  <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register/family" routerLinkActive="active">
    <!--(click)="showSignupForm()"-->
    <span>Register as a family</span>
  </button>