Hide parent view in angular 2

Issue

I have to hide the above parent view.

Following is my code. When I click any one of the box parent should be hide child should be appear.

        <app-navbar></app-navbar>
        <div class="container" [style.height]='height' style="margin-top: 7%;">
            <div class="row box_rpad">
                <app-box-layout 
                                (display)="onDisplay($event)" 
                                *ngFor="let color of colors let i=index" 
                                [color]='color.hex' 
                                [text]='color.name' 
                                [id]='i'>
                </app-box-layout>               
            </div>
        </div>

        <!-- CHILD ROUTES -->
        <div class="container">
            <router-outlet></router-outlet> 
        </div>

Solution

Make separate component for the one you called parent (ParentComponent) and for the one you called child (ChildComponent). You can then setup a route that loads either ParentComponent or ChildComponent into a router-outlet in your template. Doing so, the ParentComponent and ChildComponent are at the same route level. You have to change their names to make sense.

Answered By - Faly