Conditional <router-outlet>


I have a router outlet on the parent page, which shows “Hello World!”

<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<body style="height: auto; min-height: 100%;"  class="skin-blue sidebar-mini">
        <div id="wrapper">
        <div class="content-wrapper" style="min-height:92vh">
            <section id="MainContent" >
            <div class="content container-fluid body-content" style="background-image: url('./assets/Images/bg.jpg'); min-height: 615px;">

                  Hello World! 

            <footer class="main-footer navbar-fixed-bottom">
                    <div class="col-sm-12 text-center pull-left">

                        <small > Version 1.0</small>

I want “Hello World!” Text to appear only parent page and NOT on any child pages. But the rest of the menu items and footer remain same all child pages.


 { path:'parentPage',component:MasterComponent, canActivate:[AuthGuard],
        { path:'ChildPage1',component:ChildPage1Component},
        { path:'ChildPage2',component:ChildPage2Component},

Is it possible to make a conditional statement to show “Hello world!” in parent page and not in all child pages?


Remove that Hello World from inside the router outlet, and simply add a new child route, with an empty path, and a component displaying hello world:

  path: 'parentPage', 
  component: MasterComponent, 
  children: [
    { path: '', component: SomeComponentDisplayingHelloWorld },
    { path: 'ChildPage1', component:ChildPage1Component },
    { path: 'ChildPage2', component:ChildPage2Component },

Answered By – JB Nizet

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.