Mastering TypeScript 3 - Third Edition

Angular models

Angular models and controllers are built the same way as Aurelia models, in that they are simple classes. Let's start by editing the file named app/app.component.ts, and add our Angular models and a single controller as follows:

export class ClickableItem { 
    displayName: string; 
    id: number; 
} 
 
let ClickableItemArray : ClickableItem[] = [ 
    { id: 1, displayName : "firstItem"}, 
    { id: 2, displayName : "secondItem"}, 
    { id: 3, displayName : "thirdItem"}, 
]; 
 
// existing @Component code 
export class AppComponent { 
    Title = 'Please select :'; 
    items = ClickableItemArray; 
    SelectedItem: ClickableItem = 
        { Id: 0, DisplayName: "None selected" }; 
} 

Here, we have our standard ClickableItem class, which has the DisplayName and Id properties. We ...