title: Display a component after a click($event) Angular 4
body: <p>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</p>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;div class="daydetail"&gt;
       &lt;h1&gt;Detail of the day&lt;/h1&gt;
       &lt;button type="button" label="Click"(click)="display('my-displaychild')"&gt;&lt;/button&gt;
       &lt;div&gt;{{my-displaychild}}&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Here's is my component:</p>
  
  <pre><code>import { DisplayChildComponent } from './displaychild.component';
  
  export class AppliV2Component   { 
  
  
      display(vid:DisplayChildComponent) {
             console.log(DisplayChildComponent);
      }
  
  
   }
  </code></pre>