The next step in this sample application is to wire up our DOM onclick events and show which item is currently selected. As with Aurelia, this will require a slight modification to our template, and the addition of a click handler on our model. Let's start by updating the template in the app.component.html file as follows:

<ul> 
   <div *ngFor="let item of items"  
        (click)="onItemClicked(item)"> 
        <button class="btn btn-primary">{{item.DisplayName}}</button> 
   <br /> 
   </div> 
 
</ul> 

Here, we have simply added a (click)="onSelect(item)" attribute to the <div> tag used to render each item to the DOM. Note the slight difference between Aurelia and Angular syntax used here. Where Aurelia uses click.delegate, Angular simply uses (click), surrounded by parentheses. We can now define the onSelect function within our AppComponent class as follows:

export class AppComponent { 
    ... existing code 
 
    onItemClicked(item: ClickableItem) { 
        this.SelectedItem = item; 
    } 
} 

Here, we have defined an onSelect function that has a ClickableItem object as an argument. Within this function, we are simply setting the value of the SelectedItem property on our class to the item that was used when raising the event. As we saw with Aurelia, this handler is also at the AppComponent level and not at the ClickableItem, as it was with Backbone. The reason for this is again that the controlling class, that is, the class that defines the *ngFor loop, is the AppComponent itself.

With this event handler in place, our sample application is up and running in Angular.