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

Answer 1

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