Angular how may I apply condition on [ngStyle] and class. That if condition true [ngStyle] runs otherwise class runs

Question

Component.Html

 <div class="infoSection" [ngStyle]="FooterStyle"><br>

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

 <div class="infoSection **(else Run this when Flag===0)**" [ngStyle]="FooterStyle **(RUN THIS IF Flag===1. I dont know the syntax)**"><br>

I have written down the conditions in the div tag verbally. But I don't know the exact syntax how to do it

Now I am Writing the FooterStyle snippet which is from component.ts and infoSection snippet which is from component.css

 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)=>{
  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;
  }

Thanks in Advance.

This has been answered already. 1. How to conditionally apply a CSS class in Angular https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass 2. How to conditionally apply inline styles with Angular https://stackoverflow.com/questions/49280975/angular-how-to-apply-ngstyle-conditions/49281178 — g0rb, Mar 05 '21 at 00:30
Does this answer your question? [Angular: conditional class with \*ngClass](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) — g0rb, Mar 05 '21 at 00:31
I have already read all the answers on stack overflow before I have asked my question. I hope I will get my answer — Abdul Rehman, Mar 05 '21 at 00:42

score 0 · Accepted Answer · answered Mar 05 '21 at 00:48

0

I believe this question has been asked before, but here is how I would implement a conditional across both a CSS class and an inline style with Angular.

<div 
    [ngClass]="{'infoSection': Flag === 0}" 
    [ngStyle]="Flag === 1 ? FooterStyle : {}">
<br>
</div>

answered Mar 05 '21 at 00:48

g0rb

2,234
1
9
13

Brother I am Mean Stack developer. What technologies do you use? Do you have linkedin? – Abdul Rehman Mar 05 '21 at 01:05

Angular how may I apply condition on [ngStyle] and class. That if condition true [ngStyle] runs otherwise class runs

1 Answers1