good morning good afternoon good evening

from whichever location you are watching

this video you are seeing this video so

what are we doing today today we are

going to go and learn angular

fundamentals angular basics

in flat

two hours

now i know that there are many youtubers

out there you know who will say that i

will make you an angular pro in

two hours one hours

and some even claim like 10 minutes

no comments no no comments about it

right

i've been a trainer in angular for past

10 years i started from angular 1 and

now i'm doing the new version of angular

i have taught a lot of corporates you

know been a speaker in angular

right so i divided the syllabus into 10

parts right from basics you know what is

angular i have started with the

definition of angular after that i've

gone through gone to the installations

then we have going through typescript

and then we'll be creating an angular

project

we'll be understanding the angular file

structure will be understanding the

fundamentals you know like decorators

components modules directives and so on

we'll be looking at the whole flow of

angular

bindings expressions interpolation and

different types of binding right so

go through this two hours and i can one

thousand one percent guarantee

that you are inside angular right and

remember that it's a two hours of

tutorial definitely you will have a lot

of problems right so when you get any

problem you know what you have to do is

down below in the youtube comments

you should go right over there and

just put the time stamp you know saying

that okay this is the time stamp where

i'm facing a problem and i will try to

answer to all the youtube comments right

please when you put a youtube comment

especially about a problem make it very

detailed you know saying that i got this

error here i got this error at this time

stamp and so on right here's a small

request

to create you know such kind of content

it takes lot of efforts

think about it you know for this two

hours you know we have to do so much

video editing

we have to have the right source code at

place the trainer has to sit you know

and and make sure that everything works

right we have we have to have the notes

at place and so on right so if you

really think you know that someone

should benefit out there someone should

learn angular please go ahead and share

this video on your linkedin must be

on your

twitter on your facebook right and here

it is if you go and if you share this

videos anywhere on your linkedin on your

twitter anywhere right i will give you

this angular interview question ebook

for free right so go ahead share this

video

and send us a mail at correspondent

questman.com and i'll make sure that you

get this ebook for free

you know this angular interview question

ebook actually covers more than 50 plus

questions

with detailed answers and so on please

remember that one is that

you should be able to do the practicals

right another one is that you should be

able to clear interviews why do we learn

new technologies we should get a job

right

we should get some money isn't it so one

is that you should learn step by step at

the same time you should be ready for

interviews you should practice interview

questions so if you go down below in the

youtube comments out there i have pinned

a youtube comment you know where we have

one hour of angular interview question

video please go through that it will

help you to prepare for angular as well

right so do step by step as well as do

interview questions go in a balanced way

so go ahead share this video get this

ebook happy learning happy job hunting

let us get started

so let us first start with the

definition of angular what is angular

who made angular and so on right

so you can see here i am here on the

official website of angular which is

angular dot io so angular dot io is the

official website of angular

so when you say that you want to

know anything about angular which is

officially out there then this is the

website right

first thing angular is created by google

it is maintained by google it is funded

by google that is the first part right

and you can see here i am on this

official website and there is a small

note out here what is angular so let us

read this let us try to understand it

and

let us try to get you know what exactly

is angular right so you can see here it

says that angular is a

development platform so it's a

development platform to build

applications and specifically the ui

part of the application so angular is a

development platform

and when you say it's a platform that

means that it will provide a very well

structured framework it should provide

you know libraries it should provide

tool sets and so on right and that's

what exactly this development platform

has first thing you can see it has a

very well structured framework here a

component based framework

by which you can go and create

wonderful uh ui applications right

second one

you know it has very in a lot of

ready-made libraries for example if you

want to go uh if you want to move from

one ui to another ui it has routing if

you want to go and create the ui part of

it it has forms if you want to go and

make an http call it has

you know http client and so on so a lot

of libraries out there by which you can

expedite your development and the last

one it has developer tools in order to

build to test

and a lot of other things right so

basically angular is a development

platform and it is built on typescript

we are going to go and learn typescript

in the coming one or you know in the

coming 20 to 30 minutes so angular is a

development platform which is built on

typescript and this development platform

helps you to helps you to create the ui

part of the application remember that

angular's main focus is to create the ui

part of the application and it has three

things first one it has a very nice

well-structured framework

which is actually called as a component

based framework second it has a lot of

reusable libraries right so it has a lot

of reusable libraries by which you can

go and make http calls by which you can

go and do validations by which you can

go and do routing and the last one is it

has

awesome developer tools out there you

know to build to test and so on right so

that's what angular is it is a platform

which has a structured framework

a reusable library

and well-defined tool sets

now in case if you have not understood

the definition in case uh if you have

understood the definition partially

don't worry about it later on you know

we are going to go and revisit this

definition

uh by by looking at the code so at that

time that would be more clear visibly

right

um now before we start uh you know the

installation of angular and so on i want

to make a very important statement and

this statement

especially you know people who are new

to angular

they have to

get this statement you know because i've

been teaching angular for past now

almost

10 years 2010 angular 1 was launched

and after some years angular 2 family

the new family was launched right

one of the things you know which i've

learned about angular when i whenever i

have t whenever i have been teaching

students is that

angular is very easy to learn it is very

easy to understand but it is very tough

to start

okay it is very tough to start learning

so it is actually very easy to learn but

it is very tough to start learning you

know in other words the prerequisite of

angular's angular the previous requisite

of angular is something you know which

sometimes you know

makes a developer really tired or they

lose stamina right so uh the first thing

you know what in the prerequisite is you

know the installation

right

the installation is not that complex you

know

we need node uh we need vs code we need

angular cli we need typescript

you know but

you can get you know some of those

exceptions and some of those exceptions

are so weird and so

bad right you know you can

if some of the versions don't match

right it can really lead to a problem so

the first part is the installation

the second is you know we have to

understand a node right and we should be

able to use npm

very effectively right so the second

thing is that we have to understand npm

right we have to understand little bit

of node now remember that node we have

to just understand what is node

but npm part the package.json part we

have to understand in detail right

after this you know we have to

understand uh something called as

typescript you know because the complete

angular is based on typescript so this

is again

uh you know one more prerequisite

you should learn and at least the basic

of typescript uh how to compile

typescript you know what exactly is

typescript you have to understand

and then you know you have to uh

understand the angular cli so basically

how to use angular cli how to install it

and so on and after that

you can start learning

right

so what i mean to say is you know the

angular is easy to learn

but

it is little bit

i'm not say tough you know but

definitely you know there is a long way

you know to start learning right so

these are the prerequisites so what

we'll do is we'll first

in the first one hour right so let us

let us keep a target at least for the

coming two hours so in the first one

hour

we will do the prerequisite we will

understand uh

you know all these things and then in

the next one hour we will do the

learning right so this coming two hours

is divided into two parts the first one

is

the prerequisite right the learning of

the prerequisite the installations and

so on and then the next part is we will

start learning right so if you look at

the syllabus so here's the syllabus i

have

for the coming

two hours you know this is for the

coming two hours my syllabus

we have already done with what is

angular we have looked into prerequisite

so the first 25 minutes you know we'll

spend a spend on installation then after

that you know we'll try to understand

node and npm that will take 15 minutes

then we will look into typescript you

know that will take more 15 minutes

then we will go and install

angular cli we will look into how to

create a project that will take 15

minutes and then after that we start

understanding the project of angular we

start getting into important basic

concepts like decorator components

modules and directives

and then we will look into angular

bootstrapping flow we will look into

bindings

we will look into different type of

bindings we will create a simple simple

uh project out there you know where we

will do table binding logic and so on so

this coming two hours you know i have

divided this complete lecture into ten

sections

in that you know the first fifty percent

of the ten sections

will go into the angular prerequisite

right

and the next fifty percent you know we

will learn right

and

let me assure you let me assure you one

thousand and one percent

that if you do this two hours

religiously

religiously right

you should be inside angular and what

you can do is you know to complete the

first two hours what you can do is you

can go really slow so you can say that

okay today i will just do the

installation 25 minutes

just do the installation go back relax

have tea coffee have fun

go for a movie enjoy your family then

after two three days come back and say

okay let's do the next 15 minutes and

then let's do the next 15 minutes and

then do the next 15 minutes go slow go

nice don't lose stamina the next 15

minutes

and you should be able to achieve your

goal right

so

with all that

right let us get started with

the next part the installation of

angular

so the first step is to install vs code

so go ahead and google

vs code and you will get this first link

out here visual studio code you can

click on this link

and

you can see this is a visual studio code

or code out here and you can see the

small link out here download for windows

table build so go ahead and it will

start downloading right

now very important note out here until

our until vs code gets downloaded there

is something called as vs code and there

is something called as

visual studio

right

so you can see there is this visual

studio out here now you shouldn't be

installing visual studio visual studio

is very good you know for shisha for mvc

definitely it can do angular as well but

for now

you should be installing vs code and

they all belong to the same family they

all come from microsoft right

but

this is what our choice should be vs

code right so please make a note of that

vs code is different and visual studio

is different so vs code is this

right

so once you once you download vs code

you will get such kind of a setup so if

you go out here you will get a setup

like this

now remember that at this moment my

machine is of 64 bit so i have 64 bit

in case your machine is not 64-bit then

the appropriate download should be made

and if you have any problem with the

installations you can please send us a

mail at questpond questpond.com i'm more

than happy to help you so i'm going to

go and run this

i accept now remember that vs code

installation is damn simple you have to

just press next next next it's

it's just a very smooth installation so

next

uh do you want to create a desktop icon

yes why not

add to path variable so all that

keep it checked

say next and install

now once the installation

finishes right so you can see your

installation finishes and you can see

that there is a small check box out here

saying launch
visual studio code

now either you can click on that check

box or you can just say finish right

and you can go out here and you can

search if vs code has been installed if

vs code is installed you should get an

icon something like this you can see

there is a

there is this

app out here visual studio code which

has been installed

now one very important point whenever

you are opening visual studio code for

coding right either angular or react or

anything right i would always advise you

to open visual studio code in admin mode

right so always run in admin mode so i'm

going to go and say run as an

administrator this is a very important

step specifically for angular a lot of

time you do installations and for those

installation you need admin rights so i

would suggest that run visual studio

code as administrator so i'm going to

say run as an administrator

and

there it is so that is that you can see

vs code is now running right

so uh

first thing what you see you see

something called as get started out here

you can just

just just close it right

now let us go ahead and create a folder

so i'm going to go and open a folder now

remember in vs code you don't open a

project you don't

open solution files you open a folder

right so all your source code is into a

folder so i'm going to go and create a

folder out here so very quickly in my d

drive

let me create a folder out here saying

learn angular

and

