import { Component } from '@angular/core';
//Child Component
@Component({
    selector: 'app-child',//Child component Selector
    template: `
	  <div *ngIf="!hidden">
  	  <div class="backscreen" (click)="hide()"></div>
	    <div class="modal">
	      <ng-content></ng-content>
	      <div>
  	      <button style="width:300px; height:100px;" (click)="hide()">Child Component is triggered</button>
	      </div>
      </div>
	  </div>
  `,
    styles: [`
    .modal {
      position: fixed;
      left: 50%;
      top: 50%;
      width:500px;
      height:500px;
      transform: translate(-50%, -50%);
      background-color: #00FFFF;
      border: 1px solid #ddd;
      padding: 1rem;
    }

    .backscreen {
      position: absolute;
      background: rgba(0, 0, 0, 0.1);
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  `]
})
export class ChildComponent {
    hidden = true;

    show() {
        this.hidden = false;
    }

    hide() {
        this.hidden = true;
    }
}
