Angular ngStyle Dynamic Styling Element with ngIf

user_12309519 0
Viewed 5433

I am developing dynamically style element feature in App server authentication and database search engine.

When searchNoResult, UI is:

enter image description here

When click the button triggering execSearch() event -> searchSuccess is true and template searchSuccessColor takes effect (text backgroundColor turns pink). However, I can’t seem to get the color dynamically styled:

enter image description here

I tried setting the template as below but doesn't work:

<button class="button" 
    [disabled] = "!enableSearch"
    (click) = "execSearch()">Search State</button>
    <div *ngIf = "searchSuccess; then searchSuccessColor else searchNoResult"></div>
<ng-template #searchNoResult>
    <p>{{ stateSearchResult }}</p>
</ng-template>
<ng-template #searchSuccessColor>
    <div [ngStyle]="{backgroundColor: 'pink'}"></div>
        <p>{{ stateSearchResult }}</p>
</ng-template>

I tired component method as below but doesn't work:

  setColor() {
    return this.searchSuccess === true ? 'pink' : 'black';
  }

Can someone help to identify what goes wrong?

angular-template angular-directive angular styling javascript
1 Answers

If the else block is used only to color the background, then it could be skipped entirely using [style.background-color] and the ternary operator. Try the following

<div [style.background-color]="searchSuccess ? 'pink' : ''"><p>{{ stateSearchResult }}</p></div>

Or if you wish to use ngStyle (maybe to include more styles), it would be

<div [ngStyle]="{'background-color': searchSuccess ? 'pink' : ''}"><p>{{ stateSearchResult }}</p></div>

Or you could also use ngClass to conditionally include CSS selectors.

app.component.css

.highlight {
  background-color: pink;
}

app.component.html

<div [ngClass]="{highlight: searchSuccess}"><p>{{ stateSearchResult }}</p></div>

Update: Use a variable defined in the controller

If you wish not to hard-code the color value, you could try to define a variable in the controller that holds the color value.

Controller

export class AppComponent implements OnInit {
  backgroundColor = 'pink';

  // button `click` event handler
  execSearch() {
    ...
    this.backgroundColor = searchSuccess ? 'pink' : 'black';
  }
}

Template

<div [style.background-color]="backgroundColor">
  <p>{{ stateSearchResult }}</p>
</div>

<div [ngStyle]="{'background-color': backgroundColor}">
  <p>{{ stateSearchResult }}</p>
</div>

Notice the lack of single quotes surrounding the backgroundColor here. It denotes the variable in the controller. The single quoted values like 'pink' denote the string literals.

ngClass

CSS

.highlight-pink {
  background-color: pink;
}

.highlight-black {
  background-color: black;
  color: white;
}

Template

<div [ngClass]="searchSuccess ? 'highlight-pink' : 'highlight-black'">
  <p>{{ stateSearchResult }}</p>
</div>
user_65139210
Related