title: Angular how may I apply condition on [ngStyle] and class. That if condition true [ngStyle] runs otherwise class runs
body: <p>Component.Html</p>
  <pre><code> &lt;div class=&quot;infoSection&quot; [ngStyle]=&quot;FooterStyle&quot;&gt;&lt;br&gt;
  </code></pre>
  <p>Here I have a class(infoSection) that is coming From my Component.css and  [ngStyle]=FooterStyle which is coming from component.ts and I want to make a condition that</p>
  <pre><code> &lt;div class=&quot;infoSection **(else Run this when Flag===0)**&quot; [ngStyle]=&quot;FooterStyle **(RUN THIS IF Flag===1. I dont know the syntax)**&quot;&gt;&lt;br&gt;
   
  </code></pre>
  <p>I have written down the conditions in the div tag verbally. But I don't know the exact syntax how to do it</p>
  <p>Now I am Writing the FooterStyle snippet which is from component.ts and infoSection snippet which is from component.css</p>
  <pre><code> Component.ts
   _Flag:any; //Flag Property
   //This is Footer Object
   FooterStyle={
  'background-image':'',
  'background-repeat':'no-repeat',
  'background-size': 'cover',
  'background-attachment': 'fixed',
  'background-position': 'top',
  }
  
   //Function For Populating the FooterStyle Object with data coming from Backend
  
   this._GeneralSettingsService.GetFooterImage().subscribe((docs:any)=&gt;{
    let _docs = docs.Result;
    if(_docs){
    this.FooterImageUrl = this.FooterImageFolderUrl + _docs[0].imageUrl;
    this.FooterStyle['background-image'] = 'url('+this.FooterImageUrl+')';
    this._Flag=1;
    console.log(this._Flag);
    }else{
      this._Flag=0;
      console.log(this._Flag);
    }
  })
  
  
   Component.css
  
   //infoSection snippet
   .infoSection{
  background-image: url('../../assets/images/tracey2.jpg');
  background-size: cover;
  background-attachment: fixed;
  width:auto;
  background-position: center;
    }
  </code></pre>
  <p>Thanks in Advance.</p>