Text version of the video
Slides
Angular CRUD Tutorial
Angular CRUD Tutorial Text Articles & Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
In this video, we will discuss, how to get the select list options from an array in the component class, instead of having them hard-coded in the HTML.
Step 1 : Create the Department class.
Add a TypeScript file to the models folder. Name it department.model.ts. Copy and paste the following code. Notice the Department class has 2 properties – id and name of the department.
export class Department {
id: number;
name: string;
}
Step 2 : Import the Department class. Include the following import statement in create-employee.component.ts file
import { Department } from ‘../models/department.model’;
Step 3 : Include the following array of departments in CreateEmployeeComponent class in create-employee.component.ts file
departments: Department[] = [
{ id: 1, name: ‘Help Desk’ },
{ id: 2, name: ‘HR’ },
{ id: 3, name: ‘IT’ },
{ id: 4, name: ‘Payroll’ }
];
Please note : The “Department” type is not required for the application to work, but it adds great value during development. Using it provides us intellisense, error checking and type saftey.
For the HTML used in the video, please refer to my blog link below
Code explanation:
1. On the “option” element we are using ngFor structural directive to loop over the array of departments we have in the “departments” property of the component class
2. For each “Department” object in the “departments” array, we get an option.
3. The option value is the department id and the display text is the department name
4. Notice the square brackets around the [value] property. This is property binding in Angular. We discussed property binding in detail in Part 9 of Angular 2 tutorial. If you remove the square brackets the value for each option will be the literal text “dept.id” instead of the department id (1 or 2 or 3 etc.)
Property binding in Angular
5. To display the deprtment name we are using interpolation. We discussed interpolation in Part 8 of Angular 2 tutorial.
Interpolation in Angular
6. Since ngFor is a structural directive there is an asterisk before it.
7. Structural directives modify the DOM, i.e they add or remove the elements from DOM. Adding and removing elements from DOM is different from showing and hiding. We will discuss all these in detail in our upcoming videos.
At this point, when we select a department, the respective department id is included in the Angular generated form model. Along the same lines, when we click the “Save” button the respective department id is logged to the console.
Please note : It is important that we include the ngFor directive on the element that we want to be repeated. In our case we want an option element for each department we have in the array. So we included the ngFor directive on the option element. If we instead include the ngFor directive on the “div” element that has the bootstrap “form-group” class, we get 4 department dropdownlists. That is one for each department in the array. So it is important we include the ngFor directive on the right element.
