Angular select options from array
Text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important for both body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Slides
http://csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
• What is Angular CLI
Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
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
http://csharp-video-tutorials.blogspo...
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
• Property binding in Angular 2
5. To display the deprtment name we are using interpolation. We discussed interpolation in Part 8 of Angular 2 tutorial.
Interpolation in Angular
• Angular interpolation
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.
Auf dieser Seite können Sie das Online-Video Angular select options from array mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer kudvenkat 10 Januar 2018 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 146,742 Mal angesehen und es wurde von 686 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
