declare

Angular select options from array



Sharing buttons:

this is pattern of anglich Rada - yeah

in our previous video we discussed how

to get this department dropped down on

our form and here is the HTML for that

drop down list notice within the HTML we

have the options hard-coded for the

select list so in this video what we'll

do is remove those hard-coded options

from the HTML and retrieved them from an

array in the component class so the

first thing that we want to do is create

a type for our department now if we look

at the options of the department notice

each option has got a value which is

nothing but the ID of the department and

the department name itself so let's

create a type and let's do that within

the models folder right click on the

models folder new file since this is

Department model let's call it

department dot model dot TS as you might

have guessed already the department

class is going to have two properties ID

and name next let's import this

department type within our create

employee component so in the create

employee component type script file

let's include the required import

statement now in this class create

employee component let's create

departments property and this property

is going to be of type Department array

remember we have just imported the

department type from this file we know

each department is going to contain two

properties the ID of the department and

the name of the department let's say the

name of the department here to help desk

let's do the same thing for the rest of

the options one important thing to keep

in mind is this departments type

information right here this is not

required for the application to work

we'll actually prove that in just a bit

but having the type information right

here adds great value during development

because it provides intelligence error

checking and type safety at this point

we can remove the hard-coded options

from the HTML so I'm going to remove all

these options

then instead we are going to use ng for

structural directive and loop over the

department objects that we have within

the department's property so on the

option element right here let's use ng

for structural directive since ng for is

a structural directive it has an

asterisk in front of it structural

directives modify the Dom that is they

add or remove elements from the Dom

adding and removing elements is

different from showing and hiding

well discuss the differences in detail

in our upcoming videos

now let's loop over each department that

we have in the department's property so

let dep d so we are creating this

variable d EP d and we are going to

iterate over the department's property

and we know this departments property

contain an array of department objects

as we are looping over that array this

variable is going to point to each

department object that we are currently

iterating over and we want the value of

the option and we want to bind that

property to the department ID remember

this variable right here DEP D contains

a reference to the object that we are

currently iterating over so we know the

department object has got an ID property

and we want that ID value as the value

for the option and we also want the

department name as the text displayed so

again we are going to use this variable

DEP D and since it's a pointer to the

department object we know it has got

name properly and we are using

interpolation right here to display the

name of the department as the option

text so since we are using ng for

structural directive on the option

element each option will be repeated for

each department object that we have in

the department's array within our

component class notice we have the same

set of options displayed within the

Select list and when we select an option

the respective option value is captured

by the angular auto-generated form model

right here

now if we include another department

object within our departments Raa this

object will also be displayed as an

option within the department's drop-down

list notice we have the admin department

as well when we select that its

respective ID value is captured by the

angler generated phone model one

important point to keep in mind is that

this ng for structural directive should

be used on an element that we want to

have repeated in our case we want an

option for each department object that

we have in the department's array so

that's the reason we have included the

ng for structural directive on the

option element now let's see what's

going to happen if we move that ng for

structural directive on to this

development now what's going to happen

is for each department object that we

have in the department's array we are

going to get this entire div element

repeated so since we have five

Department objects within the

department's array we will have five

Department drop-down lists so this

entire there will be repeated for each

department object so if we take a look

at the browser now we will have five

departments drop-down list as you can

see right here and within each drop-down

we have a different option that's not

the behavior we want so let's move that

ng for directive back on to the option

element because that's what we want to

have repeated for each department object

that we have in the department's array

notice now we get one department with

five options as expected another

important point to keep in mind is when

we are binding to a property we will

have to use square brackets as you can

see right here where this case probably

binding in detail in part 9 of angular 2

tutorial so if you're new to property

binding please check out that video now

let's see what's going to happen if we

remove these square brackets if we

remove these square brackets each option

will have a value of this little text

the epd dot ID let's actually confirm

this it

we take a look at the browser right now

and then irrespective of the option that

we select notice the value that is

captured the epd dot ID that literal

text instead of the respective

department ID value notice any option

that we select we have the same value so

that's why it's very important when you

are binding to a property make sure you

use square brackets if you're binding to

a string literal then we don't need

these square brackets now if we take a

look at the department's array right

here notice we have included its type

information now with without this type

information the application is going to

work exactly the same way so now if we

take a look at the browser is going to

work the same way as before when we

select any of the options notice the

respective Department ID value is

captured by the angle I generated for

model so the application is working the

same way but it's great to have this

type information because during

development it provides us great

features like intelligence error

checking and type safety on this slide

we have the code that we just discussed

thank you for listening and have a great

day