Angular set color depending if true or false

1

I'm currently building a todo app as a learning project. When I display my todo list I want the background of the list item to have a green background if the the task is completed and red if it isn't.

This is how the list looks like at the moment:

This is my .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list"  *ngFor="let todo of todoList">

                <li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

            </ul>

        </div>

    </div>

</div>

So my idea was to have a loop go through if the todo boolean is true then it is green and else it would be red. But I can't find a way to get it done...

EDIT:
I've added this to my .css:

.green {

    background-color: rgb(39, 142, 255);

}

And this is my current .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list" *ngFor="let todo of todoList">

                <li

                        *ngFor="let todo of todoList"

                    [ngClass]="todo.taskCompleted ? 'green': 'red'">



                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

                <!---<li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>--->

            </ul>

        </div>

    </div>

</div>

angular

share|improve this question

edited Nov 19 '18 at 15:55

asked Nov 19 '18 at 15:29

Josh

206

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Why don't you use NgClass? angular.io/api/common/NgClass or angular.io/api/common/NgStyle
  – sboesch
  Nov 19 '18 at 15:32
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Or even [style.background-color]="todo.taskCompleted?'green':'red'"?
  – Eliseo
  Nov 19 '18 at 16:06
  

  
  
  
  

add a comment | 

1

I'm currently building a todo app as a learning project. When I display my todo list I want the background of the list item to have a green background if the the task is completed and red if it isn't.

This is how the list looks like at the moment:

This is my .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list"  *ngFor="let todo of todoList">

                <li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

            </ul>

        </div>

    </div>

</div>

So my idea was to have a loop go through if the todo boolean is true then it is green and else it would be red. But I can't find a way to get it done...

EDIT:
I've added this to my .css:

.green {

    background-color: rgb(39, 142, 255);

}

And this is my current .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list" *ngFor="let todo of todoList">

                <li

                        *ngFor="let todo of todoList"

                    [ngClass]="todo.taskCompleted ? 'green': 'red'">



                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

                <!---<li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>--->

            </ul>

        </div>

    </div>

</div>

angular

share|improve this question

edited Nov 19 '18 at 15:55

asked Nov 19 '18 at 15:29

Josh

206

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Why don't you use NgClass? angular.io/api/common/NgClass or angular.io/api/common/NgStyle
  – sboesch
  Nov 19 '18 at 15:32
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Or even [style.background-color]="todo.taskCompleted?'green':'red'"?
  – Eliseo
  Nov 19 '18 at 16:06
  

  
  
  
  

add a comment | 

1

1

1

I'm currently building a todo app as a learning project. When I display my todo list I want the background of the list item to have a green background if the the task is completed and red if it isn't.

This is how the list looks like at the moment:

This is my .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list"  *ngFor="let todo of todoList">

                <li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

            </ul>

        </div>

    </div>

</div>

So my idea was to have a loop go through if the todo boolean is true then it is green and else it would be red. But I can't find a way to get it done...

EDIT:
I've added this to my .css:

.green {

    background-color: rgb(39, 142, 255);

}

And this is my current .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list" *ngFor="let todo of todoList">

                <li

                        *ngFor="let todo of todoList"

                    [ngClass]="todo.taskCompleted ? 'green': 'red'">



                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

                <!---<li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>--->

            </ul>

        </div>

    </div>

</div>

angular

share|improve this question

edited Nov 19 '18 at 15:55

asked Nov 19 '18 at 15:29

Josh

206

I'm currently building a todo app as a learning project. When I display my todo list I want the background of the list item to have a green background if the the task is completed and red if it isn't.

This is how the list looks like at the moment:

This is my .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list"  *ngFor="let todo of todoList">

                <li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

            </ul>

        </div>

    </div>

</div>

So my idea was to have a loop go through if the todo boolean is true then it is green and else it would be red. But I can't find a way to get it done...

EDIT:
I've added this to my .css:

.green {

    background-color: rgb(39, 142, 255);

}

