Display a component after a click($event) Angular 4

I'm trying to create an event on a click button who fired another component, if you click again it reduce the component (a part of the displayed component is always visible).. I know this could be done with [ngClass]='hidden' and everything in the same component but I am not sure whether its the best way in terms of modularity. Thanks in advance

Here's my html:

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click"(click)="display('my-displaychild')"></button>
     <div>{{my-displaychild}}</div>
</div> 

Here's is my component:

import { DisplayChildComponent } from './displaychild.component';

export class AppliV2Component   { 


    display(vid:DisplayChildComponent) {
           console.log(DisplayChildComponent);
    }


 }