6

My application uses these classes: "large-screen" for desktop view and "small-screen" for mobile view. I am trying to use ngClass so I can switch between these classes in the container or wrapper div for various components but all of my implementations don't seem to work.

Requirement is to switch to "large-screen" for desktop view and switch to "small-screen" for mobile view. Below are the media queries already in place.

@media only screen and (max-width: 415px) {
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
}

If anyone could suggest something different would be really appreciated.

user7513612
  • 63
  • 1
  • 1
  • 4

3 Answers3

3

You could create only 1 class and change it's attributes depending on the media-queries, like this:

@media only screen and (max-width: 415px) {
  .class-name {
    background-color: blue;
  }    
}
@media only screen and (min-width: 415px) {
  .class-name {
    background-color: red;
  }
}

Otherwise you would have to display:none the classes in the media-queries you don't want them to appear, like this:

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }    
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

This way you would have to use them both in all your divs that you want to work in both devices:

<div class="small-screen large-screen"></div>

If you want to use depending on a variable value, then the ngClass makes sense, you could use like this:

<div [ngClass]="{'small-screen': isMobile, 'large-screen': !isMobile}></div>

cassmtnr
  • 927
  • 13
  • 26
  • Cassiano Montanari thanks for your answer. In the last option would I still have to declare `display:none` for `[ngClass]="{'small-screen': isMobile, 'large-screen': !isMobile}`? Also should the value for **isMobile** be specified like `max-width: 415px`? – user7513612 Apr 27 '18 at 16:43
  • So, for the last option both classes have display:block, but you will have to make a function on javascript/typescript to find out if the device is mobile or not, you can use this answer: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser – cassmtnr Apr 27 '18 at 17:42
  • Does the `isMobile` still need to be declared to the typescript of the component? – Rich Jul 12 '20 at 15:23
  • @Rich If it's just screen-size based you don't need the variable, so you could use the first example, if you use any method to identify the device, then the isMobile should be declaredon the javascript/typescript. – cassmtnr Jul 13 '20 at 18:58
1

You can achieve this by simple media query and class attribute of HTML. No need to go for ngClass.

CSS

@media only screen and (max-width: 415px) {
  .small-screen {
    display: block;
  }
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
  .large-screen {
    display: block;
  }
}

Html 

<div class="small-screen large-screen"></div>
Neeraj Rathod
  • 1,609
  • 4
  • 18
  • 25
  • 3
    You just copied part of my answer. hehe – cassmtnr Apr 27 '18 at 17:43
  • @CassianoMontanari It seems but I didn't, actually I hadn't had a glance at your answer. It is coincident I had copied CSS part from the question and put simply "display:none/block" that it. If you want I can remove my answer – Neeraj Rathod May 01 '18 at 06:30
1

in app.ts

  addclass:any
  ngOnInit(){
    if (window.innerWidth < 658) {
    this.addclass =true
    alert("hgjk")
    } else {
     this.addclass=false
    } 
  }

in html using ngClass

<div [ngClass]="{'table-striped':addclass}">
</div>
Hari Prasath S
  • 79
  • 3