angular - Display the context only on the home page; if navigate to other component then the message must be gone

Question

Say I have a bunch components. Home, One, Two and Three. I use nav and routing to every page. I want to display a message "Hello" only on Home page. Then in other pages the message must be gone.

Stackblize

The main structure of app.component.html is

<h1>Angular Router</h1>
     <nav>
          <a routerLink="/crisis-center" routerLinkActive="active">Home</a>
          <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
          <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
    </nav>
<router-outlet></router-outlet>
<!--router-outlet name="popup"></router-outlet-->
<div style='font-size: 50px'>{{title}}</div>

You see every page displays "Hello". I don't want it.

question from:https://stackoverflow.com/questions/65940133/display-the-context-only-on-the-home-page-if-navigate-to-other-component-then-t

Answer 1

The "Hello" text is coming on every page because you put it after router-outlet tag.

So all the components are being loaded in <router-outlet></router-outlet> & then "Hello" text is shown after each component.

If you want this text should only on the Home component put this in the respective component template file.

app.component.html

<h1>Angular Router</h1>
     <nav>
          <a routerLink="/crisis-center" routerLinkActive="active">Home</a>
          <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
          <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
    </nav>
<router-outlet></router-outlet>

crisis-center-home.component.html

<p>Welcome to the Crisis Center</p>
<div style='font-size: 50px'>{{title}}</div>

crisis-center.component.ts

export class CrisisCenterComponent {
  title = 'Hello';
}