title: How to hide a parent component when switching to a child component
body: <p>When I start the application, I have the "AppComponent" component displayed. Through it, using <code>AuthGuard</code> I turn or do not go to the module routes: <code>GalleryModule</code>. My problem is that when I go over the child routes <code>GalleryAddComponent</code> or <code>GalleryItemComponent</code> to <code>GalleryComponent</code>, my father <code>GalleryComponent</code> does not hide, and the child component is displayed below. and I need that during the transition on the child <code>GalleryAddComponent</code> and <code>GalleryItemComponent</code> my father would hide <code>GalleryComponent</code>. How to implement it?</p>
  
  <p><strong>Structure of my project:</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/btaVC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/btaVC.png" alt="enter image description here"></a></p>
  
  <p><strong>AppRoutingModule:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const appRoutes: Routes = [
    {
      path: '',
      pathMatch: 'full',
      redirectTo: 'app-root'
    },
  ];
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forRoot(appRoutes)
    ],
    exports: [RouterModule],
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>GalleryRoutingModule:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const galleryRoutes: Routes = [
      {
          path: 'gallery',
          canActivate: [AuthGuard],
          component: GalleryComponent,
          children: [
              {path: 'gallery-add', component: GalleryAddComponent},
              {path: 'galleryItem/:id', component: GalleryItemComponent},
          ]
      },
  ];
  
  @NgModule({
      imports: [
          CommonModule,
          RouterModule.forChild(galleryRoutes)
      ],
      exports: [RouterModule],
      declarations: []
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>template of GalleryComponent:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="header"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-md-12 col-12"&gt;
                  &lt;h1&gt;{{gallery}}&lt;/h1&gt;
                  &lt;div class="create-post"&gt;
                      &lt;a routerLink="gallery-add" class="btn btn-outline-success tog" &gt;
                          Add New Post
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection"&gt;
              &lt;a [routerLink]="['galleryItem', pic.id]"&gt;
                  &lt;img [src]="pic.url" alt="test" class="img-responsive"&gt;
                  &lt;p class="lead"&gt;&lt;span&gt;{{pic.id}}:&lt;/span&gt;{{pic.title}}&lt;/p&gt;
              &lt;/a&gt;
              &lt;div class="card buttons"&gt;
                  &lt;a class="btn btn-danger del" (click)="removePost(pic.id)"&gt;Delete&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12 col-md-12 col-12"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;</code></pre>
  </div>
  </div>
  </p>