Angular 6 Basics 15 - Passing member variables to components

Sharing buttons:

if not got the address card component

which takes the username as the input

using the name attribute of the

component which is great but now you

gotta have all these other things passed

in as well I'm gonna be able to pass in

the title the address and the phone

numbers and all that stuff I could of

course and all those properties here and

have the consumer of this component pass

them in as well but that's gonna be


imagine having so many properties to be

passed in what I'd like to do is pass in

an object instead and that object

there's gonna contain all these values

that the address card component needs in

order to create that object as any API

for my component what I'm going to do is

I'm going to create a class this is

typescript and I can create a class

which defines what the address object

should be or the user object should be

in this case it's gonna be an object

which contains a bunch of properties the

name designation address and an array

for the phone number and then I I'm

gonna use that as the input so rather

than the consumer of my component

passing a string they can pass in an

instance of this user object and I'm

gonna take that and I'm gonna take out

all the name the designation all that

from that object and then I'm gonna use

that instead of each individual property

like this alright so let me do that by

first creating a model object I'm going

to create a class called user and that's

gonna be what gets passed around so in

my address card I'm going to create a

new file called user dot model dot PS

the file has to be a dot TS and this is

something that you can choose on your

own I prefer the convention of using a

dot module that TS whenever I'm creating

classes which are supposed to be modules

or data transfer objects so I'm gonna

call this user dot Model Ts and here I'm

going to export a class which is user

and this will have a bunch of properties

I'm just ready can name the string

designation which is another string

address is a string and then the phone

is going to be a string hurry okay now I

can use that to gather the user input so

rather than take input as name I'm going

to take the user as the attribute that

needs to be set by the consumer of this

component and I'm going to make this

user and this is going to be of type

user user will of course have to be

imported from the model that I just

created and export it out so what this

does is just important this is the

visual studio code adding this import

for me automatically if you don't get

that automatically you need to add this

using the relative path here okay so I

have this user let me get rid of the

string because I cannot assign a string

to this anymore

have this user created as a property

it's giving me an error because there is

already a user over here so I'm going to

call this user obj just to give it a

different name and we'll get rid of this

soon so user obj is what is going to be

sent from the consumer of our of our

component so when I need to get the user

name what I need to do is this start

user obj dot name okay and I can fill in

the rest of the stuff

the address and the phone area so we are

done we don't need the user to send each

individual attribute one by one all they

need to do is send an instance of this

user class so where is consuming our

component they need to be able to create

an instance of this user class set the

right values in it and then pass that

user object and well you should be able

to use that so let's try that out it is

a little bit of a nuance here and things

are not gonna work like you would expect

it to let me show you what I mean so

here is the consumer right this is the

app that component or HTML which is

using the address card component right

now it's passing in name which will not

do I need to pass in user equals you

need to pass this instance of user in

order to pass in an instance of user

what I actually need to do is create

that instance and I need to create that

instance in the 50s file here is the app

component this is the component which is

using the address card component right

if you look at the component hierarchy

the component tree this is at the top

app component is at the top and it's

using the address card component which

is a child of the app component so the

app component needs to pass an instance

of the user to the address card

component in order to do that it needs

to create that instance first so I'm

going to create that instance in the

constructor and create a constructor and

here I'm going to create an instance

then I'm gonna hard code the values this

can be something that you fetch from an

API down the line but for now you're not

looking at API calls we just hard code

this so I'm going to create a let user

new user and I need to import user from

the address card folder tells me where

to find it so I'm going to click on that

and it's really important at eclis I'm

going to set the values here user dot


okay so I have a user created over here

now how do I pass this over here to this

user property but in order to pass it I

need to send that user instance that was

created over here and you know that in

order to send something in order to

refer to something in the template it

has to be a member variable of the app

component so right now it's a local

property which will not work so let me

make this a member variable I'm going to

say this is a property here I'm going to

refer to this you think the disky word

so it's referring to this member

variable all right so I have a member

variable called user and in the

constructor I'm creating a new instance

and populating it to the members

variable and I'm also filling in some

data now if I do this can I pass the

same can I send that user to here so

here's the problem that passing it like

this do you remember when we did the

hello and we had name right we had we

passed in some strings over here but

what an angular do it took what was

between these quotes and it took that

value as a string and it passed that as

the value right it wasn't doing an

evaluation here it was just taking

whatever was didn't double quotes it was

passing that it so if you do something

like this angular doesn't know that you

have a user instance here intend to send

that angular just says okay here is

another string so let me just send that

and what it's gonna send is a string

called user that's not good what you

want angular to do is send the member

variable of that name and not the string

itself you need to tell angular to

behave differently for this value in

order to do that in order to tell


to take the instance of the thing what

you need to do is sir arm the attribute

with a box like this square brackets

open square bracket and close square

bracket this is going to tell angular

that you're not and put this back to

user this tells angular that you're not

just taking the value that's in line

what you want angular to do is evaluate

it and take the member variable that

this refers to okay if you do this then

it's gonna take the member variable here

and you're just going to do this okay so

if I press save it loads and you get the

values that the component is setting

over here I can add one more here and it

automatically gets reflected so it's

basically the app component creating an

instance passing it to your address card

component using this syntax you use the

brackets to tell angular to take this as

the property and then the address card

component receives it over here using

this input and then it sets it to an

object over here and then that's what

it's using so since there are there is

no use for this user object what I'm

gonna do is get rid of this and just

call this user

and I don't have to do this at all

because whatever gets populated it's

automatically gonna get reflected right

Thank You Larry populates this and then

the address card component is directly

using those properties to display it

becomes very simple so this is how you

pass in inputs the only difference

between the two cases that we looked at

was the first case near passing in just

a primitive in your component or HTML

you don't have to use this brackets

whatever value you pass in the double

quotes is what gets sent over as a

primitive but if you want to pass in a

member variable in the consumer you need

to tell a healer take this instance you

need to surround the attribute with a

square bracket and then it's going to

evaluate it and it's going to take that

member variable instead