title: Angular dynamically setting media query
body: <p>I'm writing this code to hide some icons based on the resolution:</p>
  
  <pre><code>@mixin hide-by-index($index) {
    @media (max-width: 1000px - $index * 70px) {
      display: none;
    }
  }
  
  @for $i from 0 through 20 {
    .icon-#{$i} {
      @include hide-by-index($i);
    }
  }
  
  .more-icon {
    @media (min-width: 1000px) {
      display: none;
    }
  }
  </code></pre>
  
  <p>Starting from 1000px, the icons will be hided one by one when the width reduced by each 70 pixels. And the 'More' icon will show up when the screen width is less than 1000px. This code works.</p>
  
  <p>My only issue is, I'd like to change the base resolution 1000px dynamically from javascript side. Because if I have 5 icons, I want start to hide the first icon from 1000px, and 1350px for 10 icons. And the number of icons is based on data.</p>
  
  <p>I'm using Angular.</p>
  
  <p>Thank you.</p>