using ngClass with bootstrap class as conditional screen size breakpoint detector

Question

good day developers...is possible to apply ngClass with the use of bootstrap class related to detection of screen sizes responsivnes.

Lets say i would like to apply an specific class to my template when a specifc viewport on m screen is detected

something like :

ngClass="{'my-class':'d-none d-sm-block d-md-none'}"

I mean applying a class if specific breakpoint is met.

Just want to avoid the use of media queries

Why would you need to do this, since these classes already target a specific viewport. `d-sm-` only targets `sm-` sized devices. No need to add the class dynamically, that is handled by mediaqueries. — cloned, Jun 01 '22 at 08:58

score 1 · Accepted Answer · answered Nov 26 '22 at 02:17

You can write something like this.

<div [ngClass]="isSmallDevice() ? 'row m-2' : 'm-3'">

In your ts file, you can define the function.

isSmallDevice():boolean
{
  if (this.screenBreakPoint == Breakpoints.Medium ||
      this.screenBreakPoint == Breakpoints.Large || 
      this.screenBreakPoint == Breakpoints.XLarge)
  {
    return false;
  }
  
  return true;
}

screenBreakPoint is your defined BreakpointObserver

using ngClass with bootstrap class as conditional screen size breakpoint detector

1 Answers1