Resizing Height & Width Of The Div In Percentage Not Pixel By Using Angular 5

I am new to angular 5. I have to implement Resizing height & width of the div in percentage by using angular 5. Please help me to implement this functionality.

Solution 1:

you can do this easily.

<p [style.width.%]="someValue"> ... </p><p [style.height.%]="someValue"> ... </p>

ref

Solution 2:

you have to declare the css properties in .css file.

for example:

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

Solution 3:

Better you use it inside css/ .ts file

@Component({
  selector: 'your-selector',
  styles: [`   
      .change-hight-width{
        height: 200px;
        width:200px;
      }   
  `]
//rest of the code
    })

in html

<div [ngClass]="'change-hight-width'">