In HTML and Angular dart, is there a way to change the style of an element based on a function?

I am using angular dart. I have a simple dialog that I contains a list. I want the selected item in the list to be a different highlighted color. I have this working, but there has to be a better way than what I am doing.

In my HTML code I have 2 different elements inside my list and I am showing one or the other based on some logic (rowIsSelected function). Is there a way to have just one element and change its style based on the same function?

<modal *ngIf="visible" [visible]="visible">
    <material-dialog headered class="headered-dialog">
        <div header>
            <h1>{{caption}}</h1>
        </div>
        <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
            <div class="list-body form-control">
                <ul #listcontrol>
                    <li *ngFor="let item of items; let i=index" (dblclick)="onListDblClick(i)" (click)="onListClick(i)">
                        <div class="selectedrow" *ngIf="rowIsSelected(i)">{{item.name}}</div>
                        <div *ngIf="!rowIsSelected(i)">{{item.name}}</div>
                    </li>
                </ul>
            </div>
        </form>
        <p></p>
        <div footer>
            <button (click)="onSubmit()" type="submit" class="btn btn-primary closebuttons">OK</button>
            <button (click)="onClose()" type="button" class="btn closebuttons">Cancel</button>
        </div>
    </material-dialog>
</modal>

My CSS looks like this...

p { 
  margin: 8px; 
}

.list-body{
    width: 300px;
    max-height: 500px;
    overflow-y:auto; 
    overflow-x:auto;
    border: 1px solid black;   
}
 
ul {
  list-style: none;
  padding-left: 0;
}

li {
  line-height: 2em;
  cursor: pointer;
}

li:hover {
  background-color: #EEEEEE;
}

.selectedrow {
  background-color: #0072a3;
  color: white;
}

.closebuttons {
  width:100px;
}