whatever code we write right we will be

writing in this

folder out here right

so i'm going to go and select folder

now you can see there's a small box out

there it says do you trust the authors

of the files in this folder yes i trust

right i trust and i'm sure that you know

there won't be any viruses or there

won't be any kind of code you know which

will harm my computer right yes i trust

the authors right

and we can close this so you can see now

at the left hand side you have an

explorer out here with this learn

angular

and you can go and you can create files

in this folders out here right

now

in case you're new to vs code you don't

have to worry too much

whatever i'm doing in this demo just try

to follow that right so one is this

explorer out here you can go and you can

create a file here for example you can

go and you can create a file here let's

say

index.html right

and

you can say control plus in case if you

want to make the fonts bigger

and

you can write html code out here so you

can see

it does have some basic intelligence out

here

so if you say doc

that is a code snippet as well

it just gives you the code snippet right

so basically in vs code you open a

folder and then you right click you

create files you create folders right

if you right click and if you say reveal

in file explorer you will see that

that index.html file is out here right

so one is you have to understand how to

open a folder in vs code how to create

files right

and the second important thing which you

should be knowing is how to use

terminals so if you go here there is

something called as a terminal so just

click on new terminal

what is the terminal a terminal is

nothing but it is the command prompt you

know from which you can fire commands

you know so for example in this command

prompt i can go and i can write commands

like directory and i can see my files i

can go and fire my node commands and so

on right

so two important things in vs code one

is open a folder

create files

and

run the terminal

and you should be able to run the

commands

now the next step is to install node.js

so go and google node.js

and you will come to this first link out

here nodejs.org

and then you will see that there is

something written about node.js over

here

at this moment don't worry about what is

node.js what is npm what is typescript

you know

just focus on the installation part

once the installation is right you know

later on i'll be explaining all of these

concepts very much in depth

now if you see out here you will find

that there are two downloads there are

two links out here

one is recommended for most users and

the another one is the latest feature

right

now if you are working on live projects

if you are working on serious projects

right i would suggest to use this one

which is recommended for most users why

because this is a stable version it has

been time tested

bugs have been removed and so on but

when you're learning something

if you're doing something kind of a

hobby project you know if you want to

test things test new features right then

you can go and install the latest

feature but please note that there is a

probability that it can have bugs right

now because we are learning and i just

want to make sure that this course stays

for a little bit of long time right uh

what we'll do is you know let us go

ahead and install the latest current

latest feature right so i'm going to go

and install this 18.0.0

now please note at this moment the

version is 18.0.0 later on it can be 20

or whatever right

but i think you know whatever i'm

teaching here at this moment in angular

for angular right those things won't

change as such right

and if you think that something have

changed right please send us a mail at

quespondquest1.com i'm more than happy

to

uh

tell you how to overcome how to go about

those new things right

uh those new uh new changes so i'm gonna

go and download this

so if you go and download it you will

see that it's uh it's downloading down

right down below and

let us go and do the installation again

the installation of node.js is pretty

straightforward you know that is

nothing
you don't have to

do anything big out here it is just a

smooth next next next screen so i'm

going to say next

i accept

next

you can change the directory if you wish

but at this moment i will just keep it c

program files node.js next

just keep it as it is next

automatically install these tools like

chocolaty and so on chocolaty and so on

no i don't want it

let's keep it let's keep it unchecked we

say next and install

so there it goes

and

you can see node.js has been

successfully installed great

now let us go ahead and check that if

our node installation has been done

properly or not so i'm going to go and

first search out here node so

i should be able to find this small app

here installed so i can just go and

click on it

so it says here version

8.18.0.0 which is right that's the

version i had installed right

uh
and the other thing which i would

recommend you to also check is go and

run the command prompt run the command

prompt in admin mode

run vs code in admin mode remember that

i will not repeat this thing again but

it is the most important thing a lot of

lot of those issues of admin rights will

get resolved if you do this a lot of the

issues of installation can be overcome

you know if you just say run this admin

so i'm going to say run as admin out

here

and let us go and check you know the

version of node so i'll just say node

hyphen v

in case you are not able to see this let

me go and make the fonts bigger a little

bit larger

right so there it is uh it's not

hang on

font

let me get seven the 72 is too big

24

right so you can see here guys i hope it

is more clear now node hyphen v and just

press enter

ah sorry

clear screen
let me again say node hyphen v so you

can see here it is showing version

18.0.0

now also one of the other things you

know what we need with

need for angular is npm node package

manager now this node package manager

you know gets installed with node so

with node this npm

uh module gets installed right so let us

go and check you know if the npm mode is

also installed

so that it so there it is you can see we

also have npm now you can see the

version of npm is different than node

this is very important so don't think

that the npm and the node version will

be same because they are the same

software

but they are different actually so node

is on

zero point zero and your npm version is

on eight point six point zero right

so good so that

this this actually confirms that your

node has been installed properly right

the other thing what you would like to

do is we would like to go to vs code and

just check

the node from vs code as well right from

the terminal so i'm going to go and

launch this terminal out here terminal

new terminal

and let us check you know can we run the

node commands from here so i will say

node hyphen v

now you can see here it's saying oh like

i don't understand node what happened

you know and so on the term node is not

recognized and this and this and this

right now

uh

a couple of things out here uh first

thing if you see at the right hand side

now be very careful out here

it says powershell

right

it says powershell so i would suggest

that uh to not use powershell but use a

simple command right so i'm going to go

and delete this command prompt out here

and delete this terminal right and uh i

would like to

uh

switch to simple command prompt right so

you can see a simple command prompt so

now you can see there are two command

prompts one which is a powershell i will

talk about powershell later on but at

this moment

to make sure that

node is installed we don't need this

powershell command prompt we just need a

simple cmd the cmd which we ran from

outside that's what we need right so let

us go and check out here node hyphen v

if it is running then it is good you can

see again it is showing me an exception

saying that no i don't recognize it

right so that means there is something

else

now what happened is you know when i

installed node my vs code was open

i repeat this

and i did it on purpose actually

so when i installed node my vs code was

open so i'm going to go in and close

this and restart my vs code right so i'm

going to go and restart my vs code now

remember again run as admin i'll not

repeat this again but i'm still

repeating it

you know for the good of everyone so

i'll just say run as administrator

and now let us see so you can see there

is cmd out here let us do a clear screen

cls clear screen and let us say node

hyphen v

and now you can see our commands are

running npm hyphen v our commands are

running right

remember that you can also run this

through powershell but sometimes you

know for some reasons it does not run

for example now you know even the node

commands will run from powershell right

but i would recommend that that stick to

cmd because powershell

is actually

for something else right so we'll talk

about that later on but but try to be on

cmd rather than on powershell right good

you know so this confirms that our node

is installed our npm is working and it

is working in an integrated manner in

other words we can fire the node

commands you know from vs code

so uh that confirms that our node

installation our npm installation and

our vs code installation is just perfect

so we have now installed

vs code

we have installed node

we have checked the version of node and

npm now it is time to install

angular cli

right so i'm going to again clear screen

out here
and let me do a control plus you know

just to

make sure that you can see the clear

screens clearly so

control plus to

make the fonts bigger

control minus to make the font smaller

vs code right

so let us go and install the cli so we

will say here npm

install

remember npm is a part of node right

hyphen g

at the rate angular

front slash not backslash front slash

cli

watch this command clearly watch this

command again npm

install hyphen g at the rate angular

slash cli enter

now remember that this takes a little

bit of time to install because

the size of the cli is a little bit big

right depending on your internet

connection

it can take one minute to two minutes to

five minutes as well right

so that it is it is getting installed

now if everything goes good right

you should not see any red signs out

here so you can see at this moment

i'm seeing some warnings but that is

absolutely fine right i'm seeing

i'm not seeing any red signs i'm just

seeing some blue signs out here

or maximum you know you can say there

are warnings right

but i don't see any red signs if you see

a red sign then that's a concern right

so that's the you know so

you can see here it's saying added 196

packages

audited them as well and everything

looks good right

again i'll clear screen out here now in

order to go and check you know if our

cli has been installed we will fire the

command

ng hyphen v

ng this ng comes from that angular in

the word of angular we have that ng so

that's why you know they kept the same

they kept the cli name as ng the

commands of the cli is ng so we'll go

and we'll say ng hyphen v and let us

check

oh i'm sorry it is ng version

so sorry you know like node hyphen v npm

hyphen v right so i i i just got carried

away so ng version i'm so sorry ng

version

and

we should see

here

the version of our cli so you can see

here

uh it says that

your cli version is 13.3.4

your node version is 18.0.0

and your npm version is 8.6.0

and it has installed you know some

angular semantics out here

so uh that should be okay so remember

that this is the most important part so

just make sure that you have

this version of the cli you have this

version of the node and this version of

the npm right now remember that

definitely in the coming months you know

there are going to be higher versions

but you don't have to worry whatever i'm

recording at this moment is

very much true for the coming higher

versions as well in case if there is any

changes i will

send an updated recording for it right

so

that's that's

those three versions out there

if they are all okay

if you are able to fire fire this ng

version command that means your angular

cli has installed properly right ng

version

right

and remember that you can use the up

arrow key so you can use the up arrow

key and the down arrow key

to get the previous commands you know

which you have fired on vs code so you

can see here i'm getting all my previous

commands you know which i have fired in

my vs code right

so up arrow key and the down arrow key

will help you to get

the commands you know which are written

previously in the command prompt

so now that

we have installed the node we have

installed cli it's now time to go and

test if we can create our

sample

angular application right so i'm going

to go and type this command ng

new

project name is test

so ng new test

and then just press enter

you would be now prompted with couple of

questions out here don't worry about

these questions when we start learning

angular i believe i will

go through each one of these options for

now just press enter

enter and enter right

if everything is good out here if

everything goes

nice if you don't get any errors you

will see at the left hand side a test

folder has been created

and

you should see such kind of a folder

structure test src right

and you can see down below it is showing

installing packages npm so let this

complete this takes

uh quite a bit of time depending on what

your internet connection is right so at

this moment i have a decent internet

connection so must be it will take a

minute for me but in case you are having

a little bit slow internet connection

then it can take a lot of time right so

if everything is good then this

installing of the packages everything

works fine and you should see that

your command prompt or your console over

here the terminal over here should not

show any red signs

so

there it is it is installing

and you can see now everything has been

installed successfully it says

packages installed successfully right

so and everything is green out here if

you see anything red out here that means

there is a problem and when you have a

problem in case you know when you have a

problem

what you have to do is when you are

actually interacting with us on the

email you have to first tell us

what is your node version

right

this is the first thing you will tell us

