How to set condition in ngstyle or ngclass

Question

I have 2 different pages which is going to display the same data and both are sharing the same components. But both pages has different resolution one is the size with the alert box and one is similarly A4 size. how to set dynamic height and width for them. I tried using ngstyle not sure how to implement it correctly in normal html

<tbody class="classname" style="height: 60px; width: fit-content;"> i added this and it works but both pages taking the same resolution.

so with ngstyle i tried this again same thing both pages has been set to same 60

[ngStyle]="{'height.px': 'Height' ? '60' : '200' }"

or it there any solution using ngclass?

@Obaid if the page resolution is 200 then it should set to 200 px and vice versa — , Jan 13 '20 at 16:32

Obaid · Answer 1 · 2020-01-13T18:39:10.883

So your problem breaks-down in two steps. One is to calculate the page height which is not an angular field and rather browser-specific issue. Although browsers do expose clientHeight or scrollHeight properties but there is a difference on how different browsers understand the actual height of the page.

So the best practice (as its also used by famous jQuery library) is to get the different document-level height properties and get the maximum value out of those.

You'll have to inject the DOCUMENT constant to access the DOM document into your component. Please find the below example angular component code.

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  public height = 0;

  constructor(@Inject(DOCUMENT) private document: any){
  }
  ngOnInit() {
    this.height = Math.max( this.document.body.scrollHeight, this.document.body.offsetHeight, 
                      this.document.documentElement.clientHeight, this.document.documentElement.scrollHeight, this.document.documentElement.offsetHeight );


  }

}

Now simply on the html side you could test the height property of component and apply the style as desired. Somethink like this..

<div [ngStyle]="{'height': height>=200 ? '200px' : '60px' }"></div>

Thanks.

How to set condition in ngstyle or ngclass

1 Answers1