How to set different css class based on screen size in Angular?

Question

I have this floating button in my Angular Application,

  <button [ngClass]="{
  'mdc-fab--extended': extendedClass,
  'mdc-fab--mini': miniClass
}" class="mdc-fab mdc-fab--touch    ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>

And I need to change the mdc-fab--extended className to mdc-fab--mini when screen size is 768px or lower? What can I do to achieve this functionality? Thanks

I've tried this but the classes are not being removed/added

    if (window.innerWidth < 768) {
  this.miniClass = true;
  this.extendedClass = false;
} else {
  this.miniClass = false;
  this.extendedClass = true;
}

The expression in your template is not written properly. I am adding it to the answer. — Apoorva Chikara, Nov 11 '21 at 06:31

score 8 · Accepted Answer · answered Nov 11 '21 at 06:29

You can add hostlistener to your component.

public size700_1020 = false;
public size400_700 = false;

@HostListener('window:resize', ['$event'])
onResize(event) {
   alert(window.screen.availWidth);
   alert(window.screen.availHeight);

   if(window.innerWidth < 700 && window.innerHeight < 1020) {
       // now based on the screen size you want to check 
       // enable the variable and make it true
       // based on it, you can enable the class in template
   } 
}

In template:

<div class="size700_1020 ? 'addThisClass' : 'elseThis'"></div>

There are multiple properties for your requirement on window object. I am attaching some links which might give you more ways here1 and here2.

You can also do this.

import { Platform } from 'ionic-angular';

...
private width:number;
private height:number;

constructor(private platform: Platform){
    platform.ready().then(() => {
        this.width = platform.width();
        this.height = platform.height();
    });
}

As per the changes made in the question:

  <button [ngClass]="miniClass ? 'addMiniClass':'extendedClass'" class="mdc-fab mdc-fab--touch    ">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">mail</span>
<!-- <span class="floating-span">My Invite Link</span> -->
<div class="mdc-fab__touch"></div>

score 1 · Answer 2 · answered Nov 11 '21 at 06:35

Component.ts

    classFlag = false;
    ngOnInit(){
     if (screen.width <= 768) {
      this.classFlag = true;
    } else {
      this.classFlag = false;
    } 
  }

HTML

<button class="mdc-fab  mdc-fab--touch"
  [ngClass]="classFlag ? 'mdc-fab--extended' : 'mdc-fab--mini'">
</button>

try screen.width instead of window.innerWidth

Toxy · Answer 3 · 2021-11-11T06:35:34.187

0

Component :

classFlag = false;
ngOnInit(){
  if (window.innerWidth <= 768) {
    this.classFlag = true;
  } else {
    this.classFlag = false;
  } 
 }

HTML :

<button class="mdc-fab  mdc-fab--touch"
  [ngClass]="classFlag ? 'mdc-fab--extended' : 'mdc-fab--mini'">
</button>

Triggering on RESIZING WINDOW OR BROWSER Check this : https://stackoverflow.com/a/49917082/11492378

edited Nov 11 '21 at 06:35

answered Nov 11 '21 at 06:26

Toxy

696
5
9

I've tried this but the mdc-fab--mini class does not get applied when width is <= 768, i switched your classes in your ngClass since thats the logic I applied but still i dont understand why its not changing? – julz oh Nov 11 '21 at 06:31
are you checking it by resizing your browser ? – Toxy Nov 11 '21 at 06:32
yes i have inspector open and and browser is 768px width or less its still same mdc-fab--extended class and not mdc-fab--mini class – julz oh Nov 11 '21 at 06:32
1

You need to append the hostlistener and based on that you can add the classes. Please check my answer if that makes any sense. – Apoorva Chikara Nov 11 '21 at 06:33
no then you need to use `HostListener` for event. like @Apoova answer – Toxy Nov 11 '21 at 06:34
ahh I see the HostListener works now! – julz oh Nov 11 '21 at 06:35
https://stackoverflow.com/a/49917082/11492378 Reff - – Toxy Nov 11 '21 at 06:36

How to set different css class based on screen size in Angular?

3 Answers3