And this is my current .html:

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-offset-12 col-sm-12">

            <ul class="event-list" *ngFor="let todo of todoList">

                <li

                        *ngFor="let todo of todoList"

                    [ngClass]="todo.taskCompleted ? 'green': 'red'">



                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>

                <!---<li>

                    <time datetime="">

                        <span class="day">{{todo.dueDate | date:'EEE'}}</span>

                        <span class="month">{{todo.dueDate | date:'LL'}}</span>

                        <span class="month">{{todo.dueDate | date:'LLL'}}</span>

                        <span class="month">{{todo.taskCompleted}}</span>

                    </time>



                    <div class="info">

                        <h2 class="title">{{todo.taskName}}</h2>

                        <p class="desc">{{todo.extraNote}}</p>

                    </div>

                    <div class="social">

                        <ul>

                            <li class="edit" style="width:33%;"><a href="#"><span class="fa fa-pencil-square-o"></span></a>

                            </li>

                            <li class="confirm" style="width:34%;"><a href="#"><span class="fa fa-check"></span></a>

                            </li>

                            <li class="delete" style="width:33%;"><a href="#"><span class="fa fa-trash-o"></span></a>

                            </li>

                        </ul>

                    </div>

                </li>--->

            </ul>

        </div>

    </div>

</div>

angular

angular

share|improve this question

edited Nov 19 '18 at 15:55

asked Nov 19 '18 at 15:29

Josh

206

share|improve this question

edited Nov 19 '18 at 15:55

asked Nov 19 '18 at 15:29

Josh

206

share|improve this question

share|improve this question

edited Nov 19 '18 at 15:55

edited Nov 19 '18 at 15:55

edited Nov 19 '18 at 15:55

asked Nov 19 '18 at 15:29

Josh

206

asked Nov 19 '18 at 15:29

Josh

206

asked Nov 19 '18 at 15:29

Josh

206

206

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Why don't you use NgClass? angular.io/api/common/NgClass or angular.io/api/common/NgStyle
  – sboesch
  Nov 19 '18 at 15:32
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Or even [style.background-color]="todo.taskCompleted?'green':'red'"?
  – Eliseo
  Nov 19 '18 at 16:06
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Why don't you use NgClass? angular.io/api/common/NgClass or angular.io/api/common/NgStyle
  – sboesch
  Nov 19 '18 at 15:32
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Or even [style.background-color]="todo.taskCompleted?'green':'red'"?
  – Eliseo
  Nov 19 '18 at 16:06
  

  
  
  
  

2

2

Why don't you use NgClass? angular.io/api/common/NgClass or angular.io/api/common/NgStyle
– sboesch
Nov 19 '18 at 15:32

Why don't you use NgClass? angular.io/api/common/NgClass or angular.io/api/common/NgStyle
– sboesch
Nov 19 '18 at 15:32

Or even [style.background-color]="todo.taskCompleted?'green':'red'"?
– Eliseo
Nov 19 '18 at 16:06

Or even [style.background-color]="todo.taskCompleted?'green':'red'"?
– Eliseo
Nov 19 '18 at 16:06

add a comment | 

1 Answer
1

active

oldest

votes

3

You can create two different CSS classes for both the scenarios and then use ngClass and supply the class based on a condition todo.taskCompleted:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-offset-12 col-sm-12">

      <ul class="event-list">

        <li 

          *ngFor="let todo of todoList"

          [ngClass]="todo.taskCompleted ? 'green': 'red'">

          ...

        </li>

      </ul>

    </div>

  </div>

</div>

Notice the [ngClass]="todo.taskCompleted ? 'green': 'red'" syntax that will apply the CSS class of green if todo.taskCompleted resolves to true and apply the CSS class of red otherwise.

All you need to do now is create two CSS classes named red and green.

PS - I've added the *ngFor on li instead of ul because that's where it needs to be as that's what we want to repeat.

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 19 '18 at 16:05

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
  – Josh
  Nov 19 '18 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
  – SiddAjmera
  Nov 19 '18 at 16:05
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377861%2fangular-set-color-depending-if-true-or-false%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

3

You can create two different CSS classes for both the scenarios and then use ngClass and supply the class based on a condition todo.taskCompleted:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-offset-12 col-sm-12">

      <ul class="event-list">

        <li 

          *ngFor="let todo of todoList"

          [ngClass]="todo.taskCompleted ? 'green': 'red'">

          ...

        </li>

      </ul>

    </div>

  </div>

