Angularで、OnClickでバックグラウンドカラーを変えたいです

Question

Angular7において、ulタグにおいて、リストをクリックすると、バックグラウンドカラーが変わるようにしたいです。
以下のコードですと、どのように実現すればよろしいでしょうか？

HTML:

<ul class="horizontal" id="nav">
          <li><a  class="active">Draft</a></li>
          <li><a>Planned</a></li>
          <li><a>Started</a></li>
          <li><a >Suspended</a></li>
          <li><a>Ended</a></li>
        </ul>

css:

ul.horizontal li {
    float: left;
}
ul.horizontal {
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #E2E2E2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
ul.horizontal li a {

    color: #000;
        display: block;
    position: relative;
    line-height: 32px;
    padding: 0 16px 0 32px;
    white-space: nowrap;
    border-right: 1px solid #ccc;
}

ul.horizontal li a.active {
    background-color : #0275E7;
    color : #ffff;
    // background-color: rgb(201, 205, 248);
}

Comments

[退会済みユーザー]

どこをどのような色に変えたいのでしょうか？

[apolo]

画面全体の色を、クリックによって変えたいです
色の種類はなんでも構いません

Answer 1

Javascriptを使っても良いならこんな感じ？
参考
見当違いだったらすみません。