what is your note version

right and what is your

cli version right

so you know this actually clarifies you

know a lot of things for us that why

uh your project is not getting created

okay

because most most of the errors what you

will get out here is because you know

there is a mismatch between the node

version and the cli version which you

are trying to install okay

so good

now the project has ran right so let us

go and do a directory directory actually

shows us all the folders so we can see

the folder test out here

the next thing is to run the final

command and run the angular application

so

you will go and you will say change

directory test

this is a very important step

whatever project name you have created

you will say cd test

you will go inside that folder and you

will fire the command ng

server ng serve

what ng serve command will do is it will

actually go and run this angular

application and make sure that your

installation is complete so you can see

i've done an ng serve

and it has

made the application live in this 4200

port now please note that at this moment

when i did the ng surf command it was

quite quick right but depending on your

configuration of your machine

or depending on your speed of your

machine it can take some time right so

so little bit of patience is needed so

i'm going to go and run google chrome

and let us

go and paste

this

url out here http localhost 4200 you can

get this url

from

[Music]

this console out here in case not you

can type it out http localhost colon

4200 enter

and if you see your first angular

application running if you see the

screen out here

this is

this is the sign that your installation

of your angular is complete

now couple of important things to

remember

you definitely get errors right

so couple of important things to

remember first thing

when you actually go and fire the

commands from the terminal

make sure that you are on cmd you are

using cmd so basically when you actually

go and say new terminal

right make sure that you are adding a

command prompt
you are running your ng commands through

a command prompt and not through a

powershell

if you are running through powershell

right if you are running through

powershell

then you can get certain errors like you

know for example

if i do ng new

xyz

you can see that i'm getting this error

out here

saying that

see users share

ng.ps1

cannot be loaded the file is not

digitally signed and so on and so on and

it's saying that please set your

execution policy

right so in case you are you want to

fire from powershell remember what is

powershell powershell is nothing but it

is a scripting language

you know which can be used by

administrators to automate tasks so for

example let us say

you want to go and

backup a file regularly every evening

you want to go and restart a computer

right for so
the administrators can write powershell

scripts and they can run those scripts

through the powershell command so in

case you know if you are on powershell

right and if you get those errors you

can see i am actually

uh

you know having a stack overflow link

out here the stack overflow link is also

there uh you know present in the notes

as well so over here right

then couple of things you can do is you

can either go and remove the ngu.ps1

from that roaming folder right

or what you can do is that you can run

the powershell you know through this

elevated command so basically you will

actually go and

the execution policy of the powershell

command you will

actually uh

elevate it right so i'm going to go and

do this so i'll say clear screen

and

so you can see here even the ng version

any any commands of ng don't work

anymore right so i'm going to go and

paste here and run this

once you run it right

now i should be able to get ng version

let us see so that it is it is working

now right so in case if you are getting

this error out here the one of the

things what you can do is you can go and

you can run this command set execution

policy

right

or what you can do is you can go and you

can remove this ng one dot

ps1 and you can do an npm clear cache

also if you want right

uh and that again probably can work so

these are the two solutions

which you can implement you know

in case you are getting this error out

here but i would say the best is to run

the command then the

through command prompt through the

normal

uh cmd to avoid avoid these issues right

but in case you are running from

powershell

just make sure that

you are running the set execution policy

or you try the ng.ps1 delete

so let us summarize the installation

first one you have to go and you have to

install

node
you have to go and you have to install

node right

second thing you will go and you will

install

the cli so you will see npm install

angular cli npm install

hyphen g

at the rate angular

slash cli

once this is done you will go and you

will do ng new

test

you will go inside the test folder and

say ng run

and once you do an ng run

right

you should be able to see your angular

application if you see your angular

application running that means that

your angular installation is proper and

complete

so let us first start with node.js let

us try to understand

what exactly is node.js right so if you

go to nodejs.org you will see this one

statement out here the one slogan in

which they have written

node.js is a javascript runtime built on

chrome's v8 javascript engine so we all

know chrome browser which comes from

google right in that you know we have a

very

strong compiler or you can say

interpreter which is the v8 javascript

engine right and this weird javascript

engine you know

it it is it is super fast you know why

because

what it does is you know it basically

takes javascript

and it generates byte code you know from

the syntax right and then this byte code

is compiled to machine code this is very

important this byte code is compiled to

machine code so think about it if

javascript gets compiled to machine code

it can run super fast isn't it

okay

now

and that's why the engine's name is v8

remember this v8 is not version 8 but

this v8 you know

signifies like a eight cylinder

engine right so we have like

a two cylinder engine we have four

cylinder engines in automobiles and you

know here we are talking about eight

cylinder engine

that means this is eight cylinder engine

super fast compiler which actually

compiles the javascript you know to

machine code right and uh just quickly

out here you know if you see all these

statements you know uh by the va team

out here looks like you know they are

fan of automobiles so you can see the

ignition generates the byte code and

then the turbo fan compiles this byte

code and this v8 you know which actually

uh is nothing but the super fast

eight stroke engine right out there okay

so uh so that means uh

that the best

compiler or the best interpreter for

javascript is with chrome right so what

the node.js team did is you know the

node.js team took this

uh chrome v8 engine only the chrome v8

javascript engine and created a separate

setup

and that's what the setup we have just

installed right so you can think about

this node.js is i'll not say exactly

like a rapper but definitely the heart

of node.js is the v8 engine so

the one which we have downloaded in our

computer right during the installation

process is nothing but

it is

the super fast v8 javascript engine

right

now uh the next question comes is then

so what will happen now right so we have

installed it what happens right

that means that you know we can now run

javascript outside the browser because

we have the v8

engine or the javascript engine

installed in our computer

and we have the best javascript engine

which is installed in our computer

which is in a form of node.js we can say

so that means we can run javascript

outside the browser

we can go and we can create desktop

applications uh we can create server

side applications

and so on right

and one important point you know which i

want to stress out here is

if you watch out there

when it comes to debugging javascript

99.99 developers i have seen use chrome

to debug javascript

and one of the reasons you know why they

use chrome to debug javascript because

it because of this v8 javascript engine

because
it is so

so strong you know it can compile to

bytecode and so on right so if you see

most of the time developers actually

swear by chrome you know when it comes

to debugging javascript they go to the

sources tab out here and uh you know

they click on this debug tab and they

debug

inside chrome why because

the v8 engine

is very promising right

so uh let us go ahead and do a small uh

demo of

node.js right uh so with that you know

we'll understand that how node.js helps

you to run javascript outside the

browser so what we'll do is in the same

learn angular folder uh let us first

think go ahead

and delete this two files what we have

here remember this was the test folder

which was created right so this was just

to test that if our installations are

proper right and index.html i had just

created right so i'm going to go and do

a shift delete out here

and i will just delete this

complete two folders out here

and

so let us go ahead and create a simple

javascript file here so we'll just say

test.js right

and in this let us go ahead and write

some javascript code so i'll say here

where

x is equal to 0 and control plus

and i'll say

console.log and i'll just say show me x

right and we can just do an x plus plus

right so now you can see here i have

this javascript code out here

uh

you can see now the files got deleted

you can see how vs code

strikes this

index.html indicating that this file is

not available right so i'm going to go

and close it left hand side everything

is cleared right so here it is i have

this simple uh

javascript file here test.js and let us

say we want to now go and run this so in

other words we want to run this without

opening the browser right so we can say

here node and we can say test.js

and you can see out here it has

ran ran the code out there so it

incremented the x21 and you can see it

is displaying

in the console console.log right

right so now this example you know looks

very simple but

you can you can feel the power of

javascript running offline and once

javascript can run outside the browser

you can create desktop applications you

can create server applications and so

many other things right

now one a small question out here which

i want to ask to everyone if you know

the answer

you can either go and send me a message

privately or either you can put down in

the comment section that basically

why i did not use your

document.write why i did not use your

alert

why did i use console.log right so if

you know the answer uh please go ahead

and

send a message to me or if you want you

can go ahead and put down in the comment

section as well

now node programming is a very different

big world altogether and when you say

you want to work with angular you don't

need node programming as such right so

we will not be doing node programming

but when you install node we get

something called as npm that is a node

package manager so we need to understand

that very well

npm you're going to go and use day and

night you know when you're when you're

doing angular right so what is npm

npm which stands for node package

manager helps you to install javascript

package in your computer so for example

now let us say you want to go and

install jquery so what you can do is you

can go and say here npm install

jquery so once you go and you say npm

install jquery in your command line and

you say enter it will go it will fetch

jquery from online and install it in

your local machine so you can see here

at the left hand side it has created a

folder node underscore modules and it

has installed jquery in your machine

now if you don't have npm what you have

to do you have to go to online you have

to go to jquery wherever it is right get

that jquery file and then you can use it

in your project right so let us say i

want to go and uh

install

let us say load ash right so i can see a

low dash

and i'll say enter it will go it will

fetch online it will take up the latest

version of low dash and install it in

your node underscore modules folder you

can see

this node underscore modules folder is a

reserved folder the name is n o d e

underscore modules all small letter

right so you can see here it has

installed jquery as well as it has

installed load ash inside the folder

now what you can do let us say if you

want to go and use jquery then you can

go to the disk folder and you can get

your jquery.js from here

now remember that whenever you're doing

an npm install it actually brings the

whole github source code so you know the

complete source code of that open source

it will it will bring to your local

machine so you can see it it has fetched

the whole jquery with not only the

source code this is the source code of

jquery

but also the the compiled files the

finally compiled uh js as well right so

now if you want to use jquery for

example in your
project right you will say index.html

and

so

at this moment jquery final compiled

jquery is available here

in the dist folder jquery.js

so as a developer you can go and say

script you can say src

and

then you can just say dot dot slash

uh

node underscore modules uh sorry

dot slash node underscore modules and go

to jquery go to dist

and take your jquery.js right

so

this is these are your packages and this

is your source code right

these are the packages

and this is your source code

now you will also find a file here

called as package.json

right what is this package.json file

this package.json file has the list of

dependencies which you have installed in

your project folder so this is your

project folder now learn angular right

this is your project folder in case you

want to directly open the folder through

vs code right click and say reveal in

file explorer so if you do that

you can see your folder opened out here

right click reveal in file explorer so

inside this project folder you know

whatever dependencies are installed in

the node underscore modules whatever

packages are installed in the node

underscore module is present in the

package.json

now what happens you know practically is

that

you always check in

into your source control in your source

control you will only check in the

source code your source code of the

application and package.json that's it

you won't be checking in no underscore

modules

you never check in java runtime or

dotnet runtime into your source control

right so you only check in the source

control

