on Router load, can I conditionally remove the parent

Question

Here is my component.html file,

<content-placeholder></content-placeholder>
<router-outlet></router-outlet>

my request is, Is there any way to remove or hide the <content-placeholder></content-placeholder> when the <router-outlet></router-outlet> active? I am loading the children with router-outlet, but i need the full page to used.

here is my router.ts file:

{
  path: 'cpServices', //needs this parent
  component: CpServiceComponent,
  children: [
    {
      path: '',
      redirectTo: 'contentPlaceHolder',
      pathMatch: 'full'
    },
    {
      path: 'contentPlaceHolder',
      component: ShellContentPlaceholderComponent,
      children: [
        {
          path: 'view',
          component: ShellViewContentPlaceholderComponent
        },
        {
          path: 'create',
          component: ShellCreateContentPlaceholderComponent
        },

      ]
    }

Answer 1

In app.component.ts file, you can do some thing like this,

import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
  hideComponent: boolean = false;
  
  constructor(private router: Router) {
    router.events.forEach((event: NavigationEvent) => {
      if (event instanceof NavigationStart) {
        if (window.location.href.indexOf('cpServices') > -1) {
          this.hideComponent = true;
        }
      }
    });
  }
}

<div *ngIf=!hideComponent>
  <content-placeholder></content-placeholder>
</div>
<router-outlet></router-outlet>