In Angular2, how to make <app-root> 100% height

In the component css use the :host selector

:host {
    height: 100%
}

Just set display property to block:

app-root {
  display: block;
  height: 100%;
}

All custom elements are created as inline so you cannot manipulate their dimensions. You need to make them block elements.

Some time has passed, now I have had the problem. This is the solution that I am applying

In your app.component.css or desired component use this style

:host {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  border: solid 3px yellow; /* for debugging purposes */
}

You can do it using simple javascript. On page load (or in your appComponent) you can set the height of app-root to be equal to window.innerHeight. So it will always take the height of your window.