To add a class involving a flag and media query in angular

Question

I want to add class depending on a flag and the screen resolution I tried

[ngClass]="singleFloorFlagStyle ? 'floorPlanContainerWidth' : 'singleFloor'"

 @media only screen and (min-width: 1500){
.floorPlanContainerWidth{
 width: 670px;
 }
}

 @media only screen and (max-width: 1400){
.floorPlanContainerWidth{
width: 613px !important;
}
}

.singleFloor{
width: 1300px;
}

singleFloorFlagStyle I would receive as true or false. So singleFloor class gets applied but floorPlanContainerWidth class doesn't.How can I make the media query classes work.

I had referred this Angular 5: Use ngClass to switch classes for mobile and desktop views but I guess my scenario is different

Is your problem that the class itself is never applied or that the style of the class isn't applied? Because right now you have a "dead range" of 100px between 1400 and 1500 where no style will be applied for the `floorPlanContainerWidth` class. — Chrillewoodz, Oct 21 '19 at 11:46
Yeah :) because singleFloor class gets applied, so flag is working — Enthu, Oct 21 '19 at 11:52

Hiren Vaghasiya · Accepted Answer · 2019-10-21T12:15:05.563

1

You have not added px so floorPlanContainerWidth not applying

 @media only screen and (min-width: 1500px){
   .floorPlanContainerWidth{
     width: 670px;
   }
 }

 @media only screen and (max-width: 1400px){
   .floorPlanContainerWidth{
      width: 613px !important;
   }
 }

.singleFloor{
   width: 1300px;
}

edited Oct 21 '19 at 12:15

answered Oct 21 '19 at 12:11

Hiren Vaghasiya

5,454
1
11
25

@Enthu it’s no bother – Hiren Vaghasiya Oct 21 '19 at 12:18
@Enthu yes, Sure i will try – Hiren Vaghasiya Oct 24 '19 at 11:49

score 0 · Answer 2 · answered Oct 21 '19 at 12:09

0

Try this

[ngClass]="{'floorPlanContainerWidth' : singleFloorFlagStyle , 'singleFloor' : !singleFloorFlagStyle }"

If you want to set an initial size of the floorPlanConatainerWidth. So that even if it is not in the media queries ratio then also style will be applied. Then you have to add the class outside the media queries also and define some width there

.floorPlanConatainerWidth{
  // Initially set width without media queries
}

@media ...

answered Oct 21 '19 at 12:09

Hitech Hitesh

1,641
1
9
18

No it doesn't resolve, I checked with 1100, 1200, 1230 , diff combinations – Enthu Oct 21 '19 at 12:11
Where your class is present in which file – Hitech Hitesh Oct 21 '19 at 12:12
Sorry my bad had not used px – Enthu Oct 21 '19 at 12:14

To add a class involving a flag and media query in angular

2 Answers2