the source code i'm sorry and

the dependencies so what happens now is

let us say you go to a new machine out

there

and you

get latest the source code and you get

latest the package.json file right and

then you have to only go and say npm

install

once you do an npm install

it will

bring all these dependencies into node

underscore module so you can see here if

i do an npm install

it will

go package by package and

bring these two packages

into your road underscore module right

so package.json has a list of

dependencies

of your project folder

the last important prerequisite

before we start learning angular is

typescript right so you can see here i

have google typescript and it actually

lands up on this first page out here

and if i click on this typescript out

here it takes us to the typescript

homepage or to the typescript's official

website typescriptlang.org

and if you see this one big slogan of

typescript which they have written out

here is typescript is nothing but it is

javascript so basically typescript is a

language

uh and that language when it gets

compiled or it gets converted i will say

rather or transpiled it gets converted

to javascript

with

strongly type with syntax for types so

typescript is a strongly typed

programming language that builds on

javascript

okay so what does it mean let us let us

try to understand it so let us go out

here now when you look at javascript

right javascript is a

loosely typed language right

in other words you know it does not care

about the data types that you can change

the data type during the runtime for

example you can see this small test.js

which we had written previously so in

line number one when you say where x is

equal to zero it is a number

right

but you can see in line number three

when i say x is equal to some text out

here

okay

this

becomes a string

right

so javascript allows this javascript

does not complain about this means it

will not it will

in line number one it will be a number x

variable will be a number and in line

number three x will be a text and

javascript will not complain about it

you can just go and run test.js and it's

all okay so you can see here it has

displayed x it has not complained

nothing right so javascript is a

is a dynamic language the data types can

change during the runtime right

now definitely you know dynamic

languages have their own

positive points you know they have their

own strong points right

but there is another

group of developers who believe in

strongly typed language so in strongly

typed language once you create a

variable and you define a data type

you cannot change that data type

right for example here let us say

if you know due to

let's say that in line number three if

somebody says x plus plus

this can be problematic i mean like

you can't increment a text as such

because this uh this increment operator

is mostly on numbers right so now what

happens out here is you know

you see you can you you get some you can

get some unwanted results like nan not a

number right so definitely one of the

strong points of dynamic language is

that you can code faster you can deliver

faster it is dynamic it is like cool

like breeze right but at the same time

you know the way it is cool right if you

don't pay attention uh

you can have bugs you can have unwanted

side effects so there is another group

of

thought of people or thought of

developers who say that no

we understand that dynamic languages are

good but we want it to be a strongly

typed language we want that the data

type should be checked

you know right while we write the code

and we shouldn't be allowed to change

this data type this should actually

throw up an exception

that's where actually typescript comes

into picture timestudio says that i will

give this strongly tightness to

javascript so typescript makes your

javascript strongly typed right so now

let us see how to go and install

typescript so if you go out here you can

see here either you can go and you can

play on the browser and another one is

you can use npm so on your computer via

npm we can go and we can install

typescript so we can say here npm

install typescript right uh so let us go

ahead and install typescript so i'm

going to go to my local machine out here

and say npm

install

type script

right

so there it is you can see it has

installed typescript uh now

you can see that it has installed

typescript in my local folder out here

right

uh what i will do what i will do out

here is uh i would like to go and

install typescript globally so that you

know i can just fire the commands easily

or else what i have to do now is i have

to go to the bin directory i have to go

and get this exe from here right so uh

let us go ahead and install typescript

globally so i'll just say install

uh typescript

uh

typescript hyphen g hyphen g means

global right so with this what will

happen is i can just fire the typescript

command right from here in the command

prompt or else i have to go inside this

folder and fire the commands right

so now let us see

let us go and check the version of

typescript

tsc hyphen v so that is you can see it

has installed the 4.6 version which is

the latest version

so if you want to go and do coding in

typescript you have to go and create a

dot ts extension so we can go and we can

say learn one dot ts

so you can see now this is typescript

with the dot ts extension

so now i can go and i can

define a variable and as we said that

typescript is a strongly typed language

i can go and i can define its data type

so you can see i'm saying that this x1

is a number right so when i say this x1

is a number uh and if i try to give it a

text so let's say in line number two if

i try to give it a text out here you can

see that there is a small

red wriggle out here and if you move

your mouse on that red wiggle

it is saying that no this is not allowed

x1 is already a type number and you are

trying to assign a string

and typescript is a strongly typed

language and it will not allow it so

remember

typescript is javascript with syntax for

types

so what does it mean that type should be

javascript so for example here now let

us say

i go and i say x1 plus plus right

i can go and i can convert this

typescript to javascript so i can go

here and say that

tsc remember that is a compiler and if

you say learn one dot ts so

compile this ts right what it does is it

actually goes and creates a learn one

dot js

so you can see that it has

it has i will not say it's compiled

compiled means basically uh to deal with

assembly languages where you compile to

machine code i'll say that the convert

or transpile transpile is the right word

so it has taken this dot ts file out

here and transpile it to js so you can

see it has made a javascript out of it

so remember that uh this typescript is

only during the coding phase it is only

for developers who love

strongly tightness you know strongly

typed

a strongly typed kind of an environment

for them typescript is there right but

at the end of the day when you say you

want to run inside the browser it has to

be javascript okay so that's why you

know this type should compiler converts

this ts into javascript so now this

sentence would make a lot of sense

typescript is javascript

first point right and second

but

it

gives you that feeling of strong

tightness and with that you know uh you

will have less bugs

with that you know you will you would

feel comfortable so especially people

who are coming from c plus plus and c

sharp and java you know where they feel

that strongly tightness is important to

catch the bugs early

to have any kind to do not have any kind

of unwanted side effects for them

typescript you know makes

gives gives like a cover on javascript

and gives that strongly typed

feeling now

if you look at the definition of

typescript again right there is one more

important word out here which says that

it gives you better tooling at any scale

so what does that scale mean scale means

that you know basically it increases the

productivity of the developer

if you look at javascript right

javascript is a functional programming

language it is a functional language

right

and if you look at look around right but

devs who come from c plus plus who come

from shisha who come from java and so on

most of them are object oriented

programmers at least i feel so eighty

percent

of the devs you know love objective

programming they understand classes

uh they they can write better code you

know by using those concept of objective

programming like polymorphism

inheritance encapsulation abstraction

uh you know they use interfaces and

abstract classes and so on right so

suddenly when you tell them okay go

ahead and

have you know the same productivity and

write the code in javascript functions

it becomes difficult you know for a

person who is doing functional

programming it is little bit difficult

to get into object-oriented programming

and a developer who is doing

object-oriented programming it is

very difficult for him to perform at

that same scale

uh you know when it comes to functional

programming so what type suite says that

says don't worry go ahead write your

classes do inheritance do polymorphism

write interfaces write abstract classes

no worries and i will ensure that i will

compile it or i will rather say

transpile it and convert it to

javascript right so you can go here and

you can write your class let us say

customer

and now let's say a customer has a

property name now remember one very

important thing in typescript

first the name of the variable and then

the type

normally what we do we say like int i

but in case of javascript it is first

number so first the name and name of the

variable and then the data type so i'll

say your name

string

right

then i will say code

string

right

and i can also go and

perform inheritance so i can say

customer child

extends

customer

right so

i can do inheritance i can write

interfaces right so i'm going to have a

separate lecture on typescript don't

worry about it here i'm trying to just

make you understand that it increases

the productivity of the developer as

well right so if i go and if i compile

this

learn2.ts right

and if you go and if you just see this

learn2.js my god you can see that

uh so it's it's writing functions it is

writing closures

it is using iffy

you don't have to worry about those

prototype and so on right so all of that

is all taken care of that so you can see

this is a
this is a function

inside the function which is a closure i

will not go into closures now i will not

go into

uh if he i will not go into prototype

right but the point i'm trying to make

here is that

you don't have to worry about it

actually right

typescript takes care of all that

right

and second you know it goes one step

ahead you know for example now let us

say

i have this learn 3.ts right

because one of the other things

uh what uh

the objective programmers like is you

know they want to create modules as well

so let us say you have this one file

here learn2.ts which has customer class

and let us say that the learn3.ts has

an address class assumed right so let us

say this is

address out here right so what you can

do is that you can go ahead and you can

say export so you can you can have these

two files separate modular right so you

can say export

and

in this learn2.ts you can say import so

you can say okay go ahead

and import

from that

learn

learn to dot ts

sorry learn three dot ts i'm sorry

go and import address class from it so

you can see your address and then i can

say okay one customer

but this one customer can have multiple

addresses so i can go and i can create

your

an addresses

array

so i can say array of address

right a collection of address and so on

so so you can see here

you can also create modular code so you

can write object-oriented programming

code you can write modular code and you

don't have to worry right you just go

and say compile this learn.2.ts

it will just go ahead and compile it

right so if you if you just see here you

can see now

very smartly what he has done is

learn2.ts is using learn3.ts

look at look at the smartness

so he goes and he tries to compile

learn2.ts and he says oh like learn2.ts

is using learn3.ts he also compiles

learn3.ts you can see he has

compiled3.ts

he has also compiled learn2.js and you

can see that he has also used the

address class

inside this

customer class out here right so you can

see that is an address out there

which is pointing towards the customer

dot address right so

by using the import and export you can

create nice modular

physically separate separate files as

well right and finally what at the end

of the day they get compiled to

functional javascript very easily right

so just going back to that definition

typescript is javascript yes

but it is strongly typed

right the types are checked during the

design time and most important

it it gives you a nice

artificial layer you know on which the

developers can go and write classes they

can do

object-oriented programming they can

create modular code you know by using

the import and export

and typescript will ensure that it will

convert it to javascript

now

when the typescript compiler compiles

the typescript file to javascript

i'm not sure if i should use this word

compile because compile means you take a

machine take a higher level language or

you take a code and you compile it to

machine language right here actually we

are converting typescript to javascript

so we can say

transpile you know so must be transpile

vocabulary would be a better word than

compile so when typescript gets

transpiled to javascript right it's a

quite complex process

and as a developer you know we would

like to go and take charge of this

process we would like to customize it we

would like to provide configurations we

would like to provide parameters for

example

i would like to go and

provide configuration saying that in

which version of javascript it should

compile means it should use the es4

version es5 es6 or which version

of es javascript should get compiled

right

so

in order to go and control this

compilation process or

configure this compilation process

typescript team has provided the

tsconfig.json file so let us go ahead

and create the tsconfig.json file for

that we have to say tsc hyphen hyphen

init

so what this command will do is this

will actually go

and create a ts config.json file you can

see here he has created a tsconfig.json

