Page Specific Components Angular 7

Question

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.

JMP · Accepted Answer · 2020-02-08 07:38:17Z

1

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

edited Feb 8, 2020 at 7:38

answered Feb 8, 2020 at 7:31

JMP

1,9542 gold badges10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

newAngs Over a year ago

Thank you, But i moved that jumbotron to new component. marking as accepted, as yours will also work :)

newAngs Over a year ago

I updated router components and redirected the home page to that component

{path: '', component: HomeComponent,   children:[     { path: '', redirectTo : 'welcome', pathMatch: 'full' },     { path: 'welcome', component: WelcomeComponent}

Collectives™ on Stack Overflow

Page Specific Components Angular 7

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related