Page Specific Components Angular 7

0
votes

I have a project structure Similar to this 

--Home 
   -- About

In home page I have a Header bar and a image in body like this code

home.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <li class="nav-item">
                <a class="nav-link"  routerLink="/about">About</a>
        </li>
  </nav>
              <router-outlet></router-outlet>

<div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Welcome to my site </p>
        </div>
      </div>

When I click on about button, the page loads fine with data of Navigation bar + About Component Data due to router-outlet component, but along with that Jumbotron displaying "welcome message". How to avoid that welcome message in about page ?

P.S: I can use *ngIF="somevalue" and assign that value in home page and not in other pages. But is there any other efficient way to achieve the same.

1
angular

1 Answers

1
votes

You can just move router-outlet and nav bar to the top-level app.component, leaving jumbotron in home.component.