file

now in this you can see there are lots

of compiler options you know which are

given out here like you want to compile

into which es version and so on so let

us go ahead and

try to use one of them for example

let us try to go and say that whenever

the compilation happens whenever the

transformation happens right

put all the javascript into this output

directory called as dist

distribution folder you can see here at

this moment whenever i

go and i compile this type script it is

actually throwing the js in the same

folder right so must be we would like to

go and put it into

a separate folder right so you can see

here

i have provided in the tiersconfig.json

file saying that the output directory

should go the output directory is disk

so now what happens is if you now go and

say tsc now you don't have to go and

compile the individual files

wherever the ts config.json file is you

have to just hit tsc it will take

all the

uh

ts files and it will try to transpile it

into the disk directory you can see now

it has put all the files into the dist

folder

now you can see there are some errors

out here

but that's fine i think you know you can

see that there is there is an error out

here and

now this is very interesting you can see

uh there is this error out here in

learn2.ts right very interesting

and in this learn2.ts you know the error

says it's it's an error it says that

null is not assignable to address

right

now

this is interesting you can see that how

typescript is taking control

over the compilation process you know so

for example here now if i go and if i

provide your

new array of address this error will not

happen so if i go and if i do this

this error will not happen so if i now

go and hit

again tsc

you can see nothing happens here right

now what is this actually now here you

know when you actually specify null

in this dsconfig.json file

it is doing a strict check so here you

know basically

uh there is something called as a strict

check a strict check is nothing but

typefit goes and says that it will

strictly check you know if you are using

nulls

uh if you are doing any kind of weird

things you know he will try to

make it as an error he will try to warn

you right so over here if i go and if i

disable that strict check

to false

so let us go and see

somewhere there should be strict check

right

strict yeah there it is you can see it

is saying type checking strict equal to

true now what you would like to do is

you would like to say that c like

yes

i would like to use the strongly

tightness but at the same time you know

don't stop me from using nulls you know

because nulls are important in many

cases right because nulls define

an absence of something so i would like

to use nulls i would like to have my own

freedom right so what you can do is you

can go and you can provide you're saying

false

if you do that

then

you won't get the exception anymore so

now the type should compile will say

okay you said that

i shouldn't be doing a strict check you

know so when i do a tsc

no errors out there right so basically

this tsconfig.json file has lots of

configurations and you can go and you

can control and customize

the type speed transpilation process

now remember that you can see many many

configurations out here i won't suggest

to start going through them

now itself you know because that would

you would actually lose your stamina

what you can do is you can do late

learning late learning means you know

whichever properties are needed

we will look into it so when we do

angular write when we start with angular

actually angular coding there are some

three or four properties we

we need them on regular basis at the

time we'll discuss about it so for now

you don't have to really go into each

one of these properties and try to

understand them right but yes basically

overall you have to understand that if

you want to go and provide configuration

uh

and if you want to go and customize your

transpilation process you can go and you

can provide those configuration into

tsconfig.json

and typesfield compiler will take the

configurations from this json file

so now that we have learned so much

about typescript a small quiz on

typescript

who created typescript

and

you know just as a hint i have flashed

the hero of typescript on the screen

right so he is a danish nationality

he works for microsoft right

and

look at look at our hero right i mean

like he has created so many programming

language so that's really the

inspiration for us you can see that he

has created turbo pascal delphi c sharp

and now typescript

and you know what

age does not matter isn't it so if you

love programming keep coding right so if

you know the answer then please put down

in the comments below

who created typescript

now

in order to create a project in angular

angular developers don't create it

manually so in other words they don't go

and create a tsconfig.json file and a

package.json file so they don't do it

manually they use something called as

the angular cli

this angular cli comes from the angular

team so the cli stands for command line

interface

so

once you install the angular cli you

know you get nice commands out there you

know by which you can create the angular

project very easily

i've already explained in the

installation part you know how to go and

install the angular cli but just in case

if you have missed it

you can revisit it and just in case if

you know to just quickly iterate over

here i'll say if you want to install the

angular cli you will use npm npm install

angular cli and if you want to install

it globally you can just say hyphen g

which will install globally in your

computer right so for example now the

cli is installed in my computer in in

this virtual machine out here so if i

want to go and quickly check you know

the version of angular cli i can say ng

version this ng stands for the two

letter word which comes in angular right

so a n g u

l a r so that ng comes from that so if i

say ng version

it will quickly give me you know which

version of angular cli is installed in

my machine right so you can see it is

saying you have angular in angular cli

13 installed now remember that in case

if new cli versions have come in this

tutorial is still valid you know because

angular as such does not change so much

in inter in terms of the

terms of the syntaxes right so they are

quite stable when it comes to changes of

syntaxes right

okay so now that you have

you know the

angular cli installed

right now you can go and we can create a

project

now what

my belief is that if you want to go and

learn something then you should do a

project a do a project you know some

kind of a project like customer

management system

or a travel management system or a

hospital management system try to create

a small screen you know with a add

button with the update button try to

complete a crud application so if you

try to complete a credit application you

can learn quickly you can learn to the

point right so i'm going to go here and

create a hospital management system you

know i work day and night with the

health care system

with the healthcare domain

so

i would be pretty happy to use to create

a hospital system wherein we will create

a simple patient management screen where

we can add patients we can edit patients

and so on but in case if you like some

other domain please go ahead and create

project accordingly right so in order to

create a project we will say here ng new

and i will say

hospital

management system so hospital

management system let me create let me

write the whole word out there right

so there it is

now once you say ng new hospital

management system it will ask you a

couple of questions

the first question it is asking you is

that do you want to use angular routing

what is angular routing angular routing

is nothing but it helps you to navigate

it helps you to define your navigation

from one screen to another screen so

when you say you want to navigate inside

angular
components inside angular ui

right

that's where you use angular routing so

it's saying that i'm going to go and

create this project template do you want

to include angular routing why not yes

definitely we are going to go and define

hyperlinks we'll be defining navigation

so yes we want this

the next question which it will it's

asking is that

which style sheet format are you using

are you using css

are you using a css and sas unless uh

frankly you know the other three

frameworks of css i've never used it and

i'm sure that many people

stick to the basic css right so we will

go and we will select css in case you

know if you want to use

scss and last sas less what you can do

is that you can go and you can press the

down arrow key out there and you can

select appropriately but for now

you can use the down arrow key and the

up arrow key to select these menus but

for now i'm going to use css because

that's what i've used most of my time

and i'll say

enter
once you do that right it will start

creating the project right

so if you see at this moment inside

learn angular

you can see

uh this hospital management system which

is out here which is getting created

and

it has created this project out here

right and you can see it is the npm is

installing the packages as well right so

this will take some time so give it some

time you know until the installation

completes but you can see at the left

hand side the hospital management system

is created with the necessary code base

out here by which we can start angular

very quickly right

so let us give give some time and let

the npm install all the packages

and then we will proceed

so if everything is good if everything

goes nice you know you will see

everything green out here you can see

everything is green

and the project has been created at the

left hand side right

but in case you know if you find if you

see any issues then it should be shown

in a red color

remember there is a green color which

says everything is okay

there is an yellow color you know which

says there are warnings you know and

developers don't worry about warnings

but if you see a red color

that means you know it is something

alarming and you won't be able to

proceed so at that time you know please

send us a message and we'll try the best

to help you out

now one very important point to note

here is

that

whenever we create a project by using ng

new it creates it in a folder for

example i said ng

hospital management system it actually

created inside created it inside a

folder so if you want to go and run this

project you have to go inside this

folder for example i fired this command

from this learn angular folder

so

all the project is created inside the

hospital management system right so

whatever you typed in ngnew

you know whatever name you give to your

project it has created inside a folder

so if you want to go and run angular you

have to go inside that folder to run the

project right so i will say change

directory and uh

so we'll say here change directory

hospital

management system so let us go inside

the project

there it is and now here if you want to

run this angular project you will say

here ng serve

what this ng server does is it actually

goes and compiles this project bundles

it

does everything and runs your project

uh on a

on a mini web server

on a 4200 port

so if i do an ng server out here you can

see it is generating the application

bundles

it bundles the application and it hosts

it in this

4200 port out here you can just copy it

so we can just say control c

and we can

run it

in the browser so

uh i will i'll be using chrome right to

run and i would suggest everyone to use

chrome you know because when it comes to

debugging javascript chrome is

the king of it right

so if you run this you know that there

is your first project which is running

right

great

so

engine new to create the project and ng

serve to run the project now some couple

of uh

mistakes you know which newcomers do

a lot of newcomers you know they try to

run this run the ng surf command outside

the project directory so for example if

you try to do an ng serve like this for

example you can see here i am now

outside the hospital management system

so if i try to run and try to do an ng

serve out here i will get an error

saying that

i don't see the angular this is not an

angular project you know i don't find

any definitions and so on so this is a

very common error so if you get this

error that means that you are not inside

the project directory so go ahead and

change to the hospital management system

directory and then fire ng serve

and a couple of uh important tricks you

know which you can remember out here you

can use this up arrow key and the down

arrow key to get your old commands you

know which you fired

onto the terminal so you can see here

all my old commands whatever i have

fired into this terminal i get it right

so use the apparel key and the

down arrow key to get the history of

commands which has been fired into the

terminal right so uh i will go and i

will say change hospital management

system and if i do nd serve out here it

will work but if you do ng serve you

know where the project directory is not

there it will give you this exception

saying that

that the project definition

has not could not be found right

now what i will do is you know you can

see here that it's too much noise out

here isn't it

because we are also seeing the

typescript code out here so we want to

only focus now on the hospital

management system so what i will do is

i will go to the file explorer so if you

want to go and go to the folder you know

where the hospital management system is

you can right click and say reveal in

file explorer

and we will only open the hospital

management system folder so that we are

focused on the angular project so i'll

say file

open folder and i will just give the

hospital management system so that i

don't see the typefit code so you can

see here now

we are just seeing the hospital

management system out here

and

this looks pretty neat and focused isn't

it

so we don't see other folders and

we can be focused on the

angular code out here

right

and please note please run your vs code

in admin mode

please ensure that you have proper

rights right and so on already in the

installation i have talked about you

know what kind of problems you can face

uh when you run the ng commands and the

npm commands

great so now that the project project is

created now let's go and deep dive into

it let us try to understand that

what files are present in this project

where is the source code and how to

start with things

before we move ahead a quick quiz

name the creators of angular and name

the first website created by the

creators

so if you know their names please pay

them respect you know by typing their

names in the youtube section

remember we are learning their creation

and if you don't do not pay them respect

that's not human right

and just a hint there are there were two

