Learn With: Angular4, Bootstrap, and ColdFusion by Jeffry Houser & Jeffry Houser

Author:Jeffry Houser & Jeffry Houser [Houser, Jeffry]
Language: eng
Format: azw3
Publisher: DotComIt, LLC
Published: 2017-08-26T04:00:00+00:00

Populating a Select with Angular

Two select lists are required; one for completed tasks, and one for categories. Completed tasks will use a hard-coded data source, and the category drop-down will be populated from a service call. In both cases, the data source will be populated with a property from the TaskModel.

For the completed options, let’s create a value object class to contain an option. Create the class CompletedOptionVO.ts in the com/dotComIt/learnWith/vo directory:

export class CompletedOptionVO {

id : number;

label : string;

value :boolean;

};

This class contains three separate properties. The first is an id property which will represent a primary key for the value. The second will be a label, which is the display text. The final property is a value property, which will represent the actual value sent to the services. Let’s add a constructor here to make it easy to create an instance of this class:

constructor(id :number, label :string, value:boolean) {

this.id = id;

this.label = label;

this.value = value;

};

This constructor accepts three arguments, and sets all the class properties based on those values.

Now, switch over to the taskmodel.ts in the com/dotComIt/learnWith/model directory. Import the CompletedOptionVO:

import {CompletedOptionVO} from "../vo/CompletedOptionVO";

Inside the class definition, create the taskCompletedOptions:

taskCompletedOptions : CompletedOptionVO[] = [

new CompletedOptionVO(-1, 'All', null),

new CompletedOptionVO(0, 'Open Tasks', false),

new CompletedOptionVO(1, 'Completed Tasks', true)

];

The array has three elements; each one an instance of the CompletedOptionVO. The value of the completed property is actually a tri-state property. It can be “true” for completed tasks, “false” for open tasks, or “null” for all tasks. If it is “null”, the condition will not be added to the final class.

Let’s create a TaskCategoryVO class, too. Create the file TaskCategoriesVO.ts in the com/dotComIt/learnWith/vo directory:

export class TaskCategoriesVO {

taskCategoryID : number;

taskCategory : string;

};

This class is simpler than the CompletedOptionVO. Since we won’t be creating these instances all at once, I did not add a fancy constructor.

Since the taskCategories won’t be loaded yet, we’ll just populate that with an empty array inside the TaskModel:

taskCategories : TaskCategoryVO[]

Moving onto the TaskFilter.html template, we can use a table to layout items. The first row of the table will contain the headers and the second row will contain the input elements.

This is the start of the table, containing just the top row, and the headers for the first two drop-down lists:

<table>

<tr>

<td>Completed</td>

<td>Category</td>

<tr/>

</table>

The second row will contain the select boxes. Before we jump into that, I want to refresh your memory on how a normal select box would be populated in HTML:

<select>

<option value="-1">All</option>

<option value="0">Open Tasks</option>

<option value="1">Completed Tasks</option>

</select>

The top-level tag is the select. Each option in the drop-down is defined with an option tag. The text between the open and close option is displayed in the drop-down list of the UI. The value is something that can be accessed through JavaScript.

When creating a select box in Angular, the approach is slightly different:

<tr>

<td>

<select [(ngModel)]="completed" >

<option *ngFor="let task of taskModel.taskCompletedOptions"

[value]="task.value">

{{task.label}}

</option>

</select>

</td>

The table row and table data are simple HTML tags. The select merely specifies the ngModel, which ties to a property on the taskFilter instance in the TaskFilter component class. Next up is the options tag. It has a new Angular directive; *ngFor.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.