[Fixed] Component Angular have size (Width Height)

Issue

I have an issue in Angular 4.

I thinks component in angular doesn’t have size (width x height) like this:

So I can’t render new component because old component is still there, I can’t change value of this.

Solution

You can set it manually as follow,

Let’s say you have a component called home.component.ts

@Component({
  moduleId: module.id,
  selector: 'home',
  styleUrls: ['home.component.css'],
  templateUrl: 'home.component.html',
)}

So in home.component.css, you can set its height and width as below,

:host {             // host targets selector: 'home'

    display: block;
    left: 0;

    width: 100%;    // takes parent width        
    OR    
    widht: 1000px   // screen of having 1000px of width


    height: 100%;   // takes parent height    
    OR        
    height: 1000px  // screen of having 1000px of height
}