developers and both of them worked in

google

so now let us get started uh with all

the different files

which are pro which are present uh

in this template out here right so let

us first start with package.json file so

if you look at the package.json file it

has all the dependencies of angular

right and in this you can also see the

angular version for example at this

moment i'm using the 13th version

and please note that in case if you see

a 14th version out here or if you see a

15th version out here don't worry you

know this tutorial

should still help you

because you know angular team does not

make

breaking changes as such at this moment

right so this tutorial is still valid if

you're if you're if you have the new

angular version here this tutorial

should be still be valid and it should

still work right so the first thing if

you see here in the package.json file we

have the angular dependencies out here

and by looking at these dependencies you

can clearly understand that angular is a

modular framework in other words the

team has created separate separate

modules out here so let us say

if you say compiler you know they are

put in a separate module angular

compiler if you talk about forms you

know it's in a separate section if you

talk about routing it is in a separate

section and so on so they have created

you know modules so the whole angular

framework is modular right so all the

dependencies in package.json file then

you have the ts config.json file

remember this is to configure typescript

and you have the angular.json file you

know which is to configure the angular

related configurations so three

important configuration files out here

one is the package.json file one is the

ts config file one is angular.json file

also remember in the

in the previous part of the video i have

also explained you know what exactly is

package log.json file right so you can

see this package log.json file where we

can see the exact version

uh which is installed by angular right

which is installed by npm

right now you can also see that there

are some spec files out here for example

you can see this ds

config.spec.json whenever you see any

kind of spec files out here for example

if you go to src also right you will

find there are some spec files these

spec files are related to testing

related to unit testing so so for now

you know if you see these spec files

just leave it at this moment you know

whenever we do unit testing i will talk

about the spec files right so

package.json for configuring the npms

the references uh the dependencies ts

config file to configure the typescript

and angular.json file to configure the

angular related things and the spec

files in which you see out here are

related to unit testing

now before we proceed right uh it is

very important to understand

you know some vocabularies you know

which are used in the angular community

uh with the word angular actually right

so we all know that there are two

families of angular one is the angular

one point x family which is the old

version so you can see this is

angularjs.org

which is the official website for the

old version and this is the new version

uh the angular 2.x family when you say

two point x means two point uh two point

zero and then three point of there was

no three point so four point x and then

five point x and six point x and now we

have angular 13 and we can have further

angular as well right so this is the new

version of angular so this is the old

version of angular which is angular one

point x family and this is the new

version of angular

now um

i have seen this you know when you

actually go out there and when someone

says angularjs

when they say angularjs they are

referring to the old version

when they just say angular they are

referring to the new version i do

understand

that the angular team has said to just

call it angular understood that

right but

you know this vocabulary still

is still there in the market you know

when i go to corporates for training or

for consultancy you know they say that

okay we have angularjs which means the

old version and this is the new version

where they just say angular so now

developers have stopped calling you know

angular 4 and 5 and angular 6 and

angular 13 they just say angular which

refers to the angular 2 point x family

right and this one here is the old

angular which is the angular one point x

family

and also as a note you know remember

that this angular

js which is angular one point x family

has come to

a support end so

in other words you know it's

like you know it's it's at the end of

life now end of life does not mean that

end of angular it means that they will

not support angular 1 i repeat that

you know this end of life announcement

is not for uh

how do you say it uh it is not for the

angular 2 point x family it is for

angular 1 so what it means is that well

uh you know the coding of angular 1 is

still accessible in github everything is

all out there you know but only that

no issues will be

will be addressed no pull request will

be made and so on right so uh there is a

discontinued support of angular 1 and

all the focus is now on angular 2 family

and let us not say angular 2 or angular

4 or angular 5 let us just say angular

and at this moment you know when i am

recording this video the new version of

angular is 13 and as i've already said

that in case even if 14 comes in or 15

comes in right this tutorial should be

still be valid

so

ts config for the typescript

configuration

package.json for the npm configuration

angular.json for the angular

configuration

tsconfig.spec file you know for the

testing purpose for the unit testing

and this node underscore modules folder

we all know this node underscore modules

folder has all the packages

so whatever packages are listed in the

package.json file out here

for example you can see angular

animation and angular common so you will

find that you know this is angular and

then you have the angular animation you

have the angular common you have the

angular compiler so you know whatever

dependencies are listed in the

package.json file

all of them are installed in the node

underscore modules folder

now the most important folder as a

developer as an angular developer for us

is the src folder

this is where

we have our source code this is where we

write our source code right so 99 times

you will be working on this src folder

so if you see in this src folder there

is an app folder

and inside the app folder you can see

there are certain files out here you can

see some html files you can see some dot

ts files you can see some dot module.ts

file so this is where you'll be spending

your

99 time you know coding angular

and creating applications and so on so

let us try to understand this app folder

in more detail

now before we look into this src folder

before we look into this app folder

let's revisit angular teams definition

for angular so you can see here i'm on

the official website of angular which is

angular.io

so please note the official website of

angular is angular dot io and you can

see here there's a small article on what

is angular

and if you read this definition of

angular out here

angular is a development platform built

on typescript

absolutely all this is typescript

and let us focus now on the first

sentence you can see there are three uh

what you call points out here regarding

the definition of angular but let's

focus on the first

line out here so angular is a component

based framework for building scalable

web applications

component

a component and component in angular is

the base

it is a fundamental on which angular

stands it's the basic building block so

what we'll do is let us go and focus on

this component so you can see here

in this src folder you know where we

actually will be writing our source code

you can see this

app.component.ts you know where

you know you can see the component right

so let us focus on this

this fundamental on this base on which

angular stands the component

a component

is a reusable ui logic

which can be loaded inside html which

can be loaded inside a browser

i repeat this definition a component is

nothing but a reusable ui logic you know

which can be loaded inside html which

can be loaded inside a browser so it

comprises of two things

one is it comprises of a view

which is which will be html right so

view or you can see an ui part

and other is at the back end it will

have logic so this logic will be

normally javascript

uh

and because we are writing in typescript

so we are using typescript but finally

that will also get compiled to

javascript right so a component

consists of a

a ui

plus logic in javascript right so if you

see out here this is a component out

here this is the class this is where we

can write

the logic and this is the html

so a component comprises of

logic plus view

a component comprises of

logic so this is the logic this file has

a logic app component.ts

and definitely this logic will then get

compiled to js because ts has to get

compiled to js and the ui part is in the

html

right so

if you see out here

this is what a component is this is a

component

and this component is connected with the

ui

right and this is the ui so what you can

do here now is you can go in

in angular and you can write some ui

logic for example let us say uh i'm

going to go and write a input type

button let's assume we

write a simple logic here like input

type button

and when you click on this button so

i'll just say value click

right

and we'll say here click

call some logic at the back end

call some logic

and this logic we write in the backend

component dot ts so this is the ui

and

at the back end in this class

we will go and we will write this call

some logic at this moment let us just go

and display alert

hello

right

and very important out here you can see

that this class is connected with this

html by using this template url thing

and we'll discuss about this later on so

you can see here this is the ui

and this is the logic

so that's what is a component in angular

so if you're going if you run this let

us see

so if you go and if you run this if we

run this ng server

so there our ui is running so if i click

on this

you can see the backend logic ui

plus logic

so a component is ui plus logic

now

one of the

doubts you know which can come into your

mind is

that what makes this

simple typescript class a component

so point number one to remember the

first point to remember

typescript does not have a concept

called as component there is nothing

called as a component the goal of

typescript is to make it to make

javascript strongly typed to give you an

object oriented feeling and so on and

increase productivity right so as such

you know type 2 does not have a concept

called as component this component

concept comes from angular so you can

see here this import out here which is

actually getting imported from angular

core and this angular core is one of the

modules you know which is shipped with

the angular so if you go to your

package.json file you will find that

this is one of the sub modules of

angular

so this component is a concept of

angular right

and what makes this class

a component

this

thing at the top of the class

this is termed as a decorator

so this at the rate component is termed

as a decorator and you can see that

there are three things out here

uh four thing three things out here

selector template url and style url so

template url connects with the html so

you can see this template url says that

this component is connected with which

html

style url says this component is

connected with which css

right

and finally you know this component you

know which is nothing but the

combination of html plus css plus this

logic what we are writing out here if

you want to go and if you want to load

it inside an html we use a selector

so this whole component you know which

is a combination of

all this html and plus css and the logic

if you want to load inside

another html then you will use this

selector out here you will use this name

you will see like this app root

slash

app root so then what will happen inside

that html

this

html plus this logic in on plus the css

everything will get loaded inside this

html out here right so

decorator

component

decorator this is a decorator this at

the red component is a decorator

so let us again go ahead and

just revise and reiterate you know what

we talked about the component

now you must be feeling that you know i

am repeating the same things again and

again right it is becoming mundane but i

feel that this part is so important for

a newcomer who comes into angular that

if this part

is missed out then i feel then you know

the whole angular is missed out right so

here it is so we have this component

thing out here right so this is the

component

right

or i would rather say let us so let me

draw here so this is the component right

so the component

has what

it has

a view

right

so a component has

a view so this is the view

right

it has the logic right this is the logic

this is the view

this is the view at this moment right

plus it has this logic plus it can have

css

plus it can have uh

you know some other class as well so

this component can create an instance of

an http object you know this component

can create a instance of a logger object

so basically when you when you talk

about component a component comprises of

view

plus logic plus css

plus
you know some other logic you know like

components you know let's say classes

like logger

plus http so you can think about you

know this component is like a

like a mediator you know who

a mediator i can say connector or like a

traffic police you know who actually

gets all the things together

and creates a wonderful reusable

piece you know which you can go and call

inside your html right so if i go back

now let's so let us go back to our uh

you know our code out here so you can

see here

this is the view

this is the component and remember if

you want to call this component

inside an html you will call it by this

name app root so this app root is the

name of the component so if you see here

in the index.html

right

so if you just see in the index.html

you can see that this app root has been

called right so this means that he is

trying to load

this component inside this html right

so

the selector out there is nothing but

the name of the component right

so

component comprises of view

css

logic and this logic can be called

inside the html by the selector

right so this is the selector out here

this is the selector

and this one here at the red component

is

um

is a decorator right because of this

decorator this simple typescript class

becomes a component or else you know if

this decorator is not out there then

this is just a simple typescript class

right so

that thing at the top

makes this app component a component and

this component is coming from where from

the angular dot core right

and this angular core is at this moment

installed

inside your node underscore module so

there it is angular dot core

and how did it get installed it got

installed because in the package.json

file

because in the package.json file

you know you have it as one of the sub

modules right so the component that

