Angular 4 Components Properties, Arrays and Objects

Sharing buttons:

hi everyone and welcome to the angular 4

QuickStart tutorial I'm very excited

about that tutorial and hope you are too

and please subscribe and like to get

updates about the new tutorial and now

let us start so in the last video is

talking about the angular 4 structure

how angular 4 works and how to create a

component and how to use binding

directive today's video we'll be talking

about component structure and how to

initialize an array and objects and call

them from the HTML so let us start by

taking a look on the project that we

started last time so this is the

component let us check what are the the

main structure of the component in that


it's the import part this is where

you're going to import whatever services

or functions you're going to need to use

inside the components and this we're

going to have it in detail in later

video inside the component decorator

this is a decorator and those are the

properties so those properties one of

them is the selector which we talked

about the last time which is the

identifier or the name you can consider

it as the component name or identifier

which can be used to call the component

template the template URL this is where

you set the path of the HTML which we'll

use as an output for the component for

the style URLs this is the property

which is used for setting the CSS path

for any of the EDD above HTML once there

are a lot of other providers to

like animations which is used to use the

animation there are queries there are

module ID inputs but not all of them are

popular or used so let us start with

those three and in some other video

we'll be discussing the animation - so

if we go to the HTML and we put some

other text here okay

so now here we have the text let's go to

the CSS and define that h1 let's make it

for example like style italic okay so

now all the texts are italic let's go

back again to our components so one of

the tips in our case if we are having

only few lines of HTML we don't need to

use separate HTML file instead we can

just put the HTML here and then instead

of the single quotes you put like telda

and you put here your code

from components okay I forgot to do one

important thing and you shouldn't forget

it like knee instead of template URL now

you need to use template so it's running

now it's ignoring the HTML file and it's

running only that HTML from inside the

component you can do the same to style

URLs so you remove URLs and you have it

like styles but be the only difference

that will be keeping the brackets and

also just remove their coats with tilde

ones and let us put the CSS here so I'm

going to move the CSS take that file see

it's back not italic anymore then I'm

going to go to the component put the CSS

here save it

and yes it's italic again so that's what

you need to know about the component

properties other than that is going to

be mainly the animation and the


what is the providers when you import

here a service or a dependency that you

need you're going to add it as a

providers to inside the providers ok let

us now move on and initializing the

object and initialize an array too so

let us start with an object to

initialize an object let's say it's

color objects so it's equals and then

you open braces and inside the

races you can say like brand you say

like Toyota then you put a collar in

engine 3.5 coma and then Marlowe 2010

that's it let's save it now we want to

read the the object now to read the

object it's going to be simply in the

last video I've showed you like to read

any string or any valuable you need to

put them between the braces since it's

an object it's going to be car and then

dot and you choose what objects you want

what what property of the object that

you want so it's going to be for example

brand save ministry over here so we got

it here let's move on and try the array

to initialize an array it's going to be

again the name of the array and instead

of the braces you're going to use

brackets and inside the brackets you can

put commas and separate them with the I

mean single quotes and separate them

with commas

so employee is so let us put then

clipped Harry

Rubina Molly

maybe and Christopher

okay so now if we adhere employees it's

going to show all the employees see

showing all of them so if you wanna read

specific employee you have to put the

number and since the array it starts

from zero so think it is zero hair is

one so if we want to read Rubina then

it's going to be 0 1 2 so it's going to

be between brackets and put 2 and you

run it that's it for today guys until we

meet again bye