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
– cloned, Commented Jun 1, 2022 at 8:58

simon thismyvoice · Accepted Answer · 2022-11-26 02:17:49Z

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

answered Nov 26, 2022 at 2:17

simon thismyvoice

505 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using ngClass with bootstrap class as conditional screen size breakpoint detector

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related