direct component decorator

logic is there in this ad angular code

in the same way if let us say we want to

do the bindings and we will be using the

forms uh and

you know if you want to go into routing

we'll be using router and so on right so

that installation was done uh when you

did npm install right so

component

decorator

selector

right

calling of the component is like this

right

app root

so these are the basic building blocks

of angular

now one more important thing you know

which

i want to talk here is the directives

what is a directive

a directive is nothing but it is angular

code or i will say

angular syntax which you write inside

html

and if you look at the official

definition of directive directive is

nothing but it changes the behavior of

an html element so you can see this

click out here this click out here

is an angular syntax

this click out here is an angular syntax

please note this is not the on click

our javascript event is on click this is

not the on click this is a click with a

round bracket so this is actually an

angular code so when you see an angular

code inside the html it is termed as a

directive and this directive what it

does it actually goes and changes the

behavior of an htm html element for

example this button out here was a

simple button but now it has a behavior

of a click because you have put a click

directive

so putting in simple words

directive

is nothing but it is

angular syntax which you write inside

html

now one more important vocabulary i want

to

talk here is

template template right

so normally you will hear this word

angular template right angular template

is nothing but you know an angular ui so

this and

app.component.html is a template so

angular template is nothing but it is an

html file which has

directives which has angular syntaxes

inside it so

you must you can call this as

appcomponent.html

but mostly you know inside the angular

community they will call it as a

directive so whenever they whenever you

know you will see uh they will call it

as a template so whenever you will see

that you know angular developers talk

about this template url they will say

that this is a template

right

so

just

trying to summarize you know all the

vocabularies out here a component is

nothing but it comprises of logic plus

view

right a selector helps us to call this

component so selector is the name of the

component

this accurate component is a

it is a decorator you know which

actually makes this normal type switch

class a component

and

inside the html you know whenever you

write any kind of angular syntax it is

nothing but a directive

and this html out here is

nothing but it is also called as a

template so these are in some of the

vocabularies you know as we go ahead

we'll be using them

the other important concept which we

need to understand in angular is the

module

so

what do we have now

we have a component

right so let us say you have a customer

add component right so let us say you

have a customer add component

and

what does a component comprises of a

component comprises of a view

plus

logic

so right so this view is in html for now

and this logic is written in typescript

right

in the same way probably you can have

another component out here which again

has

a view plus logic let us say that you

have this component as

the customer

reporting component so this helps you to

display

customer reports

now what you would like to do is that

you would like to go and put these

components into a logical grouping

so you would like to go ahead and put

them into a logical grouping

logical group

so this logical group is termed as a

module

so must be you can go and give a name

here saying

customer

module

a module an angular module helps you to

logically

group components

i repeat this an angular module helps

you to group components so one module

can have many components

and in a project

specifically in a complicated project

you can have many modules so like assume

that this is a customer module out here

which has two three components

and then you can have one more module

out here which is a supplier

module

so you can have multiple modules in a

project

so you can have a supplier module

and it has supplier component 1 supplier

component 2 and so on so in a project

you can have multiple modules and every

module

logically groups components

so there you can see

the code of a module

so this is a component this is the ui

and this is the module so app.module

the first thing what you will notice out

here is that

the way we had decorators for components

so for example when you take a simple

class of typescript and you put a

decorator of at the red component this

becomes a component in the same way for

module also if you take a simple class

out there and if you decorate this

decorator of decorator ng module this

class becomes a module so module and

components are created because of this

decorator out here

and in this decorator for now

focus on

uh two things one is the declaration and

another one is the bootstrap

so this declaration is where you will go

and you will write

your grouping of components so for

example now let us say in your project

you have two three components like app

component and let us say if you have app

component one assume how you have app

component one at this moment we don't

have it and then you have ad app

component two so you will go and you

will write the grouping of the

components

over here so you will say app component

1 app component 2 and so on right so

the grouping of the components you will

you will group it in the declarations

out here right

now from these components which is the

startup component which will be the

startup component to run first you will

define in the bootstrap

so in declarations you will define the

grouping the logical grouping and in

bootstrap you will define that from

these components which component will

run first which will be the bootstrap

component right
great so

we have component we have a view right

and then it is logically grouped into

modules a module logically groups

components

let us try to visualize

what we have learned till now

and if you can understand this

visualization

you are an angular developer this is the

most important part of the lecture

if you're able to visualize what what

i'm showing just now

welcome

you are an angular developer right

so

we said that we have a component

so

we said we have a component

a component comprises of

a view

let me try to draw this view a little

bit big

so component comprises of a view

and a logic

right

you can have

many components

and the grouping of component is defined

in a module

the view

and the logic is connected now this

logic at the end of the day is a ts file

right a class file this view is an html

right

now this view and the logic is connected

by

the template url

remember so we we have a template url

which connects both of them

inside the view you will have directives

so inside the view you will have

directives like we saw the click event

so you will have directives

you will have syntaxes of angular

and

you can have many such components so you

can have

another module like this

which is having

other logical group of components right

so now when the application runs right

when the application runs which of these

modules will start first so that is

defined in the

in the main.ts so that is defined in the

main.ts

so in main.ts

which module should run first is defined

right

so this is the module

this is the component

this file is the com

well the component is a is a combination

of this

plus this

right

and we also have an index page here

index.html

so the first

ui to run is index.html

index.html calls the main.ts the main.ts

says okay this is the module and inside

the module if you remember we had the

bootstrap

so we had the bootstrap out here this

bootstrap will say which component to

run first right

so this bootstrap will say which

component to run first and that

component will be loaded inside this

index.html using the selector

right so if you remember we had

this app root selector the name of the

component

so inside this app root

that component will run right so this is

basically a visual diagram out here let

me go to the code so that we can

we can map you know both of them right

so

here it is

index.html this runs first

after that runs main.ts

so in the main.ts we are saying that the

app module should run first you can see

now there are lots of code out here like

platform browser dynamic don't worry

about it we'll talk about it later on

but i'm just saying that the main.ts

runs after that

the main.ts is this module is going to

start the app module the app module says

which come which component is going to

start in the bootstrap

and then the component goes and takes up

this html

takes up this logic

you know

takes the whole thing and

this is the selector app root and it

loads this whole thing

inside the index.html

right

so remember first index.html

main.ts

the component runs

takes everything takes the ui plus the

logic and loads it inside

the index.html

index.html main.ts module component

loads inside the selector and remember

that we have

know the

directives you know which are written

inside the ui right

so if you're able to get this visual

diagram in your head

congratulations

you are an angular developer

now

the other important concept you know

which we need to understand as an

angular developer is

binding

binding means

you want to go and bind an input element

so you can see this is an input element

a text box

let us say you want to

bind this element to one variable often

component right so let us say you have a

variable out here let us say some value

right

and

when an end user goes and type something

on that text box

you want that you know

whatever is typed in this text box

should come to this

some value

and when somebody changes something in

this value

it should go and display on the screen

right so you want to go and do a binding

for that we have a directive in angular

which is

ng model so you can go and you can say

your ng model m capital

right what is the name of your variable

our name of a variable is some value

again like remember in case of

typescript you will say variable name

and then the data type right

so you can see here some value colon

string some value colon number some

value colon boolean right so now we want

to go and bind

this text box

with this

some value right so you can see here ng

model

now

you know let us now you can also go and

control you know how do you want

uh this binding to happen means when you

look at a binding right

when you look at a

what you call a the binding flow the

binding flow can be like this when you

type on this text box you want that it

should

it should be sent to this some value

when there's some value change you want

that it should be

you know sent to the ui as well right so

that means that you want a two-way

binding right so because you need a

two-way binding

you will use

two other

signs out here the square bracket and

the round bracket

so what does the square bracket signify

the square bracket says that the data

can come from the component to the ui

the data can come from the component to

the ui so this whenever the some value

changes you should also update the ui

right

and this round bracket here signifies

that you know

the data can go from the ui

to the component as well

so remember

the two-way binding here because we want

a two-way binding we want that the data

should go from the ui to the component

and from component to the ui that's why

i have put both of them right so the

square bracket signifies that the data

can come from the component to the ui

and the round bracket signifies you know

that

events can go from the

uh from the ui to the component right

so there it is

now you would like to also go and

display this some values up there so

when

when you type on this text box it will

go and it will change this some value

and when the some value changes you'd

like to go and display that on a ui for

that we can use something called as

expressions

so if you want to go and display the

some value here you can use something

called as an expression

the expression is denoted by this double

curly bracket out here so you start with

the double curly bracket and you end

with a double curly bracket so this is

called as an expression because

you can go and you can

you know write some expression like one

plus one

and it will evaluate evaluate to two

this is termed as an expression also

many people call it as an interpolation

interpolation means

we can mix

html

with

this data out here like this so i can

say bold slash bold and i can mix you

know the angular directive the angular

expression like this so remember you can

term it as an expression or you can term

it as an interpolation because you can

mix html with the angular variables

right

so

ng model is a directive which helps you

to bind

the input element with the

component with with the variables or the

objects at the back of the component

right

now you can see there is some error out

here let us try to understand this error

so if you go and if you see this error

it says that

uh uh error occurred okay now first

thing how should you read the error how

should you read the error right very

important it is you can see here now

we have got

we have got lot of red signs out here

right and how do i go and read the error

right so first thing is when you see an

error you will normally be at the bottom

so you will be we will be at the bottom

like this

try to go and scroll till the top

try to go and scroll to the top and read

the first error which occurred because

that's where the most important

information is so i'm going to go now to

the first

to the place in event of where the error

occurred first where it showed the first

red sign so here it is you can see here

first you can see that

so before this everything was green and

here we had this error so you can see

the error number out here saying angular

8 0 0 2 and what is the error i cannot

bind ng model

i cannot bind ng model since it is

it isn't a known property of an input so

it is actually throwing up a

error here saying that he cannot bind ng

model or he does not understand ng model

and you can see it says error occurs in

the template remember i said template

means the html5 means means the ui so

you can see this wording's out here it's

it's occurring in the template and it is

also saying that uh at which line it is

occurring so one comma 20 so 1 comma 20

means

line number 1 right

line number 1 and column number 20 okay

so 1 2 3 4 5 6 7 8 9 10. so this you

know it's saying that it is the error is

occurring

uh

in the column number 20. so the column

number 20 can probably be this right

so that means that he's not

understanding ng model okay

that's the whole point he's not

understanding the syntax of ng model and

why is not understanding because you

have not loaded the appropriate angular

modules right

remember uh when we saw the package.json

file

so in the package.json foiler we saw

that angular has a lot of angular is

modular it has a lot of modules like

