jkyoutsey

<app-d></app-d>
<app-c></app-c>

jkyoutsey

app-c {
  grid-area: purple;
}

jkyoutsey

<app-a></app-a>
<app-b></app-b>

jkyoutsey

:host {
  /*
   * Ignore this smart-component wrapper, allowing us to position dumb child components
   * in the global CSS Grid layout!
   * Not supported in IE or Edge at all!
   * https: //caniuse.com/#search=display%3A%20contents
   */
  display: contents;
}

jkyoutsey

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ MyParentComponent ],
    schemas: [ NO_ERRORS_SCHEMA ]
  }).compileComponents();
}));

jkyoutsey

<my-child [item]="items"
          (clicked)="onClick($event)">
</my-child>

jkyoutsey

@Input() items: Array<T>;
@Output() click = new EventEmitter<T>();

jkyoutsey

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { CoverageMetricsLieComponent } from './coverage-metrics-lie.component';

describe('CoverageMetricsLieComponent', () => {
  let component: CoverageMetricsLieComponent;
  let fixture: ComponentFixture<CoverageMetricsLieComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({

jkyoutsey

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nea-coverage-metrics-lie',
  templateUrl: './coverage-metrics-lie.component.html',
  styleUrls: ['./coverage-metrics-lie.component.scss']
})
export class CoverageMetricsLieComponent implements OnInit {

  data: number[];

jkyoutsey

<div *ngIf="hasData(); else nodata">
  <div *ngFor="let item of data"
       class="item"
       (click)="delete(item)">
    {{ item }}
  </div>
</div>

<ng-template #nodata>
  No data