get background color on button dropdown of div class dropdown on Angular

Question

I have tried to get color on dropdown of tag 'a' according to the value that user has selected.when you select list button it color change follow list The code I have tried is:

app.component.html

              <div class="dropdown dd">
                <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                  <i class="{{ getPriorityIcon(ticket.priority) }} text-left"></i>{{ticket.priority}}
                </button> 
                <div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
                  <a *ngFor="let priority of Prioritys" class="dropdown-item"
                    (click)="changePriority(ticket.id, priority.name)"  >
                    <i class="{{priority.icon}}"  value="priority.name"></i> {{priority.name}} </a>
                </div>
              </div>

app.component.ts

  Prioritys = [
    { name: 'Low', icon: 'fas fa-square mx-2', value: '#2ED0B9' },
    { name: 'Medium', icon: 'fas fa-circle mx-2', value: '#FFBE96'},
    { name: 'High', icon: 'fas fa-star mx-2', value: '#2ED0B9'},
    { name: 'Critical', icon: 'fas fa-fire mx-2', value: '#2ED0B9' }
  ];

Answer 1

The first thing that you need to change is the *ngFor list, intead of Types, you need to change to Prioritys.

<a *ngFor="let type of Prioritys "/>

And for the color, you can use ng-style

<span ng-style='{color: type.value}'>{{type.value}}</span>