angular animation
angular common

angular core right

angular router you know for navigation

and angular forms for binding

so the

the binding magic is in angular forms

and it is

and we need to go and load this angular

form so let us go down to the module

level

okay at the module level

let us go and import

the forms module right so let us go and

import the forms module so what we'll do

here we'll say comma

and we'll say forms

module you can see out here now when you

tab out here automatically it imports

the forms module at the top

and it puts this forms module out here

so in the ng model decorator

you will go to the import section and

you will import the forms module right

and once you do that you know he should

be able to understand

the

the ng model syntax i'm going to go and

save it and let us go down below and let

us check that if our error has gone off

you can see now the error has gone off

right so it is compiled successfully

right

so

remember that you know when you actually

go and

write any directive out here the

appropriate module has to be loaded from

angular so that that directive can be

recognized right

so with all that now let us go ahead and

run our application let us see

so localhost

4200

so that it is you can see the first

thing is

the first thing is this expression one

plus one has been evaluated to two

right

remember our click was working

the hello right

so that is out there

okay

uh and now when i go and when i type on

this right when i type on this you can

see

the expressions getting changed so when

i type on this

the data is getting binded to the some

value at the back

and

also our expression is getting updated

this is the expression this is the

interpolation you can say it is getting

updated right

so binding if you want to go and bind an

input element

uh to the component variables and

objects you can use the ng model

directive

so this is a directive

this click is a directive

this is an expression this is an

interpolation

right and remember

you have to load the forms module or

else you know you will not understand

the syntax of ng model and most

important whenever you get an error

whenever you get an error you will go

till the top these are important points

as a as a fresher to understand as a

newcomer to understand in angular so

remember whenever you get an error like

this you will scroll to the to the

to the last point with the to the first

error you know where the error occurred

right so this was the last time you know

when

angular compiled successfully so just

after that and whenever you get you know

such kind of an error where it says that

can't bind

can't understand right that means you

know that that module has not been

loaded right so once you load the module

once you go here and say

load

forms module

everything works perfectly nice right

so now let us go ahead and write some

logic

and uh afterwards you know when we have

finished writing this logic we can go

through the important

directives of angular or the different

types of directives in angular right so

the logic is as follows you know the

logic which we want to write in angular

is as follows

the end user can go and type on this

text box right and when it clicks on

this button here it should add this

value to a table down below

so the end user goes types a value he

clicks on this button out here and once

he clicks on this button it should go

ahead and add some

add the data to a table down right so

that means that now this text box is

binded first thing this text box is

binded to this some value string that is

the first thing right

now if you want to go and

uh show it in a table the first thing

what we have to do is that we have to

store this some value in a collection

right so we'll go here and we'll say

some value

and will create a collection some values

some values

so some value singular saying that this

is binded with the text box and some

values it's a collection saying that it

will be binded with the table

right

now

you can either go with pure javascript

and you can say some values is equal to

square bracket and this creates a

collection or what you can do is you can

use typescript you can say array

array of string

so you can go and say array of string

is equal to new array of

string

right

and then in this

in this call some logic remember that

this call some logic is

uh present in this click button out here

right so in this call some logic

we will go and we will say

add this some value to some values

remember some values is plural

plural right it represents a collection

uh so we'll say here

some values start pushed and we'll say

some value

and you would like to also go and clear

this

text box as well right so what we'll do

is we'll say

some value is equal to empty so this

will go and will clear

clear the

clear the value as well on the text box

right

and now let us go ahead and create a

table down below so we'll say here br

we'll create a simple table

so some value now we would like to go

and loop this tr so the below tr we

would like to go and loop it

until we have data in the collection you

know loop to the elements in the

collection right so these are some

values is a collection so we would like

to go and loop right so to do a loop you

know we can use the ng for syntax

so

we'll say your

star

ng

is equal to

ng4 is equal to let

let

temp off

now what is our collection our

collection is some values right so temp

of some value so what will happen is

this mg4 syntax out here will go and

make a loop it will take every value and

it will put it into this temp variable

right

and now we'll go here and we will say

display

the temp remember the displaying part is

the same as we have used an expression

as we have used an interpolation right

so that's it you know this should work

so let us go back to our ui and let us

see

so we will say your shif

and let us add

we'll say test and let us add so you can

see

how simple it is by using angular by

using the power of directives by using

this ng4 by using this ng model

by using these expressions you know by

using

this beautiful code of typescript which

is class oriented which is strongly

typed

how easy it is to code using angular

right

now let us try to understand the

different directives in angular so you

can see that we have written some

directives we have written ng model

we have written ng4 right

so let us try to understand these

directives so what we'll do is in order

to understand these directives let us go

to the website of

let us go to the official website of

angular dot io right official website of

angular that is angular dot io so we'll

do like this we'll say that

[Music]

let us google right i would like to use

the notes directly from the official

website rather than showing my notes out

here so we'll say here different

directives in angular and we are very we

are mostly interested to read from

angular dot io right so here we go

and you can see here angular dot io

you can see the different types of

directives given in angular with the

definition right remember angular dot io

is the official website of angular so

whatever you read from the official

website is

coming directly from the horse's mouth

right so you can see there are three

kinds of directives in angular let us

try to go

go through each one of them

so you can see that these are the three

kind of directors out here component

attribute and structure okay

so let us start with component out here

so component

when you say a component directives

right

if you remember i said component is

nothing but it is ui plus the logic so

it has a template actually associated

with it template means html right so

whenever you hear this word

angular template that means html right

so component directives are directives

you know where you call your component

where you actually create a component

where you actually create like how we

had app component.ts

and it had a template url and so on so

that is a component and you call it uh

you know by using the selector name so

you can see here this is a component

directive

this is a

component directive right

the second kind of directive is

attribute directives attribute

directives change the behavior change

the appearance or behavior right for

example it can just change the color

must be or

it will change the behavior for example

if you see this input type button you

have this

click attribute a click

directive out here you can see this ng

model directive right so what does a

click directory do a simple button now

which was first a very simple button it

now it has an additional behavior of a

click

right

for example this text box which was a

very simple text box but because of this

directory of ng model it is now binding

to one variable right so this attribute

directives actually they change the

behavior or the appearance right of an

element so both of them both of these

are

attribute kind of directives

right

and the last one is structural

directives they change the dom layout

right so they add elements you know they

remove elements and so on so you can see

this ng4 directive is on structural

directive

so this is a structural directive

whenever you see such kind of a star out

there it indicates that it is

a structural directive right so

component directive

this is nothing but your component where

you have your own html

uh let us not use the word html the own

angular template right and the code

behind and you know and you can call uh

the name the selector name out here that

is the component directive

attribute directives you know

they don't

remove an element they don't hide an

element what they do is the existing

element to change the behavior like ng

style that's an attribute directive

click is an attribute detective ng model

is an attribute directive uh enable

disable right so if you are going to

enable and disable that is again an

attribute directive they change the

appearance the look and feel or the

behavior and the last one it actually

goes

and adds and removes dom element for

example this ng for here

adds new tr elements to the dom right

so remember structural attribute and

component

i would like to highlight a very

important point out here

this is also one of the favorite

question asked during angular interviews

right so uh what are the types of

directives now what happens is you know

developers are

you know are a very different kind of

people you know they they work hard they

code

they deliver projects right but when

they're asked questions like okay what

are the different types of directives

they don't remember upfront isn't it

so here's a small tip you know if this

question is asked during the interview

you can remember this word sac

so s stands for structural a stands for

attribute and c stands for component

everything is fair in getting a job and

war right

remember guys you know

coding

doing a work

working in a company

hands-on you know is one thing but

cracking an interview is a different

ball game right for example you saw saw

you know in the last two hours you know

we have been coding we have been we have

been trying to understand the concepts

right but when it comes to interviews

right you know when you're asked

question you should be able to express

them you should be able to express the

right technical vocabulary you should be

able to give clear-cut answers right so

what i've done is i have floated a very

wonderful course here called as the

angular interview question with answers

and code demonstration course right so

if you want to get access to this course

you can go to the comment section in the

comment section i have pinned a comment

and in that pinned comment you can find

a one hour of free video this the first

one hour is free out there you can go

you can watch that video and if you wish

to buy the full course you can buy the

course from questpont.com you can buy

the course from our youtube channel

subscription you can go to udemy and

many other places those things are also

mentioned in the descriptions right so

remember coding is one part you can code

you are hands-on you are a great

developer you are a hero in your company

but when it comes to cracking interviews

it is little bit different right so

try to prepare holistically

you know yes you should be hands-on yes

you should know how to deliver a project

but at the same time when somebody will

ask you questions during interviews you

should be able to answer them in an

elegant way congratulations

congratulations congratulations you have

completed two hours of training on

youtube

i mean like on youtube people watch

i don't know what kind of content right

and you have been learning on youtube

there is nothing satisfying more than

this right so if you are if you are out

here if you are watching this clip if

you are watching this face out here if

you are watching that screen out there

right why don't you please inform me on

facebook.com saying that i completed two

hours

so that as a trainer you know i feel

that i have achieved something and i i

you know it's not me just alone

recording for two hours right there is

someone out there who's also listening

for for two hours right so if you're out

there and if you're coming till here

right please go to facebook.com

correspond and please rate me and please

say that yes you know we are here we are

watching our content we like your

content so that you know it motivates me

to create you know such more kind of

content okay

now said and done right

definitely this was only the basics of

it basics of angular

when you say that you want to do

advanced angular when you say you want

to become a pro a real pro right then

there are many topics out there right

first one routing how to go from one

screen to another screen navigation

routing second lazy loading

load on demand dependency injection

right

validations http calls unit testing view

child content child content children

passing data between components state

management you know it keeps going out

there so if you want to really become a

pro in angular here it is you can please

go to questpoint.com get the

subscription out there if you want you

can also go to youtube out here and you

can subscribe when i say

subscribe means

youtube subscription right you can go

and you can go to the youtube out here

and uh by my youtube subscription you

get all the access to these advanced

tutorials out there right of angular

second if you are a person who says no

no i want to learn like one to one from

you chev so why not you know come to

quespond.com and we have live trainings

of angular on saturday and sunday you

can attend the same and if you say no

like i want to learn offline and i want

to see you

and you are with me right we are in a

classroom then please you know you can

also come to our mumbai office out here

we have continuous training of angular

offline i i love personally offline

training because in offline training

what happens you sit for like that

saturday and sunday 16 hours and you are

done with angular right

so

any way you want to learn you know i'm

more than happy to help you right so

happy learning happy job hunting

keep learning keep liking my channel

channel keep sharing my channel thank

you very much

you