title: Change element css property dynamically
body: <p>I need to dynamically set the background image. Since <code>ion-content</code> is an element how can I do that? If it is a css class then I can do like so</p>
  
  <p><code>[class]="cssClassName"</code> and I can change the class name inside the <code>ts</code> file. But here how can I do that? </p>
  
  <p><em>.ts</em></p>
  
  <pre><code>ngOnInit() { this.init(); }
  
  init() {
      switch (environment.hotelEnvironment.hotelName) {
        case "com1":
         // has back ground
          break;
        case "com2":
         //no back ground
          break;
        default:
      }
    }
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>&lt;ion-content&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><em>.scss</em></p>
  
  <pre><code>ion-content {
      --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;
  
  }
  </code></pre>