</div>

Notice the [ngClass]="todo.taskCompleted ? 'green': 'red'" syntax that will apply the CSS class of green if todo.taskCompleted resolves to true and apply the CSS class of red otherwise.

All you need to do now is create two CSS classes named red and green.

PS - I've added the *ngFor on li instead of ul because that's where it needs to be as that's what we want to repeat.

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 19 '18 at 16:05

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
  – Josh
  Nov 19 '18 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
  – SiddAjmera
  Nov 19 '18 at 16:05
  

  
  
  
  

add a comment | 

3

You can create two different CSS classes for both the scenarios and then use ngClass and supply the class based on a condition todo.taskCompleted:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-offset-12 col-sm-12">

      <ul class="event-list">

        <li 

          *ngFor="let todo of todoList"

          [ngClass]="todo.taskCompleted ? 'green': 'red'">

          ...

        </li>

      </ul>

    </div>

  </div>

</div>

Notice the [ngClass]="todo.taskCompleted ? 'green': 'red'" syntax that will apply the CSS class of green if todo.taskCompleted resolves to true and apply the CSS class of red otherwise.

All you need to do now is create two CSS classes named red and green.

PS - I've added the *ngFor on li instead of ul because that's where it needs to be as that's what we want to repeat.

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 19 '18 at 16:05

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
  – Josh
  Nov 19 '18 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
  – SiddAjmera
  Nov 19 '18 at 16:05
  

  
  
  
  

add a comment | 

3

3

3

You can create two different CSS classes for both the scenarios and then use ngClass and supply the class based on a condition todo.taskCompleted:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-offset-12 col-sm-12">

      <ul class="event-list">

        <li 

          *ngFor="let todo of todoList"

          [ngClass]="todo.taskCompleted ? 'green': 'red'">

          ...

        </li>

      </ul>

    </div>

  </div>

</div>

Notice the [ngClass]="todo.taskCompleted ? 'green': 'red'" syntax that will apply the CSS class of green if todo.taskCompleted resolves to true and apply the CSS class of red otherwise.

All you need to do now is create two CSS classes named red and green.

PS - I've added the *ngFor on li instead of ul because that's where it needs to be as that's what we want to repeat.

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 19 '18 at 16:05

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

You can create two different CSS classes for both the scenarios and then use ngClass and supply the class based on a condition todo.taskCompleted:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-offset-12 col-sm-12">

      <ul class="event-list">

        <li 

          *ngFor="let todo of todoList"

          [ngClass]="todo.taskCompleted ? 'green': 'red'">

          ...

        </li>

      </ul>

    </div>

  </div>

</div>

Notice the [ngClass]="todo.taskCompleted ? 'green': 'red'" syntax that will apply the CSS class of green if todo.taskCompleted resolves to true and apply the CSS class of red otherwise.

All you need to do now is create two CSS classes named red and green.

PS - I've added the *ngFor on li instead of ul because that's where it needs to be as that's what we want to repeat.

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 19 '18 at 16:05

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

share|improve this answer

share|improve this answer

edited Nov 19 '18 at 16:05

edited Nov 19 '18 at 16:05

edited Nov 19 '18 at 16:05

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

answered Nov 19 '18 at 15:34

SiddAjmera

13.1k31137

13.1k31137

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
  – Josh
  Nov 19 '18 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
  – SiddAjmera
  Nov 19 '18 at 16:05
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
  – Josh
  Nov 19 '18 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
  – SiddAjmera
  Nov 19 '18 at 16:05
  

  
  
  
  

Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
– Josh
Nov 19 '18 at 15:54

Thanks for your detailed answer I understand the idea behind your suggestion. I can't manage to set the background color though. Is there anything I've done wrong? (I've edited my first post)
– Josh
Nov 19 '18 at 15:54

I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
– SiddAjmera
Nov 19 '18 at 16:05

I've added a Sample StackBlitz. Please check it in working. Most probably there's some issue with your CSS.
– SiddAjmera
Nov 19 '18 at 16:05

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377861%2fangular-set-color-depending-if-true-or-false%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here