00:01

what's going on my dear friends today in this video Let's Learn and
master the angular framework latest version so let's get [Music] started welcome
back everyone I'm excited to share this completely updated angular course designed
specifically with beginners in mind we'll be diving into the fundamentals exploring
the latest angular features and building practical projects to solidify your
understanding this is just the first part of comprehensive Series so stay tuned for
more in-depth lessons and

00:38
exciting challenges so let's get started on this Learning Journey
together so guys when we develop a website we have to consider two sides the front
end or the client side and the back end or the server side the front end loads
inside the browser and the server side will load inside the server right so the end
user will see only this front end side of our website inside the browser so guys in
a website the front end will handle the user interaction and the back end or the
server site will handle all the data response we build

01:18
the front end traditionally using HTML CSS and JavaScript hope you guys
already know about this so guys we use HTML to build the structure of our we page
and use CSS to make our web page or the website user friendly by adding colors
fonts layouts and so on so using JavaScript we make our website functional think
this is something like the human body the bare bone or the skeleton structure of an
human body is similar to our web page HTML structure the CSS is something like our
skin and or our dresses and JavaScript is like

02:06
our brain so in our body the main command center is the brain right so
like that we handle our website commands and the user experience using the
JavaScript for example if you want to show an alert when the user clicks on a
button we use this JavaScript if the user wants to change the color of uh the
website by clicking a button so we can also do this by using JavaScript so guys in
JavaScript we call this Dom manipulation so the Dom stands for document object modu
inside of the web browser so hope you guys know about this

02:50
if any of you guys don't know about JavaScript you guys can learn about
JavaScript with my JavaScript full course you can find the links in the description
all right so guys manipulating this Dom using the JavaScript is not an easy task
it's very buggy and time consuming so as a solution for this big companies like
Google and meta formally we call this Facebook right so came up with their own
solutions for this so Google developed uh and introduced angular and meta developed
and introduced react so guys

03:28
the biggest question is what is is this angular so guys angular is a
frontend library built using JavaScript developed and maintained by Google so guys
please carefully note this angula is not something new it is built using JavaScript
not any something new programming language right so the main objective behind this
angular framework is to speed up and improve the developer experience so guys when
we developing an angle La basically we used this same approach HTML CSS and
JavaScript with a little bit of syntax changes the only
 04:07
thing is we don't need to write all the JavaScript codes from scratch
angular framework has pre-built method and techniques for this if you guys are
familiar with CSS Frameworks like Tailwind CSS or bootstrap CSS and we have to make
a text color to Something red by using these CSS Frameworks we can make this text
Red by just simply adding the text color red utility class to our HTML element so
we don't need to write the CSS codes from scratch so angular also the same like
this for example think if you want to show something

04:47
dynamically load the username inside of this H1 tag in pure JavaScript
first we have to give an ID to this H1 tag then we have to capture the H1 tag using
the get element by ID method right so after this we have to insert the username
inside the H1 tag using inner HTML JavaScript method but guys in angular we can
simply load this user name value inside the H1 tag something like this inside of
two curly brackets we can simply access this variable and this will render this
username inside the browser weave

05:30
so we don't need to write lines of codes like pure JavaScript so this is
what I was trying to tell you guys angular is a JavaScript front end framework that
is used to develop web applications more robustly so hope you guys got the idea so
guys what is this Spa this Spa stands for single page application a single single
page application is an app that doesn't need to reload the page during its views
and works within a browser think of the apps we use daily Facebook Google Maps
Gmail Twitter Google drive or even GitHub all these

06:17
are examples of spba applications let me show you an example go to the
gmail.com after you log to your Gmail account you can see your inbox and click one
of your emails if you look at this carefully you can see this will open you can see
this will open the email without refreshing the page this is what single page
application so what is going on here so guys most of the resources of uh Spa
application needs like HTML CSS scripts are loaded at the launch of the app and
don't need to be reloaded during the

06:59
usage the only thing that can change us is the data that is transmitted
to and from the server as a result the application is very responsive to the users
queries and doesn't have to wait for client server communication all the time one
of the best advantage of spa is the user experience and the speed the user enjoys
the natural environment of the app without having to wait for the page to reload
load and other things you remain on the same page which is powered by JavaScript
programming language so we

07:38
can build or develop SPS with most of the modern JavaScript frontend
Frameworks including angular so guys we can identify angular apps as a spa or
single page applications the angular C is a command line interface tool that is
used to initialize develop scaffold and maintain angular applications directly from
a command Shi in other words if you can remember I told you that angular is a
JavaScript framework this framework has default pre-built files so in order to work
with angular we need those files

08:20
and techniques with the help of this angular CLI we can create an angular
new application without any problem with a single line of command not only that
guys but browser also doesn't know angular so at the end of the day we have to
compile angular to JavaScript or we have to build an angular app to production so
we can build the angular app using the angular cln likewise we can update maintain
scaffold develop an angular app using this angular cln so hope you guys got the
idea so guys in order to use angular CLI first we have

08:58
to install angular C globally on our computer to install angular CLI we
need node package manager so the node package manager bundle with the nodejs go to
the nodejs org and simply download and install this recommended version of the
[Music] nodejs so after this installed we can install the angular CL so all we have
to do is just run this command inside your command prompt or The Terminal so the
command is npm install dasg at angular SL CLI if you on a Mac add pseudo beginning
of this command otherwise you guys may get security

09:47
permission errors so PC users don't need to modify anything just simply
run this command so this command will install angular C on our computer globally
this G flag stand for Global okay this npm is the node package manager and this is
the installing package name angular C so hit enter to execute this command all
right guys we have installed angular CLI on our computer now we can use the angular
CLI commands to work with angular framework Perfect all right now we have installed
the angular CLI so now we can generate a

10:29
new new angular app using the angular CL so guys before we begin in order
to generate our new angular application we need a project folder so for this course
I will create my project folder inside my computer desktop so it will be easy for
me to demonstrate this process so guys this is not mandatory to create the project
folder always inside the desktop you guys can create this wherever you guys want
when you're working with real world and yellow projects for this course only please
follow these steps

11:04
exactly same as mine so you guys also create your project folder inside
the desktop so we can prevent unnecessary bugs and errors okay inside my desktop I
created this folder and named it angular full course now inside this uh we'll
generate our angular application so let's um restart the previous command on front
now inside this we can run the angular CLI command before we run the angular CLI
command first thing first we have to navigate our Command Prompt path to our
project folder so for this we can

11:45
use the CD command so inside this first navigate to the desktop so CD and
desktop hit enter now we are inside the desktop so after this again CD and the
project folder name is angular full course hit enter now as you guys can see here
we are inside our project folder awesome right so now let's generate our first
angular project so guys in order to generate new angular project we have to use the
angular CLI so the angular CLI command is in and in order to generate a new angle
app we have to use the ni command so NG new

12:32
after this we have to pass the project name something first angular app
guys keep this in your mind when we naming our angular projects don't use spaces
between project name words right so something like this first space angular space
app as a good practice instead of space use dashes or we can use the camel case
naming convention something like this first letter is lower case and each other
words start with uppercase letters first with lowercase f and after this second
word angular with uppercase a and

13:19
the app with uppercase a so between these words no spaces okay um I
prefer usually the Slash method so I remove this and the project name is first Das
angular Das app so you guys can either use the camel case naming or the dash naming
method but once again keep this in your mind don't use spaces all right so this is
the command for creating a new angle app using the angular CLI so after this it
enter to execute this command now as you guys can see here the angular CLI is
asking that with our angular project which method of

14:02
CSS are we going to use the r CSS or css preprocessors like CSS SAS or
less so guys in our case we will use the CSS throughout of this course so select
the first option CSS and hit enter by the way guys uh you guys can navigate through
out this using the arrow up and down keys right so so now we have another option to
enable the server side rendering or the SSR in our angular project so guys this is
our first angular project in this section we are not focusing on the SSR or the
server side rendering so simply give no to this

14:47
I know guys uh this SSR is may be something new to you don't worry about
that in later sections we will cover up a to about this in detail so give not to
this just type n and hit enter now guys this will generate our new angle app by
downloading all the required files and dependencies this may take several seconds
to minutes depending on your PC or the internet speed all right guys we
successfully generated our first angular app so now inside the project folder we
can see our first angular project inside this folder

15:27
we can see these folders and files so guys don't worry about these files
and folders I'll be going through each and every folder and file in detail in the
later section so in this lecture let's see how to run our angle app and load inside
the browser so guys let's open this inside our code editor which is vs code so we
can open this right click on the angle project folder and select this option open
with vs code or we can open the vs code first and we can open the project by
navigating through the vs code menu

16:09
options so once we open this inside the vs code we can see all our
angular files and folders inside this vs code file tree we'll come back to this in
a later section now let's see how to compile this angular project and open this
inside the web browser for this also guys we can use the angular CLI command so how
do we do that so angular CLI is a command line tool right so in order to run the
angular CLI command we need a command front so like the previous that we run the
engine Command right so like

16:47
that we can use the command prompt but for this as usual first we have to
navigate to the project folder CD desktop CD angular full course then again in
order to run the ca one we have to navigate inside our angular project as well so
after this we can run the app from this path but guys this is a bit annoying right
uh for this we have a simple solution we can use the vs codes integrated terminal
so what is this integrated terminal guys this is not something new this is also the
same default command prompt in our computer

17:26
but with this we directly open our command from inside our project folder
so no need to navigate to the project path from the beginning so let's see this in
action we can open the integrate terminal by going to the weave menu and selecting
this terminal option the short code for this is this control or the command key
with the med symbol so click on this terminal option and this will open the
integrated terminal bottom of the vs code so guys I'm using Windows so by default
this open the pow shell but this PO shell

18:07
will not work with NG or the angular CLI commands so I change this to
Windows command prom we can change this by clicking this drop down and select the
command prom this will open a new command promp so now I don't need the power shell
so I can delete this by clicking this trash icon perfect so now we have have
successfully opened the V code integr terminal next let's run our angular app for
this as I said previous we can use the angular CLI so inside this terminal run the
angular CLI command so what is the angular CLI

18:44
command for this yes of course it's NG now in order to run the
application we have the serve command in angular C so if you can remember we used
the new command to generate the new angular app so likewise we can use the serve
command to run our angular application so after this NG type Ser hit enter to
execute this command so guys this will compile our angul app and run our angle app
on a local development server at the initial run this may take a bit long wait
until this finish once it has done down here

19:27
you can see this local development server URL local lost colum 4,200 by
default angular application will run on this 4,200 Port okay now we can access our
angular application by visiting to this URL so copy this and paste this inside the
browser so guys throughout this course I will be using Google Chrome as my default
browser so you guys also use Google Chrome to follow this course so this will
minimize unnecessary bugs and errors all right so so inside Google chrom's address
bar I paste the angular development server URL

20:04
local lost colon 4,200 and hit enter this will load the application as
you guys can see here this loaded the angular default boiler plate design so guys
this is the default view of our angular project perfect right so guys this is how
we run angular applications so guys in the previous lecture we successfully ran and
loaded Dev application inside our web browser which is Google Chrome right so okay
some of you may wonder why we have to run our angle app using the angular CLI so
guys when we learned what is angular

20:42
I told you guys that angular is a front end framework built using
JavaScript right so this is not new most of the time we'll write all the Logics in
JavaScript but angular has some of its own unique syntaxes for manipulating the do
for example let's look at the same example that we used before so let's see this so
guys for this I have created a separate project folder called JavaScript example
and inside this I have created an index HTML file so let's use uh this for our
JavaScript example I already opened this inside uh of another

21:24
vs code window so now let's focus on uh the ex example I created an H1
tag inside the body and so in JavaScript if I want to load uh text inside of an H1
tag dynamically first thing first I have to Define an ID for this H1 tag right so
after that I have to capture this using the JavaScript document module inside of
the script scope document. getet element by ID and assign this one variable
something title so now after that we have to append the text that we going to show
inside the H1 tag using the JavaScript

22:19
append method right so guys I moving little fast on these pure JavaScript
codes because I hope you guys all have a basic knowledge of JavaScript and and
explaining javascrip code from basic is not a scope of this course so in any case
any of you guys don't understand this just leave it I'm just using this JavaScript
code only in this lecture to explain how angular Works behind the scenes all right
so now let's open this inside the browser very simple go to the project folder and
double click on this

22:51
this will open this index.html file inside our default browser directly
in here we can see how H1 text loaded using JavaScript guys this is the traditional
way of doing this using Manilla JavaScript but in angular we can do this something
like this so let's write this code in our angular project guys just look at this
code uh I'm just going to explain how angular codes work behind the scenes you
don't need to follow the code or understand these codes okay we will learn how to
do this all in angular in

23:26
later sections this is just for the example okay all right so inside the
component T5 we got our boiler plate code for now I removed all the code and inside
this I created our H1 tag now what I want to do is I want to load this heading tags
text dynamically so inside the app component T file I create the variable something
called title and I assign the text something this D Dynamic title now I want to
load this title variable inside the VI for this we do something like this inside H1
we use two curly brackets

24:10
we can pass the variable name that we want to show inside the view now
between these we can pass the variable name that we want to show inside the view so
as you guys can see here we can see our H1 text inside the browser so guys the
question is how this loaded inside the vi when we use JavaScript the browser knows
JavaScript codes so the browser will automatically compile the JavaScript code and
load the view inside the browser in a man JavaScript project we will not run any
extra command line code to execute the

24:49
JavaScript code inside the browser and we just simply open the HTML file
inside the browser directly right so go uh because the browser only understand HTML
CSS and JavaScript browser doesn't know about angular codes so therefore first
thing first we have to convert the angular codes into browser friendly JavaScript
code for example in here we use something shorter version of special angular syntax
to load the text inside the H1 tag so this is the angular syntax in order to run
this inside the browser

25:28
we have to convert this code into a JavaScript code this is what the NG
serve does when we run the NG Ser angular CLI command angular compiler will convert
not only this one syntax but the entire angular project into a browser friendly
HTML CSS and JavaScript so that's why we need a extra step to load an angle app
inside of a browser so some of you guys may wonder if we again convert this angular
code into a JavaScript code what is the use of angular rather than writing Manila
JavaScript guys not only angular but all

26:07
other front end Frameworks have also been developed to speed up the
development process of a web application think if we write this using only Val
JavaScript we have to write several lines of codes but in angular we did this
within this simple angular syntax this just only a simple example guys no words to
say how angular and other frontend Frameworks improved the developer experience
while you guys following this course you guys will understand the use of this
angular framework hope you guys got the idea

26:43
perfect let's move on to the next chapter all right in this lecture let's
look at our angular projects file structure let me learning angular it's important
to know what are these files inside of an angular project and what is use of these
files so let's go through this file structure one by one as you guys can see here
inside the file tree we can see a few folders and files so first we can see this
dot angular folder so guys what is this this is the folder where an angular stores
or cash the angular project compile data as you

27:26
guys know in order to run this angular project we have have to build or
compile using the NG serve command so when we run this app first time or in the
initial stage this will automatically create this do angular folder and store basic
information file paths and required metadata details inside of Json files so after
that angular compiler speed up the buildup process by using these cache files this
is the simple use case of this angular folder guys we don't need to worry about
this folder because we will not touch this folder

28:03
this folder is only used by angular compiler we will see what will happen
if I delete this folder and serve the angular application again as you guys can see
here this automatically created this folder again so this is what I was trying to
tell you this file is created and used by the angular compiler all right let's move
on to the next folder we have uh the vs code folder which is this also like the dot
angular folder this folder is nothing about angular this is created by BS code or
code editor by default to store the

28:46
necessary vs code configurations for this particular angular project so
next we got the node mod folder guys this is not like the other folders this folder
is very very very important the total angular ecosystem is stored under this folder
so it's simple all the required dependencies and all the angular Frameworks files
are stored inside this folder so if I expand this inside this as you guys can see
here we have so many folders and files these all files are required by the angular
framework so

29:23
without these files angular will not work um wait I'll show show you this
I just simply delete this folder as you guys can see here once the delete process
is completed we got some compile errors inside the terminal and also inside the
browser our app broke or crashed if I try to reserve our angular project as you
guys can see here we get some compile lers stating that there are missing files so
this is what I try to explain to you guys in order to work with angular we need
this folder but guys we will not touch this folder as

30:10
well this folder will be totally maintained by our angular framework you
don't need to touch this folder okay hope you guys got the idea all right next we
got the SRC folder I'll skip this for now and we'll come back to this in a minute
CU this is very very important folder in angular right so next down here we have
some files let's go through these files one by one the first file that we can see
here the editor config file this file also contains configuration details about the
code editor this file is also not very

30:47
important next we have the dogit ignore file this file is basically
dealing with the Git Version Control this file specifies that which files so
folders should ignore when we dealing with version controls so don't worry about
this we have a dedicated section about this Git Version Control in that section you
guys will get used to this okay next we have the angular.js file guys this is uh
the heart of an angular project this file contains and controls all the
dependencies structure of our angular application and also this

31:27
contains how to compile our application and more details this is like uh
this is like the brain of our angular application this file is very very important
as you guys can see here this contains the index file of our angular app as you
guys can see here this contains all the details about our angular application we
have to upload the compile angular files where is our assets what is our stylesheet
and configurations details and more so guys as I said without this file angular is
like a living dead man like a zombie so

32:07
 therefore this file is very very important also guys we will not touch
this file as well we will not modify or remove anything inside this file otherwise
this will lead us to unnecessary problems and bugs hope you guys got the idea all
right so let's move on to the next file next down here we got this package lock
Json file and package.json file as this contains all the dependencies and packages
that are required for our angular project first let's look at the package.json file
as you guys can see

32:45
here this has a few Json objects at the top we have some meta details
about our angular application and our application name if you guys remember we
named our angular project name as this when we generating our angular application
using the angular CL right so next uh down here we have the version number and we
got the script details actually what is this nothing much guys if you guys can
remember we use the NG Ser command to run our angular application so this NG Ser
command is defined here so guys not only

33:23
the NG command we can simply use the start command or so to run our
angular application so let's say this an action so guys for the angular CLI we use
the NG command but for this package Json script we have to use the node package
manager so inside the terminal and this command npm so this command is for the node
package manager right so the script is this start now hit enter as you guys can see
here we are getting some compile errors why are we getting this if you guys can
remember in the previous lecture we

34:10
deleted the node modeles folder that's why we are getting these errors
for now just simply ignore these errors we'll come back to this in a minute so as
you guys can see here when this npm start command executing this will look inside
the packages file start script and execute the start script value which is the NG
serve command so if I change the command to something test again let's execute this
npm start as you guys can see here this time this executed the test command that we
defined here so this test is not a valid

34:51
command so that's why we are getting this error hope you guys got the
idea so like this is uh the all of other commands also same as this when we develop
an angular application either we can use the NG commands or we can simply use the
npm or this package Json commands but even if we run these npm commands but in the
end this is running the same NG or the angular CLI commands so hope you guys got
the idea all right next let's uh we can see the dependencies thison object and this
de depes Json object so guys this is the

35:31
total collection of dependencies that we need for this angular project as
you guys know I deleted the node mod folder in the previous lecture now we cannot
start our angular application so in order to fix this we can reinstall or the
download the full node modules folder again so by using this dependencies object we
can redownload all the required dependenc is for this angular project right so for
this simply we have npm command npm install so inside the terminal let's run this
command npm install so we can use uh the
 36:15
short form of this npm I so this command will look this I stand for
install so guys this command will look inside the dependencies object and this
dependencies object redownload all the required packages inside the node modules
folder once this is completed as you guys can see here we get the node M folder and
inside that we get all the angular required dependencies like previous if I run our
angular application again using the angular CLA command NG Ser as you guys can see
here this time our angular project compiled

37:00
and run without any problems so Guys these dependencies these and objects
are very important so we will not touch or modify these dependencies objects even
if we lose one of these our angular application will not work hope you guys got the
idea all right let's move on next we have the readme.md file which is just a readme
file that includes some Dev in information about our angular project next we got
these T script configuration files TS config app.js TS config.js and TS config
spec. Json file so guys angular is a

37:45
JavaScript framework right but when we deal with angular we will write
typescript codes because angular is based on typescript by default angle is using
typescript right so those who are don't know about typescript it's a super set of
JavaScript basically typescript also same as JavaScript but typescript has some
additional features that that are not coming with JavaScript okay so we have
dedicated section about typescript you guys will learn A to Z about typescript in
that section so guys as I said these all

38:22
contain the configuration details of typescript all right so that's it we
covered all the files and now let's move on to the heart of an angular project
which is this SRC folder all right guys now let's go through the source folder or
the SRC folder so guys this is the heart of an angular folder we will spend time
inside this folder throughout this course and we will mostly work inside this
folder right inside this we can see these two folders and files first let's look at
these file files first one is this F

39:00
icon this is the main icon image of our angular website right so next we
have the index.html file this is the main index file of our angular application
this is the file which loads inside the browser next we have the main.ts file this
is the main typescript file which renders the app component file inside the browser
VI right so guys uh just simply get an idea about these files in the section we
will learn in detail about these files so next we have our Global CSS file styles.
CSS file we will write all the global CS

39:39
styles of our angle application inside this file next let's look at this
assets folder this is uh basically stores the media files such as images external
Javascript files videos and so on next uh the app folder this is is the main
component folder of our angular project we will store all of our angular project
component files service files module files inside this app component so guys inside
of this SRC folder also we will not touch most of these files we will only work
within this app folder so inside this by default we have
 40:19
few files um so guys angular is a component based front end framework by
default we have our main entry component which is this app component right so
basically angular component has three major files and an optional file which are
the HTML file CSS file and the typescript file the optional file is this component
spec component spec. ts5 this is for the unit testing so this is the main component
which renders our view inside the browser we will Deep dive into this when we
learning angular components

40:57
all right so next we have the app config DTS file basically we use this
to configure angular modules and next we have the apps. TS file this is the file
where we Define all our angular routers don't worry about these technical terms and
words while you follow this angular course you will get used to this okay so guys I
think uh that's the end of the all files inside of this angular project so guys
some of you guys may not get the overall picture of an angular project file
structure don't worry about that

41:34
you guys will get used to this all right so let's move on to the next
chapter all right guys in this section let's learn about angular component so first
thing first what is this angular component the angular framework is a component
based front end framework so the main building block of an angular application is
angular components without components we cannot build a proper angular application
so what is a component the component is a combination of data HTML template and
logic which represents an area of a view that shows

42:17
inside the browser this is the view that users can see those components
are loaded inside the browser so let's look at a real world example so if I take
the Facebook layout as an example so Facebook has the top na bar this right side
bar left side bar and this Facebook wall which shows Facebook post right in angular
we can create separate components for each of these layout areas we can create
reusable components so for this nabar we can create a nabar component for each
sidebar this left and right we can create separate sidebar

42:56
components and also for this post list we can create a main post list
component and also inside this we can create a component for post list in angular
also we can create this Facebook layout using only one page like traditional web
designs so we add all the markups for the Facebook homepage including the NAB bar
sidebar and the Post Falls codes inside a single index x. HTML file right so like
this in angular also we can add all the markups for this Facebook homepage inside
the app component HTML file but guys trust

43:39
me it's not a good practice in angular CU in angular we can create
separate components as I said earlier angular is component based front end
framework so if we create separate components rather than put all in one component
we can reuse those components again in our application without coding it again wait
a minute what is this reusable thing for example let's take the same example as
previous in Facebook this nowbar must be shown on all pages in this homepage and if
you navigate to someone's profile on
 44:18
that page also we can see this nwor so guys if we are not using this na
as a component we have to copy and paste This na code on all our web pages so if
you use the angular component for this we can reuse this n component inside all the
pages by simply importing the component to that page we don't need to repeat the
code for the AA again and again hope you guys got the idea a small task for you
guys go to these websites and try to identify different component layouts inside
that websites first uh go to the Gmail inbox

45:04
layout and try to identify the components and also go to the apple.com
and identify the all components all right so let's analyze the Gmail inbox as usual
guys at the top we have the na component and the left side we have the left side
bar and the inbox menu the right side we have the right sideb component with the
widgets panel in the mid we have the inbox mails list component if we click this
compost button this will open this new message we consider this also as a component
right let's look at uh the Apple website

45:45
as usual top here we have the Nar and here if you click on this search
this will open the search component after that we have the card component and down
here uh first we have the EO section for this also we can create a separate
component after this features categories and this carousal or the slideshow so for
these each and every section also we can consider it as a separate components and
down here we have the footer component guys as we learn website is a combination of
different components and each layout

46:26
section can considered as a component hope you guys got the idea perfect
so let's move on to the next chapter all right so hope you guys now have an overall
idea about components as I said earlier angular is a component based framework so
in order to get the full advantage of an angular app we have to use this component
approach right so by default angular generated this app component files and guys
this will be the main root component of our angular application so open this app
component HTML file inside this we can see these

47:04
boiler plate markups so Guys these markups are the responsible for this
boiler plate weave inside the browser so guys how do we get this V inside the
browser if you guys can remember in order to load an angle app inside the browser
we have to run our angle app for that we use the NG Ser command so this command
will compile the code into browser friendly code and create a development server
and this will give us the development server URL which is this local lost coron
4,200 if you visit this URL this will

47:41
load the re inside the browser my development server is still up and
running that's why I can leave this page otherwise this will not work so guys
always make sure that your angular development server is up and running otherwise
use the NG ser command to rerun the application all right so as I said this default
view is loaded with this app component HTML files code uh wait I'll remove this all
and add a simple H1 tag and add the heading text first angular app okay now again
save this and go to the browser as you guys can see here the

48:24
previous default we change and this time we got the new view with this
first angular app text so now you guys can clearly understand this is the code
loaded inside the browser view so guys uh now you guys may wonder how this code or
the angular component is loaded inside the browser so let's clear this uh look at
this code inside the browser developer console so guys how do we open the browser
developer tools just simply right click and inside this go to the elements TP
inside this we can see this page HTML

49:01
code expand this inside the body we can see this app Root tag and inside
that we can see this H1 tag which was written inside the app component HTML file if
this page loaded the app component HTML file how this HTML structure loaded here
and also we can see this something different HTML tag app- root in HML tags there
is no any known tags named as app Root right so what's going on here to find the
answer to this go to the EVS code and open the index.html file guys in angular this
is the main HTML file that loads inside the browser

49:47
not the app component HTML file then how the app component html's H1 tag
loaded inside this we as you guys can see here this app HTML tag inside this body
tags this is where the magic happens so guys as you know this is not a known HTML
tank this is something custom tank right so what is this guys this is the component
selector of the app component I'll show you this open the app component ES file
inside this we can see this app Ro under this select option so this is the
identifier of angular component in order to load a

50:30
component VI inside the browser we use this selector as a custom HTML tag
right so when our angle app loads inside the browser by default this will open this
index. HTML file inside the browser inside this we get the app component selector
which is this app rout when we compile our angul app using angular CLI angular
compiler will automatically modify our index X HTML file and inject the relevant
components HTML code inside this component selector Tex and this will open this
modified index. HTML file

51:08
inside the browser so if I change this selector name to something Appo
test inside this index file save this and go to the browser as you guys can see
here this time we got nothing here if I go to the console tab we can see this error
that says no matching element for app Root selector in order to load a component
inside the vave we have to use the component selector name exactly as it is once
again guys when running our angular app angular compiler will compile our angular
app when compiling the index

51:47
file angular compiler see this component select if there is a component
selector angular compiler will modify this index file by injecting the components
HTML code inside this component select a custom HTML element at the end angular
compiler will load the modified index.html file inside the browser VI so this is
how the angular loads the component inside the browser VI so hope you guys got the
idea so now hope you guys have an idea about the AG component and how it loads
inside the browser now this lecture

52:27
let's see how we can create a component in angular when we deal with
components in angular we have two methods one is the arest way and another one is
the easiest way so let's go with the hardest way then we can understand all about
angular components code structure then we can use the easiest way so the hardest
way to create a component is the create all the files and codes of angular
components from scratch so let's do this uh first thing first let's create our
first component guys as I said earlier when we develop an angular

53:01
project we will only work within this app folder we will not touch any
other folders okay so inside this by default we have this app component now what I
want to do is I want to create a nowar component so right click on this and first
let's create the folder for this the folder name is naar I created this folder
because it will be little more organized than the putting all component inside the
same folder right all right now inside this nowbar folder let's create our
component again right click

53:39
and select this new file option now the file name guys when we name an
angular component file we have to follow this naming convention first we have to
add the component name which is in our case nfb after this dot component and at
last we have to pass the file extension in angula we use typescript instead of
JavaScript so the file name extension is TS so after this TS that's it so now open
this file as you guys can see here this is an empty file guys don't get confused
this is still not an angular component this is

54:20
just a simple typescript empty file in order to make this an angular
component we have to follow three steps first thing first we have to import the
angular components module into this file so let's do this at the top of this page
add the import statement import inside curly brackets the model name is component
with capital c so follow the capital simpol letters carefully next uh from and we
have to pass the path of this module so inser codes this path is at angular SL Coe
this is coming from the angular core

55:03
module that's it so we successfully imported the angular component module
next um before we move on some of you guys may Wonder actually from where is this
component module I imported here we Define this path but there is no folder that we
can find inside the root folder of angular so where's this component module file
nothing much guys it's very simple if you guys can remember I told you that all the
angular framework files and modules will be downloaded and stored inside of the
node modules folder

55:41
right so inside this node mod folder you can find the at angular folder
inside that we can find the co folder so this is the path that we defined here but
again some of you may question me this folder are inside the node modules folder
but in here we have not added the node modules folder part before this import part
then how this work it's very simple by default angular knows every module that we
importing to the angular is listed inside the node modules folder so we don't need
to add the node modules

56:19
folder before or this import path when angular see this import angular
will automatically look inside the node modules fold hope you guys got the idea so
the first step is completed we successfully imported the angular component module
to this DS file still this is not a component so we have to follow the Second Step
so as the second step we have to use this imported component module so let's see
how to use this very simple down here add this code at component parenthesis and
this required object

56:56
parameter so open and close curly brackets inside this object we can
Define the data of our components in here we have to pass few data so first thing
first we have to add the selector of this component as you guys know this selector
is very very important without this we cannot load this component inside the
browser view so inside this the property key is for the selector is selector so
after this colon and the value is uh the selector for this nowar component is nowar
so pass this inside of codes so guys as a good practice in

57:42
angular we prefix the component selector name with app keyword something
like this app- nowon if this component is sidebar so the selector will be app dash
side but right guys this is just a good practice in angular without this prefix all
also this will work without any issues right so next we have to define whether this
component is a standard on component or not in the previous versions of angular
components are not Standalone but in angular 17 and up by default they made angular
components as

58:19
Standalone components so in here we have to Define that the key is stand
alone and the value is true if you want to make this component stand alone we use
true otherwise we can pass false guys don't worry about this uh stand component in
the next lectures we will learn about this feature in detail so for now just keep
this in your mind how do we Define stand components in angular perfect so that's
all for this second step all right let's move to the third step as the third step
or the the last step we have to create the

58:58
component class so down here class keyword and the class name the
component name is Navar and the class Cod so guys same as the select naming
convention for this also we use the app prefix as a good practice uh for the
selector we use all lowercase letters and we combine the both words with dash
symbol but uh for the class name we use the camel case naming convention so first
letter of two words are uppercase no iPhone or dashes between two words at nowb
that's all so guys now this file has officially been converted

59:42
as an angular component so guys we successfully created our first angular
component let's see how to load this component inside the browser view as you guys
know in order to load an angular component inside the browser view we have to add
that component selector inside the index.html file this is how this app component
loaded inside the browser right so using the same approach let's try to load this
component also inside the browser view all right in order to load this nowo
component inside the browser view

01:00:19
we have to add the component selector inside the index.html file so go to
the index. HTML file file and add this selector so after this Appo selector so our
nowar component selector is app- now add this as a custom HTML tag we successfully
added the component selector now save this all and go to the browser we have got
nothing here we can see only this first angular app text which is coming from the
app component file so guys what's going on here can you guys guess if you can
remember in the naar component we just only created

01:01:03
the component there are no HTML codes to load inside the we right so how
do we add the HTML code here for this in angular components we have two approaches
so let's uh first look at the first approach so guys inside the component file we
can write our HTML code for this we have a special property called template so
inside this this also same as this uh select option so we can pass the template
property inside this component decorator so after this let's pass this the property
key is template and

01:01:43
the value uh inside codes now we can pass uh any valid HL codes insert
this codes as this template property value so let's uh open and close H1 tags and
they set the value to something never component all right now we have the HTML code
to show inside the browser view so let's save this and go to the browser look at
this guys still we got nothing we have the HTML code and also we added the
component selector name inside the index of the HTML file as well so now what is
the problem so guys the problem is here we

01:02:31
are trying to access a separate component file from this index.html file
so the problem is index.html file doesn't know about the existence of this naar
component file so what do we have to do is the first thing first we have to create
a connection between this index.html file and with the now component file so how do
we do that very simple for this we have a separate file in angular which is this
main.ts file so go to this main. file and open it inside this as you guys can see
here we have something method called boostup

01:03:11
application so this method gets two parameters one is the app component
and other one is the app config so what are these as you guys know now the HTML
code which is inside that comp important file is loading inside the browser so this
is loading inside because of this as you guys know in traditional website we
sometimes write external Javascript and CSS in a separate file so in this case in
order to apply the external Javascript and all the C Styles we have to link those
separate files into the

01:03:47
index.html file otherwise index.html file doesn't know about existence of
the separate files so then only browser will understand there is another separate
JavaScript file and it will read the separate uh JavaScript code and apply the
Logics inside the browser view so the same thing happening here with this boostup
application method also we are kind of linking the external compound file with the
index HTML file which is not exactly the same what I'm saying this is not linking
like a separate CSS

01:04:23
or JavaScript file this is more than that but for for now just simply
keep this in your mind with this bootstrap application method we are connecting the
external component files with the index.html file so this is what happening with
this bu application method so hope you guys got the idea so as I said earlier so
inside the browser view we got this app components text so this is loading inside
the browser because by default the angular is connected the app component with the
index. file so as you

01:04:57
guys can see here inside this boostrap application method we are passing
the app component as the parameter for this method so that's how these app
components weave is loaded inside the browser so now what we have to do is we have
to show the now component also inside the browser for this we have to pass the N
component to this boostrap application in order to render the N component inside
the browser so how do we do that just for now simply pass the N component as the
second parameter for this boostrap application so first thing

01:05:36
first in order to pass the ne component to here we have to import the now
component file to this main.ts file so how do we do that very simple just the top
of this page after the Imports add this code import open comp close curly brackets
so this time we are importing the nbar component so the Nar component name is app
navb so after this we have to pass the path of the Navar component so after this
from inside codes the component is inside the app folder so do slash app slash no.
component also guys we don't need to

01:06:30
pass the file extension Dots here angular we already know this is a ts5
guys we have a problem here as you guys can see here we are getting this red
underline under this app n so guys this is uh the compile error so what is the
problem here so let's hover on this and we can see this error saying app nowar is
declared but its value is never read so what is the the problem here so guys this
app nowar is this class that we defined inside the nowar component is file uh in
order to access this class

01:07:36
from another file we have to export this class in here we are not
exporting and this class is private so in that case we cannot access this app NAA
class from this main. ts5 that's why we are getting this error so in order to fix
this uh add the export keyword before this class name that's it so save this and go
to the main.ts file now as you guys can see here the error is gone perfect now guys
we have the input now let's pass this now component to this boostrap application
method as the second

01:08:13
parameter so after this app component parameter add the app n wait a
minute guys again we go to another compile error under this app config we can see
this red underline if I over on this we can see this error this error is saying
expected one two two arguments but got three so what is this error so guys this Bo
application method requires only one parameter or two parameter but here we are
passing three parameters so that's why we are getting this compile error so in
order to move forward we have to change this

01:08:56
parameter count to two parameters so let's remove the app component from
here and as you guys can see here now this is okay so I think that's it for this we
successfully linked the app component to the index HTML file so guys now save this
and go to the browser as you guys can see here this time we are not getting
anything inside the browser so what is the problem this time so in order to find
this problem we have to look inside the browser console so we are not getting any
compile errors inside the code editor and also inside

01:09:36
the integrated terminal but inside the browser console we got this error
saying this app nowar component is not marked as stand alone so now what is this
error from angular 17 and upper angular by default changed all the component as
Standalone components so in previous versions of angular the components were either
Standalone or non Standalone according to our choice and by default the previous
versions of angular components are non stand alone so from angular 17 angular
components are now stand

01:10:20
alone in order to use the angular components we have to Define that this
n component is a standalone component or not so in order to fix this go to the N
component is file and inside the same component decorator we have to pass this
property the property name is Standalone carefully follow these Capital simple
letters and the value is true so that's it this will fix this error so guys I'm not
diving deep into what is the is standard component so we have another separate
dedicated section for this in that section you guys will

01:11:02
learn about this in detail all right so let's move on sa this and go to
the browser as you guys can see here this time we can see the Nar component T
inside the browser which means this is successfully loaded the now component inside
the browser all right so so before we move on some of you guys may notice that
inside the browser this time we only got the nbar component text but we are not
getting the app component files H1 tag which is this first angular app so now what
is the problem can you guys

01:11:43
guess yes of course the problem is previously we removed the app
component from this boost up application method and we replace that with the N
component so that's why this time the index. HTML file doesn't know about the app
component so the angular CLI also knows only about the nabar component so that's
why this loaded only the nabar component text inside the browser web so guys but
guys I want to load the app component also inside the browser so how do we Sol that
in a real world angular application there will be

01:12:26
 hundreds of components inside of a single project so in order to show all
the components inside the browser view if we use this method we can't do that
because for this boostup application method we can only pass one component at a
time so this is a big problem right so as a solution for this angular is by default
giving us this app component as the angular projects Road component so guys when I
describing these files tree and this main.ts file I said we will not touch all
these files we only work

01:13:01
within the app component folder so I modify this main.ts file to give you
an understand how does the angular loads components inside of a web browser so
that's why I modified this main.ts file otherwise we will not touch this file so
hope you guys got the idea so guys when we develop an angular application we will
keep all this default files as it is and we will work within the app folder and we
will create all the components inside this app folder and what we will do is in
order to load those components inside the browser we

01:13:38
will Nest those components using the our main root component which is the
app component so now let's see this in action before that I will reset all the
modified codes inside this main.ts file so remove this uh now component in puts and
this parameter after this add the the app component here now inside the index.html
file remove the N component selector uh that's it so save this all and go to the
browser as you guys can see here this time this loaded the app component text which
is this first angular

01:14:22
application so now let's see how to nextest components so guys think this
uh is like something a big box inside of that big box we will stack small boxes
right so the app component is uh like the big box so inside that we will inst all
the other components like the small boxes right so guys this is also the same as
the index HTML file in order to load another component file inside of the browser
we have to add that component selector as a custom HTML tag so inside of this sub
component HTML file so after this

01:15:04
add the N component selector the N component selector is this app dasar
so don't forget to add this as a custom HTML tag now as you guys can see here we
are getting a compile letter that's saying this app now is not a known element so
guys what is this error it's also the same as the previous you to show the app
component inside the index. HTML file we have to create a connection between those
file so the same scenario like uh in the previous so in order to access the number
component HTML codes from the app

01:15:48
component we have to create a connection between these two files if you
can remember so for the index.html file we use the main.ts file to create the
connection so guys for this component nesting we don't need a separate file for
this uh we will do this connection inside the same app component file so we have
the app component TS file so inside that we have this component decator so inside
that we have to add a new property called import so the key is Imports and the
value is we have to pass this as an array so open and close
 01:16:27
square brackets inside this component name is app n so again we are
getting another compilator because in order to use this app components here we have
to import that so guys don't get confused this input is coming with this component
decorator this is a property inside of this component object right so in order to
pass the N component to this Imports property we have to import that nowar
component to this app component TS file right so top of this page add the import
statement import inside Curry

01:17:08
brackets the component name is app Nar and this is coming from so give
the path ins set codes SL never component that's it so now we sucessfully imported
the na component to this app component file so save this and go to the HTML file
now as you guys can see here this time the compile error is disappeared so
everything is now looks good save this all and go to the browser inside the browser
as you guys can see here this time browser loaded this now component text as well
as this app components H1 tag so guys this is how we

01:17:50
n components so I think if we have another component for the header
component we can L that component also inside the app component then this will also
load inside the browser so guys for now just keep this in your mind in order to
load components inside the browser we will use the app component as our main root
component then we will list all of the component inside the app component file so
then we can load all the components inside the browser so as a good practice we
will not touch the index. HTML file or the main.ts file so

01:18:26
I modified those files to give you a clear picture of how the components
Works behind the scenes hope you guys got the idea so guys uh we will Deep dive
more into these nested components in later sections so any of you guys don't get
anything about uh these nesting components leave it for now we will learn about
this later so all right that's it for this chapter let's move on to the next
chapter so so guys now we know how to create a component manually and how to load
that component inside the browser

01:19:01
guys when we learn components I say that component is a combination of
HTML CSS and JavaScript or the typescript so in order to show something inside the
browser view at least we need a few lines of HTML codes right when dealing with
angular components in order to write HTML codes inside the components we have two
approaches so the first approach we already wrote that in the previous section
using this template property inside the components decorator so in the previous
example we wrote this simple H1 text inside this template

01:19:36
property right now guys think if you want to add another paragraph inside
this component how do we do that so the simplest way is we can add that inside the
template property after this H1 tag so just simply create a P tag and add a Dy
paragraph text so save this and go to the browser inside the browser now we can see
this paragraph right so guys in here some of you guys may wonder why didn't I add
this P tag in the second line so there is a reason for this guys uh wait I'll show
you let's put this P tag in the
 01:20:17
second line now save this as you guys can see here we are getting a
compile error so guys when we dealing with this property template we can write HTML
codes in one line but in any case if you want to write multiple lines of HTML code
we have to use the M day codes instead of the simple codes okay uh let's see this
in action so let now remove these uh single codes and replace them with this metal
symbol which uh you can locate before the number one key on your keyboard as you
guys can now see see

01:20:55
here the compile error is no more so save this and go to the browser this
is still working as previous which means now you can write multiple lines of HTML
codes Under This template property so let's add another code uh after this so this
time let's add a button tag the button text will be something submit so save this
and go to the browser as you guys can see here we got the button inside the browser
view so guys like this we can design the HTML page view of this component inside
this template property and guys once again if

01:21:39
any case if you're using the single codes or double codes instead of the
metal day symbol you guys cannot write multiple lines of HTML make this but you
guys have to stack all the HTML codes in one line then this will work so so all
right guys so hope you guys got the idea about how to write HTML codes in line
inside the component file so next let's move on to the next chapter so now what I
want to do is I want to change the color of this H1 tag to red color so how do we
do that inside the component file for this also we have

01:22:17
a separate property like this s template property which is Styles
property using this property we can write in line CSS inside this component file
same like this HTML code so let's see this an action so now inside this component
decorator after this add the property of the CSS Styles so after this colon now we
can pass the CSS codes as the value for this Styles property so now what I want to
do is I want to change this H1 color to Red so the CSS property for this is color
and the value is red don't forget to

01:22:58
pass this inside of codes that's it uh save this all and go to the
browser as you guys can see here this nowbar text turn to righted which means we
successfully applied CSS styles to this H1 tag okay so next guys think uh like this
HTML code in case if you want to write separate lines of Cs codes so how do we do
that for this also we can use the same approach as the previous we can use the
matal symbol instead of the Cotes so let's say this uh now remove these codes and
replace them with M symbol then now we can break

01:23:49
lines inside this so next let's add a background color to this heading
text so inside the CSS property for this uh we can use the background property so
the CSS property is background and set the value to something black that's it so
save this and go to the browser as you can as you guys can see here now this
background color is in Black so guys this is how we write multiple lines of cod CSS
codes inside the components file using the Styles property so guys in the previous
lecture we learned how to write codes and CSS codes
 01:24:32
inside this component file so guys for these kinds of one line or two
lines of course this approach is okay but unfortunately in real world applications
we have to write hundreds of or maybe thousands of lines of codes in a single HTML
page or a CSS page so in that case if we write the Andro lines of codes in this
component decorator what you guys think this will be messy and this component file
will unnecessarily get big if in any case we get any bugs we cannot easily identify
those bugs right

01:25:09
so in order to prevent this angular has a better approach for these
templates and styles so we can create separate HTML file and the separate style CSS
file for this if you look at uh the app component this app app component has
already separate files for this separate HTML file and this separate CSS file so
like that we can create a separate style and HTML file for this n component as well
so let's see this an action so as for this uh let's create an HTML file go to the
file tree inside this app folder

01:25:48
now right click on uh the our component folder which is this s component
folder and create a new file the file name is the same as this navbar do component
and the file extension will be we are creating this file to write HTML code so the
extension is do HTML so this is the file name convention for the component HTML
file first we have to define the component name then uh the component keyword and
at last the HTML extension code that's it so guys as I said earlier this is just a
best practice to name a component in angular

01:26:37
if you guys want to change this you guys can change it but if you guys
can follow this it will be helpful for your carrier always try to follow best
practices perfect so now inside this we can write our HTML code so for now let's
write a simple H1 tag so inside this HTML file add this create an H1 tag and uh the
heading text will be something this is from HTML file that's it for now save this
and go to the browser as you guys can see here we got our first heading this is
coming from the component template property but we

01:27:21
are not getting this external heading text inside the browser view so
what is the problem here can you guys guess yes of course guys here also we just
created this new HTML file but we are not connecting or linking this file to any
other components file so therefore angular compiler doesn't know about this file
and this will not compile so that's why we are not getting this external component
files we inside the browser in order to fix this we have to link this file into our
component file so how do we do that for this also guys

01:27:57
we have a separate property called template URL so using this we can
connect external HTML file to our component right so let's see this in Action Now
go to the component TS file inside this let's connect our external HTML file so the
inside this component decorator uh for this we have a separate property called
template URL so add that here the property name is template URL this U is uppercase
so guys please carefully follow this Capital simple letters otherwise you guys will
get errors so now to this property we have

01:28:38
to pass the our external HTML files path so we have to pass this as a
string open and close a single code inside this the path is do slash because this
is inside the same folder for this the file name is na. component. HTML so we have
to pass this component file name exactly the same as this otherwise this will not
work okay so now that's it save this and go to the browser as you guys can see here
now we've got this text this is coming from our external HTML file so guys which
means our external

01:29:22
file is successfully connected to our component but guys if you guys look
at this carefully this time we are getting only this heading text which is coming
from the external HTML file but we are not getting the heading text that we passed
earlier using the template property inside the component TS file so what do you
guys think what is the problem here so guys in angular if you want to write HTML
code we have to use either one of this method we can write in line or we can use
use an external HTML file if you link an external file

01:29:59
to the component file this will automatically ignore the inline HTML
codes so that's why we are not getting this inline HTML heading inside the browser
hope you guys got the idea so guys before end of this video let's see how to
connect external CSS file to this component so guys this also the same like the
previous so first thing first we need a separate file so let's create that inside
the same folder uh create new folder right click and create new folder right click
and create new file the file name is as usual first the

01:30:36
component name nowbar do component dot the extension is CSS that's it so
now inside this we can write the code for CSS codes so let's change uh the setting
text color to Green so the heading property is H1 and the CSS property is for this
is color and set the value to Green so save this and go to the browser now as you
guys can see here the styles are not applied so the same question why is that can
you guys guess yes of course the same problem like previous in order to use this we
have to link this to our

01:31:21
component file so for this also we have a property called Styles URL so
go to the component TS file and add this the property is Styles URL and the value
inser codes pass the path of the external CSS file do slash the file name is na.
component. CSS that's it so save this and go to the browser as you guys can see
here this time this heading text turn to Green why is that the same thing as the
previous when using an external CSS file this inline CSS will not work right so
this is what happens here with

01:32:04
the inline CSS we added this red color and the background black
previously it was applied to this heading text now this has changed to the green
color which is coming from the external CSS file so hope you guys got the idea so
guys this is uh the best approach to write HTML and CSS for component file
throughout this course we will use this approach we will not write any inline HTML
or css codes inside the component file so that's it for this chapter let's move on
to the next so in the previous lectures we

01:32:46
learned how to create an angular component from scratch so now hope you
guys have a clear picture of how this component works in the angular project so now
guys when we create the component manually I see that there are two approaches to
create these angular components in angular so the first method was creating a
component using the manual way so it's the hardest way now let's see the easiest
way of creating this component so how do we do that guys for this we can take the
advantage of angular CLI so angular CLI

01:33:20
has bundled with a command to create this component and all required
other files and to create the connection between each other files so let's see this
inaction so now let's create a component for the Eder area so go to thegr terminal
in the vs code inside this let's generate our new component using the angular CLI
as you guys know in order to access the angular CLI we have the command NG so type
that here NG after this we are going to generate something so the command is
generate after this what we are going to do is we

01:34:01
are going to generate a component so pass component so the command is NG
generate component so after this we have to pass the component name so we are
creating this component for the header so the component name is header so now guys
we don't need to pass the component keyword and the file extension to this I c will
automatically create this component including best practices right so guys uh in
order to execute this command hit enter as you guys can see here this command is
executed inside this we can

01:34:42
see these messages saying that these files are created with component is
file HTML file and the header component CSS file if you look at the file tree
inside this folder we can find this header folder inside we can find all the header
component related files so as you guys know when we executing the ca command we
didn't mention about the app folder all these naming conventions angular CLI
followed all the best practices automatically so this is the beauty of angular CLI
so guys inside this you can find

01:35:22
four files uh when we creating the previous component manually we just
geted only three files which are the TS file and the HTML file and the CSS file so
but inside this head component folder we can find these four files so the new file
is this component.ts file so guys this uh file is mainly used for testing purpose
so in this section we are going to cover the angular testing so in the testing
section we will learn about this in detail all all right so guys we got the
component files open the component file

01:35:58
inside this we can find all the relevant component codes so you can see
the import of the component module and here we can find the component decorator
inside that we can find all the properties that we need for angular component and
also down here we can see this class and the component name header component and
also guys we can see this EXP keyword why we are exporting this because in order to
access this class outside of this component we have to export this right so next we
have the HTML file inside that we can see the P

01:36:37
tag with the text with this text so next we have this style component C
this file and inside that this file is empty right so now guys I want to load this
component inside the browser so how do we do that first this as usual we have to
use the component selector so let's add this inside the component file hope you
guys remember why we are adding this component selector inside the app component
HTML file we learn about this right so now at this after this the component
selector name is app header create this as a custom HTML

01:37:19
tag as you guys can see here we are getting a compile L why is that you
guys already know we learned about this because in order to work with this
component we have to make connection between these two components so we access the
header component from the app component so we have to import the header component
to this app component so go to the app component T5 inside this Imports property at
this our component class name is header component so guys when we are typing this
you guys can see these Auto suggestions this is

01:38:01
coming from the vs code so select our header component from this drop
down as you guys can see here when I select this this will automatically added the
import statement of the header component so we don't need to write this manually
like the previous so guys this uh this has nothing to do with the angular this
feature is coming from our code editor V code okay so all right now we successfully
imported the component now go to this HTML file now we are not getting any compile
errors uh save this

01:38:37
all and go to the browser as you guys can see here now we can see this
head component text here so guys if you guys can remember when we creating the
component manually we did all these steps one by one by hand but with the angular
CLI we got all the required configurations and all the required files automatically
this is the beauty of angular CLI so from now on throughout this course I will use
angular CLI to generate angular components so guys before we move on I have a small
question for you so this

01:39:15
header components prag loaded inside the browser so how this loaded
inside the browser this HTML code is inside of a SE at file so how this is loaded
inside the browser can you guys tell me yeah yes of course because inside the
header component is file we can see this template URL property with this we are
linking the header component HTML file with the component TS file so that's why we
are getting the header components VI inside the browser hope you guys got the idea
e e so guys what is this data binding guys

01:41:24
we use angular to build Dynamic websites not static websites you guys are
here to learn how to build a dynamic front end using the angular so if you are
building something static front end for something app you do not need to learn
angular right so you can do this only using the HTML and CSS so in this section we
learn about how to dynamically interact with data in angular so let's dive in so
guys inside the app compon HTML file we got this H1 tag inside this H1 tag we handc
coded this text so now what I want to do

01:42:04
is I want to make this hand coded static text into a dynamic text so how
do we do that very simple so first let's create a variable inside the component TS
file something title so how do we create a variable in typescript very easy inside
this class Cod so guys keep this in your mind we write all the Logics and codes of
this component inside this class Cod right so outside of this class Cod any code it
will not work all right so let's create a variable the variable name something
title so like JavaScript we don't need

01:42:47
to use any variable keywords like w let or const keywords all right so so
next we have to define the type of this typescript variable so at the colon and the
type is string so guys for this variable we are going to assign a string value so
after this equal sign the value is uh put this inside codes this loaded dynamically
all right so guys now what I want to do is I want to load this text inside the
browser so how do we do that in order to load this text inside the browser we have
to somehow load this

01:43:33
title variable inside the HTML file as you guys know the browser will
only loads this HTML file inside the browser view not the typescript file right in
order to do this guys in angular we have a different approach so for this we can
use string inter ation so let's see this in action so inside the app component SML
file let's create another new headit text for this so after this create uh this
time create a h2 tag and now I want to pass the title variable to this h2 tag as I
said earlier for this we can

01:44:17
use the string interpolation it's very simple so between these h2 tag
open and close to curly brackets and between these curly brackets pass the variable
name which is this title that's it so save this and go to the browser as you guys
can see here this loaded the title text inside the browser V awesome right so guys
in the previous lecture we look at a basic functionality of a string interpolation
so now in this lecture let's see how this string interpolation work works and what
we can do with this interpolation so let's get

01:44:57
started so guys as I said in the previous lecture using angular we are
going to build a dynamic website or an application or a static website right so in
order to make the angular application Dynamic we have to manipulate data between
our angular components so for this we have several techniques in angular so this
string interpolation one of them in this lecture let's see how this string
interpolation Works let's look at the previous example in here app component is
file we create this variable and using this string

01:45:34
interpolation method we loaded this title text inside the browser so some
of you guys may Wonder first thing first this title variable is inside the app
component TS file but using the string interpolation we added this title variable
inside the HTML file so how this possible what is the connection between these two
files so the first thing first you guys should understand in a angular component
the typescript file is the main file so we do all the things inside this typescript
file so if you guys can remember we link the HTML

01:46:10
and CSS file to this component and also we imported the other nesting
components also to this component TS file so without this component TS file we
cannot create an angular component so this is the main file of an angular component
so in here we are connected our HTML file with this component file so this is how
the connection built with these two files so inside this we created this typescript
variable so in order to load this inside the HTML file we cannot directly add this
title variable inside

01:46:46
the HTML file because this is a typescript variable and this is a HTML
scope so in order to add this inside the HTML file we have to create a typescript
scope inside this HTML score right so that is what we are doing with this string
interpolation so between these curly brackets we are creating a typescript scope so
as you guys know inside of an HTML file in order to write a CSS style we can create
a CSS cope right for this we can use the style St same as this in order to write a
JavaScript code inside of HTML file we

01:47:28
can create a JavaScript scope using the script tags between these tags we
can write any valid JavaScript Logics right this is also the same like this inside
of this HTML file we are creating a typescript scope and we are accessing the
component time script variable so this is how this string interpolation works once
again guys with these curly brackets we are creating a kind of a typescript scope
inside the HTML file so we call this special type of angular syntax string
interpolation so in angular using this we can show a data

01:48:08
inside of an HTML file which is declared inside of the component TS file
when the angular compiler ises this string interpolation this will automatically
look inside the relevant component file and print the relevant variable data inside
the HTML V so for example when the angular compiler compiles this component we'll
see this string interpolation inside the app component HTML file then what will
this angular compiler will do angular compiler will immediately look inside the
relevant components TS file which is

01:48:47
the app component TS file if this is the header component angular compile
will look inside the Ed component TS file not the app components TS file right this
will look inside the relevance components TS file so using this string
interpolation we can show any type of data to the end user so we use this title
this is a string value but guys don't get confused even this C string interpolation
we can show number values and Boolean values to the end user using the same string
interpolation inside of

01:49:27
a string interpolation scope we can pass any valid variables and also
even we can do simple calculations so let's see an example for this down here
create a P tag and create a string interpolation now inside this scope add this 1 +
1 so save this and go to the browser as you guys can see here we can see the answer
of 1 + 1 2 right so guys this is how this string interpolation scope works most of
the time in angular we use this string interpolation to load Dynamic data inside of
a browser VI in other words we call this data bind so

01:50:10
this is how we bind data in angular component hope you guys got the idea
so guys before we move on I want want to show you something so guys creating this
typescript scope inside of HTML we call this string interpolation right so why do
we angular named this as a string interpolation why this string is it something
there so guys in this lecture let's look at this guys in the previous lecture I
said inside of this string interpolation scope we can pass not only string values
we can pass number values

01:50:55
or Boolean values even we can do simple mathematical calculations but
guys in each and every operation the string interpolation will return a string
value so for example inside of this we passed our title value it's already a string
value so when this output the value inside the browser this will automatically
converted as a string value so in our case this is already a string value so this
will return string value right but think if we pass a number inside this string
interpolation what will happen so guys this will

01:51:31
automatically convert this number to a string value right so this is
apply for the Boolean values as well so if you do a small calculation here like 2 +
1 inside the browser we can see only the answer not the 2 + 1 calculation so what
will happen here so this spring interpolation will calculate this value and get the
answer before it's showing inside the browser and it will convert this answer value
to string value right no matter what type of data we are sending into this string
interpolation by the end of

01:52:10
the day before this load inside the browser the string interpolation will
convert all that data to a string value that's why this is named as string
interpolation hope guys got the idea so guys in the previous lecture we learn how
to load a text value dynamically inside the browser view so now let's look at
another scenario think that we have image URL inside of our database so we are
loading it to a variable inside the component T file and what do we have to do is
we have to load that image inside the browser view so

01:52:51
how do we do that first let's create a variable for this inside the
component ES file so the variable name is something IMG URL so this type also
string for this I will copy image URL value from the Google image so copy this
image URL and paste it inside this variable value so guys now we have the image URL
now what do we have to do is we have to load this image URL inside the browser view
so in order to show an image inside the browser not only image in order to show
anything inside the browser we have to add that inside the

01:53:38
 HTML file right so go to the compon HL file and create an image tag so
why do we have to create an image tag in to show an image inside the browser view
we have to use this image HTM tag right so down here the image tag now inside this
SRC attribute we have to pass the path of the image that we want to load inside
this IMG tag we already stored this inside of a variable now what I want to do is I
want to load that image path or the URL to this SRC attribute so how do we do that
for this also we can use the same previous

01:54:20
approach string interpolation this is a typescript variable so this is
HTML file in order to pass a typescript variable to this we have to create a
typescript scope inside this okay so between these codes create a string
interpolation open and close two curly brackets inside this pass the variable name
IMG URL guys follow the capital symbol letters carefully that's it so save this
file and go to the browser as you guys can see here we can see the image inside the
browser view guys even this string interpolation loads this

01:54:58
image inside the browser dynamically we will not use this approach when
we bind a data to HTML property like this SRC property right for this we have a
better approach we call this approach in angular property binding so let's see how
to do this this is very simple first thing first we have to wrap the property
inside of a square brackets so in our case our HTML property is this SRC so wrap
this inside of square brackets now we don't need this string interpolation so
remove this curly brackets and keep this variable as it is

01:55:42
so guys this is what we call as a property binding so save this and go to
the browser as you guys can see here this time also we got the image inside the
browser so guys you guys may get confused why are we using this property binding
without using the string interpolation approach so let's find the answer for this
in the next lecture uh so guys as in the previous lecture we loaded this image
dynamically using this string interpolation as well as using the property binding
approach so in these both approaches this image

01:56:23
was loaded inside the browser without any problem but why do we need
another binding approach if this is loading with this string interpolation approach
to find the answer for this let's see another example so create a button down here
so the button text and the button text will be something disable button guys now
what I want to do is I want to disable this button dynamically so for this I'm
going to create a variable inside the component TS file so go to the component TS
file and after this create a variable something called is

01:57:02
disabled and this type will be Boolean right so as a default value to
this Boolean add a true value now back to the HTML file inste this let's uh disable
this button using our is disabled variable so the property of this disabling is
disable enabled so first let's use the string interpolation approach so inside the
curly brackets pass our variable is disabled that's it so save this all and go to
the browser wait guys before we go to the browser let's duplicate this button again
and for the second button let's use the
 01:57:42
property binding approach so remove the string interpretation scope and
wrap this disabled property with the square brackets so this is what we call
property binding right so again change this button text for the first button
disabled using string interpolation the second button text is disabled using
property binding so save this and go to the browser as you guys can see here this
first button is not disabled which we use the string interval potion method and the
second button is successfully disabled which we

01:58:27
used property binding approach so what's going on here so guys if you can
remember in the previous lecture I told you that even if we use any kind of a data
inside of a string interpolation it will be converted to a string value when it's
loaded inside the browser so in order to disable this button we have to pass a
Boolean value but with the string interpolation this Boolean True Value will be
automatically converted to a string value so that's why in this first button this
is not working so the second

01:59:04
button this disable is working course this property binding will not
convert this Boolean value into string value data type so guys this is the main
different between these two string interpolation and property binding approaches so
guys uh this is the main reason that angular team build these two kinds of data
binding approaches in angular so guys string interpolation can be worked in some
HTML properties but uh the most of the time this will not work so as a good
practice we have to use property binding when we dealing with an

01:59:41
HTML property if you are loading something simple text inside of an HTML
tag inside the browser view for this we can use this string interpolation otherwise
we can can use this property binding so hope you guys got the idea all right guys
in the previous lecture we learned about property binding in this section let's
learn about another important Concept in angular class binding so what is this
class binding class binding is a way to dynamically add or remove CSS classes to an
HTML element based on a condition or

02:00:16
expression for example think about a simple scenario where you have a
button on your web page you want this button to have a different style when it's
clicked maybe you want the button to turn green when it's active and red when it's
not so in a traditional HTML and CSS setup uh you would have to manually add and
remove classes to achieve this right but with angular class binding we can automate
this process so let's see this inaction so let's take the same scenario as the
previous just want to change the

02:00:52
button color based on a condition right so let's do this uh go to the app
compon HML file and create a button so the button tag and the button text will be
something click me that's it so now we have the button next we need the condition
for this we'll use a simple boan value uh for this example also so as you guys know
we do all the dynamic things inside the component typescript file so go to the app
component T5 and create a Boolean variable so the Boolean variable name is is
active and the data
 02:01:29
type is Boolean so after this colon and data type is Boolean so next
let's assign a default value to this fals that's it so next what I want to do is I
want to change these buttons background color to something green when this is
active value set to true so how do we do that for this we can use the class binding
approach wait before that uh we have to define the Cs style right so guys we write
CSS Styles related to this component inside the app component CSS file okay so open
the app component CS

02:02:10
file and let's define the CSS style the CSS class is something name it
active so do active and CSS scope inside this will set the background color to
Green now guys we have the CSS class next let's uh do the conditional logic using
the class binding approach so inside the the button opening tag open and close a
square bracket inside this class so we are dealing with the class binding so this
binding name is class so after this dot now we have to pass the CSS class that we
want to apply to this button

02:02:54
conditionally so which is this active CSS class so pass this here after
this dot so next the equal sign then we have to pass the condition which is our
Boolean value variable right so is active don't forget to pass this inside of codes
that's it so guys this is the class binding syntax very simple right so now save
this and go to the browser we can see this button but this is now in green color so
what is the problem here of course we in the initial stage we set this Boolean
value to false then

02:03:35
this condition statement returns false then this CSS class will not apply
to this button if I change this is active value to True save this and go to the
browser as you guys can see here this time this green color applied to this button
which means this active CSS class applied to this button successfully right so
let's confirm this go the browser inspect element inside this we can find our HTML
code inside this appro we can see our button tag inside this we can see this CSS
active class applied so

02:04:15
guys this is the simple use case of class binding in angular simply this
will add o remove CSS classes to an HTML element based on a condition in the
previous lecture we use the class binding when this condition return true think if
we want to change this button color to something righted when no active status or
when this return Falls so how do we do that very simple so let's see this in action
first thing first let's define a CSS class to this no active status so go to the
app component CSS file and Define this the

02:04:53
CSS class name something no Das active and the CSS scope inside this set
the background color to Red that's it now we have the CSS next let's see how to
apply these both CSS classes to our Target button based on a condition using only
the class binding for this guys we can use another class binding in this button for
this uh no active status so let's see this in action so let's do this inside the
component HTML file after this first class binding let's write our second class
binding inside of square brackets The Binding
 02:05:35
name is class so add class inside the square brackets so after this dot
now pass the CSS class that we want to bind to this button which is this no active
CSS class so next the condition this time we want to apply in this CSS class to
this when this active conditions return false so for this we have to use the not
operator so the not operator is represent with the exclamation mark So after this
the Boolean variable name is is active so guys with this not operator we are
checking the opposite of this

02:06:21
value returns usually this binding works when this returns true with this
not operator we are telling this to work when this return Falls so this is the
simple idea about this not operator so guys that's it save this and go to the
browser as you guys can see here the button is green why is that yes of course now
this bullan value is set to true so let's change this to false again save this and
go to the browser as you guys can see here this time this button background changed
to Red which means

02:07:00
our second class binding also working as we planned so guys this is how
we bind two class binding to a single HTML element angular all right guys this is
Task time so let's do a small task this time I want to add a yellow color border
with the green background color for this button when this returns true otherwise
want to change the Border color to something blue color with the previous red
background color so guys this is the task for you make the button border yellow
when it's true if the Boolean

02:07:38
value is false set the background color to Blue so take your time take
the help of the previous lectures and try to do it yourself once you complete the
task you can continue to next lecture all right hope you guys did the task well now
let's see how to do this guys for this also we can simply use another class binding
inside this button tag so let's do this first thing first we need the CSS style for
these border Styles so let's define them inside the app component CSS file add this
the class name something do active Das border the

02:08:19
style is border so let's set this to 5 pixels solid and the Border color
will be yellow so this style is for the active status again we need another style
for nonactive status so I'm going to duplicate this change the CIS class name to no
active border change this border color to Blue now we have the Styles so let's load
this inside the vi conditionally by using the class by binding approach so inside
the HTML file inside this button tag again another class binding inside square
brackets class dot this is his class name active

02:09:05
Das border so guys we want to apply this active border to the button when
this return through so the variable name is is active so again next for the no
active status for this also again create another class binding inside square
brackets class dot the Cs class name which is this no Das active Dash border so now
we want to apply this when this bant value return false so we have to check the
opposite of this so use the note operator the note operator symbol is exclamation
mark and after this add

02:09:48
the variable name is active that's it so save this all and go to the
browser now this is in red background with blue border why is that yes of course
now this is active value is false so this applied the styles of no active CSS class
next let's change this to true and save this and go to the browser as you guys can
see here now this is in green background with yellow border which means this active
class by Bing CSS Styles applied to this button so guys like this you guys can bind
CSS classes to an HTML element as much as you guys

02:10:31
wanted but guys keep this in your mind stacking too much of class binding
to a single element is not a good practice for this we have a better approach and
easy approach in angular we will learn about this in the later section guys in the
previous lecture we worked with the class binding using a Boolean value but think
what if we have to load a CSS style to an HTML element Based On A String value for
example we want to change the background color of this button based on a something
fruits name which is stored inside of a string

02:11:08
variable so how do we do that so let's see this an action uh first I
create a variable to store the fruit's name so go to the app component is file and
create a variable for this the variable name is something fruit name then set the
variable type to string now assign a default value to this something Apple so add
this inside of codes C this is a string value right so next uh let's create another
new button for this inside the compon HTML file down here create another button
tags and set the button name to something Fruit Ninja

02:11:47
next we need a CSS class for this so let's define that as usual go to the
app component CSS file and Define a new CSS class something uh do Apple inside this
let's set the button background color to red and set the Border color to something
green now let's apply this style to this when this string value is set to Apple so
how do we do that for this also we can use the same class binding approach so
inside the HTML file inside this button tag create a class binding how do we do
that you guys already knew this

02:12:32
yes of course first we have to create a square brackets and inside this
class and Dot now we have to pass this ISS class name which is this Apple so next
the condition we have to check whether this variable fruit name is set to Apple or
not so for this we can use the equals operator so let's see this inaction so inside
this open and close double codes now the variable name is fruits name after this
equals operator double equal signs so hope you guys know about this operators right
so this is nothing to

02:13:11
deal with angular this is something basic knowledge of JavaScript all
right so next we have to check whether this variable value is equals to Apple or
not so again create another codes this time create single codes because we cannot
create another double codes inside of Double codes right so inside this single
codes the value that we want to check is Apple so pass it here that's it so save
this and go to the browser as you guys can see here this apple CSS style are
applied to this Fruit Ninja button

02:13:43
because this fruit name is set to Apple if I change this value to orang
as you guys can see here this time these CSS styles are not appli to this button
cuz in here we made this condition apply this CSS class to this button element when
this variable value equals to Apple hope you guys got the idea so guys in here if
you look at this carefully even if you use a string value to check this but in the
end the statement also return a Boolean value if the string value equals to this uh
the statement will

02:14:16
return true and angular class binding will apply this CSS class to this
button if this value is different than this pass value this will return false and
class binding will not apply to this style to this button in order to work with
angular class binding no matter what variable types you are using for this in the
end you have to pass a Boolean value to this class binding so hope you guys got the
idea all right hope you guys now have a clear picture of class binding now let's
move on to our next Topic in this angular

02:15:00
full course which is style binding let's dive into this so guys in the
previous we learned how to bind and already predefined CSS class into a HTML
element conditionally think uh if in any case if you want to bind uh style only
just one time and it's not predefined in this case we can directly assign the CSS
style into an HTML element using the style binding approach in angular so let's see
this in action Let's uh get the same examples uh like the previous I want to change
this color to Red based

02:15:36
on a condition so go to the up compon HTML file inside this let's create
a button tag and the button text will be something click next we need a Boolean
value so let's take the previous Boolean value now I want to make this button red
when this Boolean value is true so how do we do that as I said uh for this we can
use this style binding nothing much same as the class binding first thing first
open and close square brackets and inside this for the class binding we use the
class keyword but this time we are

02:16:10
using the style binding so the keyword is style so after this we have to
pass the C style property in our case we are going to change the background color
of the button so the CSS property is background that's it so next uh we have to
pass the CSS value for this the value for this is red so after this equal sign and
the value inside the single Cotes red that's it so save this and go to the browser
as you guys can see here this button is red which means our style binding is
working as we expected um

02:16:47
wait a minute guys am I right is this working as we expected now right in
here we didn't pass any condition that we want to display this red color so this
red color will apply to this button when even this Boolean value is false because
there is no connection between these two style binding and this with this Boolean
value so now the question is how do we pass the logical condition to the style
binding very simple for this we have to use the tary condition operator which is
simply one line of if else condition so

02:17:22
let's do this first we have to pass the statement which is this Boolean
variable after this if this value is true we have to set red color so we Define
that using the question mark so next we have to define the L statement if this is
not true let's set this background color to Green so we Define the L statement with
the colon symbol so after this colum and and the value is green pass this inside of
codes same as this looks perfect so save this and go to the browser as you guys can
see here now this button is in

02:18:02
red color because this Boolean value is set to true now change this to
false this time as you guys can see here this button background color change to
green color perfect right guys before we move on to the next chapter let's look at
this in the style binding we added the CSS property so after the style bind right
for this example we use the background CSS property think if any case if you want
to use background color CSS property how do we do that in CSS file we use this
background color something like this

02:18:40
with this slash icon right but when we use this with the style binding
inside the HTML file we cannot use this background color with this slash icon so we
have to use this something like this background color with uppercase C right so
save this and go to the browser as you guys can see here this is working as
previous which means this is working without any issues if I change this like CSS
background color with Dash so now this is not working so guys in order to work with
style binding we have to use

02:19:14
the CSS properties without adding the iPhone symbol or the dash we call
this Dom style properties so you guys can find all the Dom Style properties in this
website go to the Google and search this Dom Style properties and go to this first
result in here you can find all the list of Dom Style properties so you can get an
idea about Dom Style properties in this website so hope you guys got the idea so
now hope you guys have a clear idea about style binding in angular so now see how
we can bind multiple styles

02:19:53
of an HTML using angular style binding so in the previous we set the
background color to this button in this lecture let's see how we can set the border
to this button same approach as the class binding we have to bind another style
binding to this button after this first style binding open and close square
brackets the bind is style so pass it here next is here a style property we are
going to set a border to this so This us property is border guys as you know for
this we have to pass the D CSS property so for the

02:20:31
border both CSS property and the Dom are same so pass border here next we
have to pass the Cs property values and the condition so inside uh the Double codes
pass the condition which is this is active and next we have to pass the value so if
this is true we represent this with question mark So if this is true set the Border
value inser single codes pass the value let's set the Border thickness to 3 pixels
and Border type is solid and the Border color will be something yellow next in
order to work this we

02:21:15
have to define the L statement as well otherwise this will not work so
pass the false statement here which is represent with the colon symbol so after
this just simply pass an empty statement so that's it save this and go to the
browser when it's true this loaded the both styles that we bound to this button
using the angular style binding approach so guys like this you guys can bind as
many as styles that you guys want to this button that's it for this lecture let's
go on to the next chapter all right before we move on to

02:21:57
the next lecture let's look at the difference between Class binding and
the style binding so guys with the class binding we conditionally appli the Cs
classes to an element but with the style binding we conditionally applied only CSS
properties so in our example we applied multiple Styles in the both bindings
approaches right but in the class binding we don't need to bound multiple class
bindings course we can Define all the style inside of a one CSS class and we can
bind that class to the HTML element using the class binding so

02:22:32
using this we can simply apply multiple CSS styles to an element with
just single class binding wait let's look for an example for this let's take the
same example like the previous I want to add the background color and the at the
same time I want to add the Border color to this button at the same time so for
this we can simply create a CSS code something like this create a CSS class
something active and the style will be background color green and the Border will
be 3 pixel solid and set the color

02:23:08
to Yellow now we can simply bind this class to this button so inside this
add the class binding and this is class is this active so next the condition
Boolean value this variable is active so save this and go to the browser as you
guys can see here this applied this both styles to this button so if you're using
the style binding for this we have to write two style bindings to this button like
our previous example so guys when we dealing with only one CSS style we can use the
style binding but in any

02:23:42
case if we need to apply multiple CSS styles to an single element in this
case always try to use the class binding approach so this will reduce the
unnecessary lines of codes so hope you guys got the idea all right that's it for
this lecture let's move on to the next lecture all right guys let's move on to the
our next topic event binding in angular so guys what is this event binding simple
nothing much here guys think if you want to perform some kind of action when
clicking a button how do we do that very simple for this we can

02:24:19
use the event binding in angular so let's see this in action so inside
[Music] the HTML file let's create a button and add a button T something click me
so now let's see how to perform the click action so guys for this in man JavaScript
we use the onclick event function right something like this but in angular we have
something cleaner approach for this so guys for this click we have the click event
binding so in angular we Define all the event bindings inside of brackets so open
and close brackets inside this we have to pass the

02:25:00
event that we need to perform on this button which is Click just simply
pass that inside this brackets all lowercase letters now next we can Define the
action that we want to perform on this click event so let's call a method from this
h this said the method name something button click and this is a method so don't
forget to add the parenthesis that's it for the click binding but guys we have an
error here property button click does not exist on type app component if I save
this inside the browser also we can see this

02:25:45
error so what is this problem here can you guys guess yes of course we
are call ing this method from this click event but inside our app component T file
this method is not exist so in order to fix this we have to Define this method
inside the app component TS file so inside the class cope create the method the
method name is button click pass this same as this otherwise we will get errors
next the parenthesis and the method scope so save this now and inside the HTML file
now there is no any compile errors inside the browser also

02:26:28
the previous error was gone right awesome right so guys now click on this
button nothing happened why is that can you guys tell me yes we just Define this
method but inside this method we are doing nothing this method is just empty method
so when we click this button this will look inside this method scope and if there
is something this will execute and return the result otherwise this will return
empty so in our case this method is empty that's why we are not getting anything so
let's log something so inside this method scope

02:27:08
console. log the log will be something uh button clicked so save this and
go to the browser click on this button again nothing happened is there anything
wrong again now we just log this inside the browser console in order to see this we
have to access the browser console so right click and go to the inspect element and
now navigate to the console tab from this browser developer tools as you guys can
see here inside this console we can see our log button clicked so let's click this
button again

02:27:43
as you guys can see here this logged our message inside the console again
so which means guys this click event is working as we expected so guys this is what
we call event binding in angular so we can use event binding to perform any user
actions such as click hover keyboard key press etc etc so simply this is what we
call event binding in angular all right in this lecture let's look at more event
binding examples we already looked at the click event next Let's uh see Mouse H
event so for this in angular we can use the mouse over

02:28:26
event binding so remove this click event and add the mouse over event
save this and go to the browser when I over this button we got this message printed
on the browser console like this we have so many events in angular you guys can
check them one by one I'm not going to cover all the events in this lecture all
right uh next let's look at at another special event which is keyboard event under
this we can find many events from this let's look at the key up event with an
example so I think if we want to show

02:29:03
a message when we hit the keyboard Enter key so how do we do that as I
said for this we can use the key up event binding so let's see this in action in
order to check this first thing first we need a text field right so this time we
going to work with the key key keyboard event so down here let's create the input
field the input field type will be text next we want to capture the event for this
we're going to use the key up event so inside brackets pass the event name key
after this let's call a method from

02:29:40
this um for this let's use another new method so name this method
something key enter so after this don't forget to add the parenthesis so we are
getting this error because this method is still not exist in our application so
let's create this method inside the app component ES file create the method the
method name is key enter and after this add the parentheses so at last don't forget
to add the method scope so now inside this like the previous example let's simply
add a log so console. log and the log message is

02:30:18
something key pressed that's it so now save this all and go to the
browser as you guys can see here we got this input field so now inside this type
something look inside the browser console each time I press a key on the keyboard
we are getting this key pressed log message printed inside the browser console
awesome right so this is how this key up event works so guys next what I want to do
is I want to show a message when pressing the enter key so how do we do that let's
see this in next lecture all right so now let's see how

02:30:57
to show a l message when we press the enter key for this we have to
capture the key that we pressing on the keyboard so how do we get that very simple
for this we can use the key code guys there is a unique key code for each and every
key in the keyboard so we can capture that and filter out what we are currently
pressing on the keyboard so let's let's see how to capture this key code for this
guys first we have to pass the event object to this method so what is this event
object each and every

02:31:30
element in HTML has its own by default an event function so when uh user
interacts with an HTML element this will trigger that event function and return
some useful data about that event so guys this is not to do anything with angular
this is just a basic of JavaScript right all right so let's move on now what I want
to do is I want to pass that event object to this method because we are going to
filter this inside this method right so how do we capture that event object very
simple by default this will capture that event

02:32:07
 object and store it inside of an object variable which is the dollar sign
event variable so we can pass that to this method as a parameter for this object
the event variable is dollar sign event as you guys can see here we are getting
this error why is that yes of course we are now sending a parameter for this method
but inside this method we are not capturing that parameter so in order to fix this
error we have to capture this parameter so go to the app component is file and
capture the event parameter variable so

02:32:46
inside this parenthesis the parameter variable create something parameter
variable event set this type as an object because we are receiving an object from
this next let's log this event parameter variable here we can so we can see what we
are getting from this so after this at console.log and the parameter variable is
this event so that's it save this all and go to the browser now type something on
the input field as you guys can see here this time we are getting this keyboard
event object printed here so guys this is the

02:33:29
collection of data that can be obtained when a user perform a key up
event so now expand this inside this we can find so many objects data but for this
lecture we will focus only this key code so previous I typed letter A here that's
why I got the key object value as a a and the key code AS 65 so guys this is the
key code that I talking about so for the lowercase a the unique key code is 65
right so wait let's print only the key code here then we can see this clearly so go
to the component file and let's print only the

02:34:11
key code so after this dot the object key name is this key code follow
this Capital simple letters carefully in order to prevent this let's make this
parameter variable type to any so that's it save this and go to the browser now
type letter A inside the text field as you guys can see here this time inside the
browser log we can only see this key code okay now if I press the enter key I will
get this key code 13 which is the unique key code for the enter key so guys using
this we can filter out the

02:34:50
ENT key press and we can show the message so let's do this inside the
component is file now inside this let's add if else statement filter the key code
so if the condition is we have to check this key code is equal to 13 or not so even
parameter variable dot key code equals and pass number that 13 here so inside this
create a log and the log message will be enter key pressed let's remove previous
logs save this all and go to the browser type something inside our text field we
are not getting any logs inside the browser

02:35:40
console now press enter key as you guys can see here this printed this
pressed enter log inside the browser so so guys with this we are filtering the key
up event only for the enter key so hope you guys got the idea all right so in the
previous lecture we did the KE EV filtering or Enter key press so for this we use
the traditional JavaScript approach but guys in angular we have a cleaner and
easier approach for this event filtering so let's do this for this let's create
another input field so you guys can find
 02:36:20
the difference down here create a input field the type will be text next
let's do the key up event insert brackets the event is key up so after this let's
call a method something key up filtering and don't forget to add the parenthesis
next inser the up component file create this method the method name is key of
filtering and the parenthesis after this add the method scope now inside this for
now just log key up event filtering now save this all and go to the browser now as
you guys can see here

02:37:02
inside our second input if I type something we are getting this log
perfect now what I want to do is I want to filter this key up event only for the
enter key press so how do we do that for this we can use the angular event
filtering approach so this is very simple compared to the previous approach so
inside the HTML file after the SK up event binding add this dot enter so guys with
this we are telling to this event binding to trigger when only user press the enter
key that's it simple right so

02:37:39
save this and go to the browser as you guys can see here when type
letters inside this input we are not getting any logs printed inside the browser
console but if I press the enter key as you guys can see here we got this log
message which means the key up event is successfully filtered to work only when
user pressed the enter key so this is a very clean and just single line of code to
compare to the previous approach so this is what we called event filtering in angle
so this will work with all the events binding in

02:38:16
angular so guys before we move on a small question for you guys think if
in any case uh if you want to filter this event when user pressed the letter A on
the keyboard how do we filter this can you guys tell me yes of course we can simply
modify this key up event binding filter to a remove this enter and replace this
with the letter A so that's it save this and go to the browser as you guys can see
here this time this event binding is working only when I press letter A on the
keyboard awesome right so guys this is the simple use

02:38:57
case of event filtering approach in angular let's move on to the next
lecture so guys let's move on to the next lecture so previously we worked on this
event filtering so in this lecture let's see how to capture the input values that
user entered inside this input field for this we have several approaches in angular
so let's look at the basic approach so which is capturing the data using the
template variable so go to the HTML file in inside this input first thing first
let's create the template variable so

02:39:47
how do we create a template variable very simple just create a variable
name with the ash symbol so Ash symbol and on the variable name something let's
assume this text field is for the username so name the variable as user so guys
this is the template variable now let's see what is the use of this template
variable in order to get use of this variable we have to send this to the component
TS file so let's pass this to this key of event binding method as a parameter so
inside this parenthesis pass the template variable
 02:40:29
name user next we are getting a compile error why is that now for this
method we are passing a parameter so in order to prevent this error we have to
capture this parameter variable from this method go to the app component is file
and create a parameter variable inside this method parenthesis Set uh this
parameter variable as user and this type will be guys with this uh template
variable we are sending an HTML input element so set this data type as HTML input
element awesome now inside this method let's

02:41:11
lock this parameter so we can see actually what we are getting with this
parameter template variable so let's use this same log so remove the log message
and pass the parameter variable to this log method that's it so save this all and
go to the browser type something inside this input and hit enter as you guys can
see here we got this HTML input tag printed here so guys actually what is this guys
this is our HTML input tank right to verify this let's set an ID to this input uh
go to the HTML file and set an ID to this

02:41:52
input tag the ID value will be something user input now save this and go
to the browser type something and hit enter as you guys can see here this printed
the HTML input tag with the ID user input which means this template variable is
actually returning this actual HTML input tag so now the question is how do we
capture the input tags value so guys by default all the HTML input tags have an
attribute called values right which store the input values of an HTML input tag
this is just a basic HTML and

02:42:30
JavaScript thing right so by accessing the value attribute we can access
this text Fields value right so go to the component is file this time let's log the
values instead of all HTML element so after this add this dot value that's it so
save this and go to the browser type some something and hit enter as you guys can
see here this time we got the text Fields typed value instead of the wall input tag
so how do we got this this time we are logging this values property of this
template variable so

02:43:06
that's why we got only the values so guys this uh how we can capture the
text Fields value using the template variable so guys with with this we are not
only capturing the value we can also capture any attributes of this input tag with
this template variable for example if you want to capture the ID of this text field
we can access that using the ID property so remove this and add the ID here save
this and go to the browser as you guys can see here this time we got the ID of this
text field printed here

02:43:42
so like this we can access all the attributes of HML input tag using this
template variable so guys this is a simple use case of our template variable so
hope you guys got the idea all right so guys in this lecture let's study about
another important topic in angular which is two-way data binding so the first
question is what is this two-way data binding guys simply for now keep this in your
mind this two-way data binding is a simple approach for manipulating user input
data from W to component and component
 02:44:20
to view in other words we use this approach to send and receive data
between component files to HTML file and HTML file to component file for example
when a user wants to edit his username and think his current username is stored
inside of a username variable for this first thing first we have to get the current
username of the user from the component file because we declare all the dynamic and
logical stuff inside the component TS file right so we have to bring that current
username and load it inside of an input

02:45:02
HTML element and we have to again send back the current edited username
to the component file from the HTML input element to update and store the edited
user name right so wait let's uh do this example so you guys can understand this
clearly first let's create a variable to store the default username so inside the
app component stre file create a variable the variable name something user name and
this type will be string and set a default username something John do next what I
want to do is I want to

02:45:43
load this username inside of an input text field so how do we do this so
let's see this go to the HTML component file and let's create a new HTML input
field next I want to set a default username to this input fet for this we can use
the property binding approach so inside this text input tag open and close property
binding square brackets now inside this we have to pass the property which is value
property so pass it inside this uh next assign the username variable to this so
guys this will assign and load the

02:46:23
username inside this text field right so sa this and go to the browser as
you guys can see here this text field loaded our default username so how this
loaded we use the property binding for this okay so now we can edit this J to John
Smith so next let's update the edited username in order to capture this edited
value we have to use a template variable and send the value to the method we
learned about this in the previous lecture so let's do this inside the input tag
first let's create a template

02:47:05
variable hashtag we Define the template variable with hashtag right so
after this the variable name something user name this time name this all simple
letters next let's uh submit this St variable to Method when click enter for this
first we can use the key up event with the event filtering approach so inser
brackets the event is key up and the event filter is dot enter next let's call uh
the method from this uh the method name is something update user name after this
don't forget to add the parenthesis so now first username

02:47:52
template variable to this method as a parameter all right so next go to
the app component TS file and create this update username method uh this required a
parameter variable so create that the parameter variable is usern name and this
type will be HTML input element inside this method let's update the edited username
and replace the default user name value so our Global username variable so we
access This Global variable in typescript using the this keyword right so this dot
username assign this

02:48:45
username parameter and Dot value so this parameter capture the input text
element so in order to capture the value we have to access the value attribute so
this is what we did here we learned about this in the previous lecture right so
after this uh let's log our Global username that's it so now save this and go to
the browser now edit this username John do to John Smith hit enter inside the
browser console we got our edited Jon SMI usern name which means we successfully
updated our default username John do as John Smith right so

02:49:31
guys this is how we send data from component file to HTML file and HTML
file or the view to the component file first we loaded the default username inside
this text input using the property binding so this is what we so this is what we
can Define as sending data from component to HTML because this username is stored
inside the component file right so next in order to store the edited username we
have to again send this edited username back to the component for this we used the
template variable and event binding

02:50:08
approach so in here we used almost all binding approaches in angular
right so doing this data transferring between component and view fun but it's not
easy right we have to go through so many steps but we have a clean approach for
this in angular so we call that approach to a data binding in angular so let's look
at this in detail in the next lecture all right guys let's continue our journey
with to a datab binding in angular so in the previous lecture we learned about how
to send data from the

02:50:47
component file to HTML file and and WIA we used property binding and
event binding for this right but as we discussed it's not an easy task we have to
go through so many steps but don't worry angular provides us a cleaner and easier
approach for this we call this approach two-way data binding so let's dive in so
let's uh go back to our app compon file we have our input field here right so now
what I want to do is I want to implement two dat binding on this input fi so how do
we do that very simple Ang going provide us a directive

02:51:25
called NG model for implementing toway data binding so let's see this in
action so inside the input tag add NG model so now we have to rub this inside of
brackets and square brackets so WRA this first wrap this inside of brackets then
square brackets so guys remember this m must be Capital so after this assign inser
codes pass the variable name that we want to load here which is this usern name so
as you guys can see here we are getting a compile error what is this error so guys
in order to use this NG

02:52:24
model with our component we have to import that otherwise this will not
work right so go to the app component T5 inside this import array add this forms
module so guys this NG model directive is coming from this forms module right so
that's why we are importing this forms module here so next select this auto
complete this will add the import statement automatically we don't need to add that
manually so that's it so guys this will Implement to binding on this input field so
save this and go to the browser as

02:53:02
you guys can see here the text field loaded our default username how this
loaded so guys we use tway data binding for this right so now we can edit this so
JN to John Smith now let's uh update the edited username in order to capture this
edited value we don't need to use template variable and send the value to Method
like the before to data binding will automatically update the username variable in
our component file when we addit the value in this input field so let's see this in
action so guys for this let's load the

02:53:43
username variable inside the browser view so how do we load this username
variable inside the browser for this we can use the string interpolation approach
right so inside the HTML file after this text field add an H3 tag and add the
string interpolation scope open and close two curly brackets inside this pass the
variable name that we want to show inside the browser which is this username that's
it so save this and go to the browser as you guys can see here this loaded the
default username here

02:54:16
John do now let's change this to John Smith as you guys can see here in
real time this updated the username John do to John Smith so if I change this to
something else as you guys can see here the username variable value also change so
this is the beauty of two-way data binding guys this is how we Implement two-way
data binding in angular it's a Simple and Clean approach for manipulating user
input data from view to component and component to view we just need to use the NG
model directive and angular will take care of the rest

02:54:54
so awesome right in the previous video we learned about the two-way data
binding some of you may wonder what is this two-way data binding how this is
different from this property binding and actually what is this two-way data binding
and oneway data binding so if you look at the one-way data binding so this oneway
data binding will bind the data from the component to The Weave so this oneway data
binding is unidirectional so you can only bind the data from the component to The
Weave let me show you a

02:55:33
quick example for this create another input tag after this input and hit
enter input type will be text now I want to add value to this input how do we do
that normally we set the value property to this input Feld F and we'll add the
value inside the codes value will be something one way data [Music] binding so save
this and back to the browser look at this we got this two-way data binding inside
this text field so this is how we doing this in normal HTML but I want to make this
Dynamic so I will create a variable inside the

02:56:13
component TS file something text value this V is capital this variables
data type is string so after this assign a value for this inside codes something
value is coming from the component so save this now go to the app component HTML
file now I want to pass the text value variable to this input how do we do that if
you can remember we learned earlier how to show a variable inside of this HTML wave
using string interpolation and property binding now we are dealing with this value
property so let's use the property binding method

02:56:57
so let's make this value property as a property binding by wrapping this
inside of a square brackets now we are getting the value from the component so
remove this hand coded value and add the variable name text value now save this end
back to the browser perfect now we got this value in inside this input field now
think if you want to capture this value when we press the enter key like previous
video example for that first bind the event with the event filtering for Enter key
assign it to this same on key up

02:57:39
method save this now go to the component file and remove this previous
log and add this new log this time lock this text value variable save this all and
back to the browser now we got this value inside this text field so hit enter look
at the browser console in here we got this log saying value coming from the
component which is same as this now let's change this value to Value coming from we
now hit enter look at the console this time time also we got this same previous
message again change this

02:58:23
to something else still we are getting the same message what is happening
here if you look at the code this is passing this text value variables value to
this input with property binding but this cannot modify this changed value and
assign it to this component text value variable that's why we are getting this same
value from this log so this is what we called oneway Data binding with this we can
only bind data from component to V we cannot change this variables value from
inside of this wave or with this

02:59:07
HTML page but with the two-way data binding we can pass data from
component to weave and also we can send data from weave to component let's see this
in action again create another input field input type is text now bind this text
value variable to this in previous example we did this using the property binding
this time let's do this with the two-way data binding we learned about this in the
previous video so open and close square brackets inside this again simple brackets
inside this type NG model

02:59:48
so this is the special angular Syntax for two-way data binding so after
this equal sign now pass the variable name inside Cotes text value after this add
the same key up function copy and paste it here save this alline back to the
browser we got this value inside this second input as well now change this value to
Value coming from the vi and hit enter look at the consol this time this value
change to this value again type something else and hit enter perfect right we got
this value log inside the browser console so this

03:00:32
is the usage of two-way data binding if you quickly recap this with
oneway data binding we can only set data from component to we we cannot modify or
add changes to that data from VI and send it back to the component but in two-way
data binding we can pass data from component to V and also we can modify that data
and send it back to the component from the Vive this string interpolation property
binding class binding and the style binding all these data bindings are included
into the oneway data binding category we can

03:01:12
only do 2ay data binding using only this NG model syntax hope you guys
got the idea hey everyone welcome back we know components in angular are essential
but what if we need to add a behavior or modify the D elements directly how do we
do that can you guys guess yes you are correct we use angular directives so guys
what exactly are angular directives well angular directives are classes that add
additional Behavior to elements in your angular applications they allow you to
manipulate the Dom which is the

03:02:03
document object model directly this is important for creating Dynamic and
interactive web applications so why are directives so important in angular
applications directives are a fundamental concept in angular they enable developers
like us to extend the functionality of HTML by creating custom behavior that can be
reused across our application so with directives we can change the appearance
Behavior or layout of a Dom element making our application more Dynamic and user
friendly so now let's talk about the

03:02:45
different types of angular directives so there are three main types the
first one is the components directive so these are the directives with the template
they are the most common directives that you guys are probably already using when
you create components each component manage a part of the HTML for your application
it's like the captain of a team leading the judge so next we have the structural
directives uh Guys these are the ones that change the structure of the Dom by
adding removing or manipulating elements you

03:03:27
might have seen them as ngf or ng4 they are like the construction workers
of your application building and reshaping the UI next we have the attribute
directives so this directives change the appearance or behavior of an element
component or another directive so they are like The Stylist of your application
taking the look and feel examples includes Eng style or NG class so next uh we can
create custom directives so using this we can create our own custom directives from
scratch understanding these types is

03:04:09
essential as they form the building blocks of creating complex angle
applications each type of directive serves as a unique purpose and can be used in
combination to achieve powerful results so guys uh once again you guys might wonder
why should I use these directives in an angular application so using directives
makes your app more responsive Dynamic and easier to manage they let you to reuse
code and keep your templates cleaner which is great for maintenance so of course
who doesn't like clean readable and more robust code

03:04:53
right so let's get ready to explore the powerful world of angular
directives in the next lecture we'll start with structural directive where we will
learn how to dynamically add do remove elements from the D so let's move on to the
next lesson all right so guys now in this lecture let's talk about component
directives and structural directives so as you guys know we already learned about
component directives right in angular we categorize components under directives
basically we use components to load a weave inside the browser

03:05:30
According to some conditions so hope you guys remember this so guys keep
this in your mind directives are kind of a component without a view and angular
components are directives with a VI everything you can do with an angular Direct
active you can do with angular component so guys this is the simple difference
between angular components and directives all right so let's dive into the
structural directives so let's see what structural directives are available in
angular with the updated syntax at if at for at switch and in the

03:06:11
next lectures we will dive into each directives with detailed examples so
now let's focus on structural directives structural directives are special
directives in angular that can change the Dom layout by adding and removing
elements based on a condition they alter the structure of the do for example think
about a situation where you want to display a welcome message only if the user is
logged in so in this case we can use the if angular directives to achieve this
right so the most common structural

03:06:49
directives in angular are ngf ng4 and the NG switch but with angular 17
and up we have updated Syntax for these directives which are these at if at for and
at switch cases so we will no longer use these previous directive approach right so
don't worry about this you guys will get used to this in next l lectures all right
so we use this active directive to conditionally render elements based on a boan
expression so this at four directive we use to repeat an element for each item in a
collection and this switch directive we use this to

03:07:38
display one of a set elements based on a matching criteria so guys now I
think you guys have an overview of what structural directives and the new syntax
available in angular 17 and up these directives are powerful tools that allow you
to control the Dom structure dynamically and efficiently so guys keep this in your
mind this section is very very very important right so in the upcoming lectures
we'll dive deeper into each directive providing detailed examples and answer task
to solidify your understanding so let's move on to the

03:08:19
next lecture all right so let's dive into the if else directive thing
that I want to show the username in the web only when user is logged in how do you
do that very simple you guys already know about this uh so for this we can use the
if directive in angular so in the previous lecture I told you that in the latest
version of angular they introduced a new syntax approach for this if directive but
still in any case if you guys want to use the old version you guys can use that
also so I show you both approaches

03:08:57
so you guys can understand the old way and the new way so first let's uh
see the old way before that uh I cleared all the previous codes so first for this
we need two variables so let's create them as usual inside their component T file
create the variable the first variable is for the user logged in status so set the
variable name as is loged in set the variable type to Boolean and the set a default
value something false next create a variable for username so the variable name is
username and set the type to

03:09:38
string at last set a default value to this John do all right so next
let's see how to load this username inside the browser view so guys how do we do
that I'm not asking about the conditional loading I'm just asking how to load this
username variable inside the browser view yes of course we can use string
interpolation approach so let's quickly do this inser the component HTML file let's
load this username so we'll load this inside of an H2 tag so create H2 tags between
these at the string interpolation scope how do

03:10:21
we do that open and close two curly brackets right so inside this now
pass the variable name which is the user name so guys now save this and go to the
browser as you guys can see here the username joone door loaded here right now
let's see how we can load this username conditionally inside the browser view when
the logged in status true so for this uh as I said earlier we going to use the old
approach the NF directive so let's see this in action so if you guys can remember
the previous lecture the data binding so like that we

03:11:05
have to add the ngf also inside the HTML tags opening tag as a attributes
so inside this heading tags had asri symbol and after this add NG if so this I is
capital now after this add the equal sign so inside codes pass the condition which
is we already stored inside of the is logged in variable so pass that here the
variable name is is logged in so guys this NG will render this heading tag only if
this condition return true otherwise this will not load this inside the browser
down so so guys in order to

03:11:48
work this directive we have to import this ngf directive module to this
component so go to the component file and add the ngf module inside this input
array add the module ngf so carefully follow this Capital simple letters so now
select this auto complete so this will add the import statements automatically so
guys this is coming from this angular command package that's it so save this all
and go to the browser uh inside the browser we got nothing why is that because we
set this is logged in value to false if this

03:12:29
return false NG will not load this inside the browser now let's change
this false to True again save this and go to the browser as you guys can see here
this time this loaded the username inside the browser so guys this is how we use
the NG directive to load something inside the browser view based on a condition all
right so in the previous lecture we loaded this using the ngf directive so guys
this previous approach is the oldest way so now let's look at the new way which is
the at if else syntax way so let's see this in action

03:13:12
 we'll use the same example as previous so down here again create another
H3 tag and load the username using the string [Music] interpolation now let's see
how we can load this inside the browser View using the new way so nothing much it's
very simple so just open and close the if condition scope so the key is at if after
this condition parenthesis and the score so simply open and close two curly
brackets so so now inside this parenthesis pass the condition which is the Boolean
variable is logged

03:13:54
in now inside the scope put this H3 tag that we want to show inside the
browser view so when this statement return true this will load inside the browser
that's it so this is simple right so this is same like the JavaScript and other
programming languages if directive okay so for this we don't need to import any
modules like the previous NG if so save this all and hold the browser as you guys
can see here this loaded the second username here which is loaded using the syntax
approach so guys this is how we use the

03:14:36
new syntax approach in angular so guys now in this lecture let's see how
the opposite of the if condition which is the else condition works so how do we
implement this to these two approaches think if I want to show a message something
user is not logged in instead of this username when the user is not logged in or
when this bullan value is set to false how do we do that it's very simple so first
let's look at the first approach the ngf directive approach so guys uh
unfortunately in this ngf directive like

03:15:19
this ngf we don't have another directive like NG else so in angular in
order to show this user not logged in message we have to use another same ngf
directive again right so before that let's create the message for this let's use uh
H4 tags open and close H4 tags between this pass the message user is not logged in
next we have to show this message in The View when the user is not logged in in
another way we have to show this message when this Boolean value is set to false as
I said for this also we have to use

03:16:03
another NG if so add the NG if directive and the condition is this time
we have to check the opposite of this is logged in Boolean value so for this we can
use the note operator so we learned about this in the previous lecture right so the
exclamation mark represent the not operator so at that here after this at the
variable is log in that's it so guys with this we are telling this to load this
message when uh the statement returns false so how you guys got the idea I say this
and go to the browser we

03:16:45
got the username why that because this value is set to True Boolean value
now change this value to false save this and again go to the browser as you guys
can see here now this loaded the user not logged in message which means this
condition worked this return false awesome right so guys this is how we deal with
the else condition using the ngf directive so let look at our second syntax
approach uh guys so how do we do this using the syntax approach for this also guys
we can do the same approach
 03:17:22
like previous we can create another if condition down here and we can
check the false statement with the not operator and we can load the not logged in
message inside the browser view same like previous right um wait let's write the
code so you guys can understand this clearly down here again create another if
syntax block at if after this parenthesis and the if scope now the condition is the
same as the previous opposite of is loged in so not operator and the variable is is
logged in now inside the scope let's pass uh the

03:18:00
message that we want to show inside the browser way for this also create
an H4 tag and the message is something user logged out um add this also inside
brackets loaded using IF syntax block so now we can clearly differentiate these two
approaches inside the browser so now set this variable value to True inside the
browser we cannot see any messages so now again set this variable value to false
now this loaded the both messages ngf and if syntax blocks messages so which means
this also working fine

03:18:48
so guys before we move on in angular if we use this if syntax block
approach in our angular application we have an advantage this syntax block included
the else block so not like the previous ngf approach so we can simply create an
else block same as this if block and we can simply render the message so let's see
this inaction down here after this first if block create a else block same as the
is at symbol and the block is else so for this uh we don't need a condition
parameter so just simply add the else

03:19:28
block scope with curly brackets now pass the message simply copy and
paste the previous message and change this to loaded from else syntax block that's
it so save this and go to the browser as you guys can see here this time this else
block message also rendered inside the browser which means this also working as we
expected so let keep this in your mind as a good practice we will use this else
block when we used the if syntax approach in our angular application so we will not
create another new if block again so guys

03:20:04
that's it for this lecture hope you guys got this right so in the
previous lecture we learned about the condition when we learning the directory
approach I said that there is no NGL directive guys actually we have an lse
statement in a ngf directive but its approach is something a little different so in
this lecture learn about this in detail so guys in the previous lecture we used
another ngf to handle the else condition part this worked but it can get a bit
messy when we have to deal with multiple

03:20:42
conditions right so let's look at a cleaner way to do this for this guy
guys in angular we have another directive which is NG template so let's dive in uh
first let's take the same example as the previous I want to show this user not
logged in message when this is logged in value set to false so first let's define
the message which is this H4 tag so let's duplicate this and remove the NG course
now we don't need this NG change the message to something loaded using NG template
now we have to WRA this message
 03:21:23
inside of NG template tags so guys we use this NG template as HTML custom
tags so open and close NG template tags ng- template so now inser this cut and
paste this message all right so now we have to give an identifier to this so we can
access this NG template outside of this so for this we'll use template variables we
learned about this also in detail in the previous lecture right so how do we create
a template variable we declare a template variable using Ash symbol right so hash
symbol and the variable name set

03:22:09
this to something message awesome now we have the NG template now let's
see how to deal with the else condition part nothing much after this NG condition
add this so first add a semicolon after this else keyword then we have to pass that
we want to do in this else part so in our case for this we want to show this NG
template message so how do we pass that here very simple just simply pass this
template variable here so this will render this NG template message P inside the
view if this Boolean value set to false that's it so

03:22:52
save this and go to the browser as you guys can see here we got this
message which is loaded from NG template so guys this is how we deal with ngf else
condition so guys this approach is almost out of date throughout this course we
will use the latest syntax approach if you guys don't get this leave it it will be
a not an issue all right so let's move on to the next l so guys in the previous
lecture we learned how to deal with angular if directive only using Boolean true or
false values but guys for this we can

03:23:38
use string or number values as well so this lecture let's look at how to
use NG if directive with number values so first look at the ngf directive and in
the next lectures we look at the new if syntax approach so let's get started so
guys let's look at this with an example so for this I want to show message when the
user exceeds three login attempts so we'll count the login attempts with a login
button so let's do this for this first thing first let's create a button so go to
the app component file

03:24:17
and create button tags the button text will be login so next what I want
to do is I want to count the login attempts when user clicks this button so how do
we do that so very simple for this we can use the click binding approach so inside
this button starting tag add a click event binding so how do we add that we learned
about this in the previous lectures so how do you do this very simple for event
bindings we use brackets right so open and close simple brackets inside this pass
the event which is Click now when

03:25:00
this click event occur we'll call a method something count login ATMs so
after this don't forget to add the parenthesis so guys as you guys can see here we
are getting this compile why is that can you guys tell me yes of course so guys we
are calling this method from here but there is no method declared inside the app
component TS file so in order to fix this we have to create this method so go to
the app component TS file and create this method the method name is Count login
attempt so carefully follow this simple capital
 03:25:39
letters so after this add the parenthesis and the method scope so we
successfully created the method next what I want to do is I want to store the login
count inside of a variable so when user click the login button so let's do this uh
for this first thing first we need a variable so create a variable the variable
name is something login count set this type as number so after this set a default
value to this zero next what I want to do is I want to increment this login count
by one when user press the login button so how do we

03:26:26
do that very simple so inside the account login method let's increment
this variable value by one so for this we can use the increment operator which is 2
plus symbols so inside this the variable this Dot Login count after this Plus+ so
that's it so guys once again simply in this increment operator will increase this
login count value by one so by default this value is set to zero so when user press
the login button at the initial stage this will increase the default value by one
in order to see

03:27:11
this clearly We'll add a log down here so after this add a con so log and
pass this variable inside this log parenthesis that's it so save this all and go to
the browser now click on this login button inside the browser console we can see
number one so if I press this login button again we can see two and so on so this
method is working as we expected right so guys next let's work on the conditional
logic uh guys I want to show a message when user exceed three attempts of clicking
this login button

03:27:53
so how do we do that for this we'll simply use the ngf directive so first
thing first let's create the message for this let's use an H4 tags the message will
be exceeded three login attempts try again later that's it so now I want to show
this message when user EX Ed the clicks of this login button so for this add the
ngf directive inside this H4 opening tags as symbol and the directive NG if so
after this add the condition which is we are store this login count inside of this
login count variable so add that

03:28:42
here login count and add the greater than symbol after this add number
three so with this we are telling to this condition if this login count variable
value is greater than three show this message that's it so save this all and go to
the browser as you guys can see here now we are not getting the warning message so
click the login button three times after I click three times this error message
appeared inside the browser awesome right so guys once again with this condition we
are telling to check

03:29:20
whether this login count variable value is greater than three or not if
this greater than three this greater than operator will return Pro so in that case
this message H4 tags will render inside the browser so this is how this error
message loaded inside the browser so hope you guys got the idea so guys before we
move on to the next lecture let's see another example now I want to hide this
button when the user attempts three times to login so how do we do that for this
also we can use the same approach so add uh NG if directly to

03:29:58
this button opening T the condition this time first at the login count
variable and check whether this login count is less than number three so this time
I want to display this button when this login count value is less than number three
right so if this login count value is less than three this will return true then
this button will appear inside the browser otherwise this button will not rendered
inside the browser so that's it save this all and go to the browser click this
button three times and as you

03:30:37
guys can see here this time after the attempt three login button disate
from the vi and this login attempt warning message appeared inside the browser view
awesome right so guys this is how we deal with numbers in NG if directive so in the
previous lecture we learned how to deal with number values in if directive using
the old ngf directive so in this lecture let's see how to do this using the new
syntax approach so first write the if block wait before that for this also we'll
Define another button so create a

03:31:17
button tags and add the button text login syntax next copy and paste the
previous click event binding no need to change anything that's it so next after
this create the if block inside the condition parenthesis add the condition so this
time we want to check whether this login count value is greater than number three
so same like previous so inside this block add the message that we want to display
inside the browser so I will copy and paste the previous message so at last don't
forget to remove the ngf directive from this H4

03:32:05
tags that's it so save this all and go to the browser now this time click
on the second syntax Button as you guys can see here after three attempts we got
the login attempt warning message so this is coming from the if syntax block so
this was the same like previous so if the login count variable value is greater
than three this will return true and if this return true this if block will display
this message inside the browser simple right next let's see how we can hide the
button inside The View when user attempt

03:32:43
more than three times to login so how do we do that very simple so create
another if syntax block and set the condition same like previous the login count
variable is less than three so now inside this cut and paste our second button
that's it so save this and go to the browser as you guys can see here this time the
button disappeared from the browser and message appeared inside the browser after
user attempts three times to login so guys I'm not going to explain everything this
is very easy same scenario like the previous so only

03:33:20
the difference here is the quote block previously we use the NG if now we
are using the new way if syntax blocks so that's it so guys uh this is how we deal
with number values in angular if blocks perfect so guys in the previous lecture we
learned how to deal with number values now in this lecture let's see how we can do
the conditions with string values so guys nothing much here so for this also let's
look at an example the example is so when user logged in I want to show a message
based on a user role

03:34:04
like the previous example but this time we will store the user roles
inside of string variable not like the previous Boolean values right so let's do
this first thing first go to the the app component is file and create a variable to
store the user role so create a variable something user role and set this type to
string at last set a default value to this something admin next let's work on the
logic so go to the component HTML file first let's create the message so create an
H4 tags the message is welcome

03:34:41
admin next let's add the condition so inside this H4 tag at the directive
NG if the condition is this time I want to show this message when the user all
variable set as admin so how do we check that very simple for this we can use the
equals operator right so pass the condition now first the variable user role after
this equals operator which is this double equals sign after this add the user all
which is admin pass this inside codes that's it so we successfully write the
condition so guys with this we are telling that if this

03:35:27
user Ro variable is set to admin display this message simple right so
save this all and go to the browser as you guys can see here this time we got this
admin message here if I change this variable value to something different something
member save this and go to the browser now this message is not displaying inside
the browser awesome so guys now what I want to do is I want to show another message
when this user all value set member set to member so how do we do that for this we
can write another ngf but for this example

03:36:09
as a good practice we'll do this using the else condition so let's do
this for this first thing first we need a NG template so down here create NG
template inside this create the message which we want to show when the user R set
as member so create another H4 tags get the message welcome member now at last
don't forget to add an identifier to this NG template so how do we add that for
this we'll use template variables so create the template variable something member
message that's it so next let's work on

03:36:47
the else condition so after this ngf condition add a semicolon and add
else so after this else condition call the NG template which is this member message
that's it so save this and go to the browser now this time we can see this member
message inside the browser so how this loaded inside the browser because this time
this user all value set as member awesome right so guys in this lecture let's see
how to deal with string values conditions using the new syntax approach so nothing
much here very simple so first create this

03:37:29
block and set the condition same as previous I want to show a message
when the user role set as admin so how do we do that for this for this also we'll
use the past condition the condition is user rooll equals admin so pass this admin
as string values inside codes so now inside this block add the user admin message
so save this and go to the browser now we cannot see the message why is that
because now this user all set as member so in this case the syntax condition return
false so in this case

03:38:17
this syntax condition return false so this message will not render inside
the browser so if I change the role to admin save this and go to the browser now we
can see our admin message cool right so next guys let's see how to show the member
message so how do we do that very simple for this we can use another else if block
so after this down here add the else if block set the condition this time we want
to check whether this user all value set as member or not so the variable is user
all after this equals operator and the

03:38:59
value is member pass this as a string value inside of quotes So after
this inside this scope add the message welcome member that's it so save this all
and go to the browser now we can see the admin message so back to the app component
ES file change the user value to member save this and go to the browser now this
loaded the member message inside the browser awesome right so guys this is how we
deal with string conditions in if directive so guys we successfully completed the
ngf directive awesome job

03:39:41
guys now before we move on to the next directive let's dive deeper into
the NG template in the previous lecture we used NG template but I didn't explain
much about it so in this lecture let's look at what is NG template and what we can
do with it so actually what is this NG template NG template is a powerful tool in
angular that allows us to define template content that can be used later in our
application unlike regular HTML elements and the templates itself will not rendered
inside the Dome we can use

03:40:14
it when we need it so guys think of NG template as a container for a
piece of template code that we want to keep hidden until we needs it it's
especially useful when working with conditional rendering as it allows us to define
a template that will be displayed based on a certain conditions so this is what we
did using the else condition in previous lectures when we deal with else conditions
we used this NG template right so if this return true we show this message if not
we show this NG template right so by

03:40:54
default this NG templates content will not load inside the browser it
will only load inside the browser when we call it from this lse condition wait I
show you another example create NG G template TXS inside this and P tag and add
this text this content is inside NG template so now save this and go to the browser
inside the browser we cannot see the NG template message so guys this is what I was
trying to tell you the content inside the NG template is not rendered in the Dom by
default it act as a

03:41:33
placeholder for the content that angular can inject into the Dom when
needed so in order to render this NG template inside of the browser Dom we have to
use one of the angular directive is so we can give an identifier to this using
template variables something Dynamic template now inside this else we'll call this
Dynamic template so save this and go to the browser as you guys can see here this
time this loaded the NG template message inside the browser perfect right so guys
once again NG template is a powerful

03:42:12
feature in angular that allows you to define template content that can be
conditionally or dynamically rendered inside the browser it's a great way to create
reusable and flexible templates in your application I hope this examples helps you
to understand how NG template works and how you can use it in your angular projects
in the next lectures we'll explore more advanced directives and features of angular
so let's move on to the next lecture so in the previous lecture we learned that in
order to render the

03:42:45
template content inside of the browser we have to use an angular
directive right but there is another approach for this like the property binding
approach for this we have another special property for this called NG template
Outlet so let's see this an action guys think that we want to load something call
to action button inside of this component multiple times in different areas simply
how do we do that in traditional way we simply copy and paste that button code
right so but in angular we can do this more efficiently using

03:43:18
the NG template so let's see this inaction first thing first create a
button something join now so now what I want to do is I want to load this button
inside the side bar area footer area and also in the hero section area for this
we'll create three Deals the first one is for the sidebar the second one is for the
hero section and the third one is for the footer so in a traditional HTML website
we will simply copy and paste this button in these three places something like this
so this will load inside the

03:43:57
browser as well so guys but as I said in angular we can do this using the
NG template so for this first thing first wrap this button inside of NG template
tags so after this give identify to this template something called to action so
save this and go to the browser now we cannot see the button inside the browser why
is that because the NG template content will not render inside the browser until we
Trigger or call it right so now inside these sections DS how do we load in this NG
template in here we do not

03:44:42
need to use any angular directives so how do we do that very simple for
this we have another property in angular called NG template Outlet so inside the
first div add square brackets and add this property NG template Outlet so now from
here access the NG template which is this C action as you guys can see here we are
getting a compile error which is this NG template isn't known a property of D so in
order to fix this we have to import that into the app component so same like other
Imports inside this Imports array

03:45:22
at the module name NG template Outlet select this from the auto
suggestions this will add the import statement automatically this also coming from
this angular Command Module awesome so now we don't have the error so save this all
and go to the browser now we can see the join now button inside the first div
sidebar so using the same approach we can load the same button inside the other
divs as well so inside this again pass the same NG Outlet template let's copy and
paste this from the previous

03:46:01
View sa this and go to the browser now this loaded the join now button
inside this all three sections so guys before end of this lecture inside of this NG
template area we can Define as much as templates we needed for example we can add a
P tag here something call to action so save this and go to the browser as you guys
can see here this loaded this P tag also in all of these sections so guys simply
using the NG template we can reuse a piece of template code again and again without
repeating the same HTML code inside our

03:46:41
browser so guys this is the use of NG template so hope you guys all
understand this all right I think that's it for this lecture so let's move on to
the next one so guys in the previous lecture we learned how to deal with angular if
directive only using Boolean true or false values but guys for this we can use
string or number values as well so this lecture let's look at how to use ngf
directive with number values so first look at the ngf directive and in the next
lectures we look at the new if

03:47:28
syntax approach so let's get started so guys let's look at this with an
example so for this I want to show a message when the user exceeds three login
attempts so we'll count the login attempts with the login button button so let's do
this for this first thing first let's create a button so go to the app component
HML file and create button Texs the button text will be login so next what I want
to do is I want to count the login attempts when user clicks this button so how do
we do that so very simple for this we can use the

03:48:10
click binding approach so inside this button starting tag add a click
event binding so how do we add that we learned about this in the previous lectures
so how do you do this very simple for event bindings we use brackets right so open
and close simple brackets inside this pass the event which is Click now when this
click event occur we'll call a method something count login atempts so after this
don't forget to add add the parenthesis so guys as you guys can see here we are
getting this compile eror

03:48:53
why is that can you guys tell me yes of course so guys we are calling
this method from here but there is no method declared inside the app component TS
file so in order to fix this we have to create this method so go to the app
component TS file and create this method the method name is Count login attempt so
carefully follow this simple capital letters so after this add the parenthesis and
the method score so we successfully created the method next what I want to do is I
want to store the login count inside of a

03:49:29
variable so when user click the login button so let's do this uh for this
first thing first we need a variable so create a variable the variable name is
something login count set this type as number so after this set a default value to
this zero next what I want to do is I want to increment this login count by one
when user press the login button so how do we do that very simple so inside the
account login method let's increment this variable value by one so for this we can
use the increment operator which is two plus

03:50:17
symbols so inside this the variable this Dot Login count after this plus
plus so that's it so guys once again simply this increment operator will increase
this login count value by one so by default this value is set to zero so when user
press the login button at the initial stage this will increase the default value by
one in order to see this clearly we'll add a log down here so after this add a
console log and pass this variable inside this log parenthesis that's it so save
this all and go to the browser now click on this

03:51:03
login button inside the browser console we can see number one so if I
press this login button again we can see two and so on so this method is working as
we expected right so guys next let's work on the conditional logic uh guys I want
to show a message when user exceed three attempts of clicking this login button so
how do we do that for this we'll simply use the ngf directive so first thing first
let's create the message for this let's use an H4 tags the message will be exceeded
three login attempts

03:51:45
try again later that's it so now I want to show this message when user
exceed three clicks of this login button so for this add the ngf directive inside
this H4 opening tags as symbol and the directive NG if so after this add the
condition which is we store this login count inside of this login count variable so
so add that here login count and add the greater than symbol after this add number
three so with this we are telling to this condition if this login count variable
value is greater than

03:52:35
three show this message that's it so save this all and go to the browser
as you guys can see here now we are not getting the one message so click the login
button three times after I click three times this error message appeared inside the
browser awesome right so guys once again with this condition we are telling to
check whether this login count variable value is greater than three or not if this
greater than three this greater than operator will return Pro so in that case this
message H4 tags

03:53:08
will render inside the browser so this is how this error message loaded
inside the browser so hope you guys got the idea so guys before we move on to the
next lecture let's see another example now I want to hide this button when the user
attempts three times to login so how do we do that for this also we can use the
same approach so add uh NG if directly to this button opening T the condition this
time first at the login count variable and check whether this login count is less
than number three so

03:53:48
 this time I want to display this button when this login count value is
less than number three right so if this login count value is less than three this
will return true then this button will appear inside the browser otherwise this
button will not rendered inside the browser so that's it save this all and go to
the browser click this button three times and as you guys can see here this time
after the attempt three login button disappeared from the vi and this login attempt
warning message appeared

03:54:23
inside the browser view awesome right so guys this is how we deal with
numbers in ngf directive so in the previous lecture we learned how to deal with
number values in if directive using the old ngf directive so in this lecture let's
see how to do this using the new syntax approach so first write the if block wait
before that for this also we'll Define another button so create a button tags and
add the button text login syntax let copy and paste the previous click event
binding no need to change

03:55:06
anything that's it so next after this create the if block inside the
condition parenthesis add the condition so this time we want to check whether this
login count value is greater than number three so same like previous so inside this
block add the message that we want to display inside the browser so I will copy and
paste the previous message so at last don't forget to remove the NG if directive
from this H4 tags that's it so save this all and go to the browser now now this
time click on the second syntax button as you guys

03:55:48
can see here after three attempts we got the login attempt warning
message so this is coming from the if syntax block so this was the same like
previous so if the login count variable value is greater than three this will
return true and if this return true this if block will display this message inside
the browser simple right next let's see how we can hide the button inside The View
when user attempt more than three times to login so how do we do that very simple
so create another if syntax block and set the condition

03:56:27
same like previous the login count variable is less than three so now
inside this cut and paste our second button that's it so save this and go to the
browser as you guys can see here this time the button disappeared from the browser
and message appeared inside the browser after user attempts three times to log so
guys I'm not going to explain everything this is very easy same scenario like the
previous so only the difference here is the code block previously we use the ngf
now we are using the new way if syntax blocks so

03:57:05
that's it so guys uh this is how we deal with number values in angular if
blocks perfect so guys in the previous lecture we learned how to deal with number
values now in this lecture let's see how we can do the conditions with string
values so guys nothing much here so for this also let's look at an example the
example is so when user logged in I want to show a message based on a user role
like the previous example but this time we will store the user roles inside of
string variable not like the previous Boolean
 03:57:48
values right so let's do this first thing first go to the app component
is file and create a variable to store the user role so create a variable something
user role and set this type to string at last set a default value to this something
admin next let's work on the logic so go to the component HTML file first let's
create the message so create an H4 tags the message message is welcome admin next
let's add the condition so inside this H4 tag at the directive NG if the condition
is this time I want to

03:58:27
show this message when the user all variable set as admin so how do we
check that very simple for this we can use the equals operator right so pass the
condition now first the variable user role after this equals operator which is this
double equal sign after this add the user all which is admin pass this inside codes
that's it so we successfully write the condition so guys with this we are telling
that if this user role variable is set to admin display this message simple right
so save this all

03:59:10
and go to the browser as you guys can see here this time we got this
admin message message here if I change this variable value to something different
something member save this and go to the browser now this message is not displaying
inside the browser awesome so guys now what I want to do is I want to show another
message when this user all value set member set to member so how do we do that for
this we can write another ngf but for this example as a good practice we'll do this
using the else condition so let's do this for

03:59:50
this first thing first we need a NG template so down here create NG
template inside this create a the message which we want to show when the user R set
as member so create another H4 tags set the message welcome member now at last
don't forget to add an identifier to this NG template so how do we add that for
this we'll use template variables so create template variable something member
message that's it so next let's work on the else condition so after this ngf
condition add a semicolon and add else

04:00:30
so after this else condition call the NG template which is this member
message that's it so say this and go to the browser now this time we can see this
member message inside the browser so this loaded inside the browser because this
time this user all value set as member awesome right so guys in this lecture let's
see how to deal with string values conditions using the new syntax approach so
nothing much here very simple so first create the block and set the condition same
as previous I want to

04:01:10
show a message when the user role set as admin so how do we do that for
this for this also we'll use the past condition the condition is use roll equals
admin so pass this admin as string values inside codes so now inside this block add
the user admin message so save this and go to the browser now we cannot see the
message why is that because now this user all set as member so in this case the
syntax condition return false so in this case the syntax condition return false so
this message will not render inside the
 04:01:59
browser so if I change the role to admin save this and go to the browser
now we can see our admin message cool right so next guys let's see how to show the
member message so how do we do that simple for this we can use another else if
block so after this down here add the else if block set the condition this time we
want to check whether this user all value set as member or not so the variable is
user all after this equals operator and the value is member pass this as a string
value inside of quotes So after this inside this scope

04:02:45
add the message welcome member that's it so save this all and go to the
browser now we can see the admin message so back to the app component is file
change the user value to member save this and go to the browser now this loaded the
member message inside the browser awesome right so guys this is how we deal with
string conditions in if directive so guys we successfully completed the ngf
directive awesome job guys now before we move on to the next directive let's dive
deeper into the NG template in the previous lecture we used

04:03:24
NG template but I didn't explain much about it so in this lecture let's
look at what is NG template and what we can do with it so actually what is this NG
template NG template is a powerful tool in angular that allows us to define
template contain that can be used later in our application unlike regular HTML
elements templates itself will not rendered inside the Dome we can use it when we
need it so guys think of NG template as a container for a piece of template code
that we want to keep hidden until we needs it it's especially

04:04:02
useful when working with conditional rendering as it allows us to define
a template that will be displayed based on a certain conditions so this is what we
did using the else condition in previous lectures when we deal with else conditions
we used this NG template right so if this return true we show this message if not
we show this NG template right so by default this NG templates content will not
load inside the browser it will only load inside the browser when we call it from
this lse condition wait I show you another

04:04:41
example create Ang G template Tex inside this add P tag and add this text
this content is inside NG template so now save this and go to the browser inside
the browser we cannot see the NG template message so guys this is what I was trying
to tell you the content inside the NG template is not rendered in the Dom by
default it act as a placeholder for the content that angular can inject into the
Dom when needed so in order to render this NG template inside of the browser Dom we
have to use one of the angular

04:05:21
directives so we can give an identifier to this using template variables
something Dynamic template now inside this else we'll call this Dynamic template so
save this and go to the browser as you guys can see here this time this loaded the
NG template message inside the browser perfect right so guys once again NG template
is a powerful feature in angular that allows you to define template content that
can be conditionally or dynamically rendered inside the browser it's a great way to
create reusable and flexible templates
 04:05:59
in your application I hope this examples helps you to understand how NG
template works and how you can use it in your angular projects in the next lectures
we'll explore more advanced directives and features of angular so let's move on to
the next lecture so in the previous lecture we learned that in order to render the
NG template content inside of the browser we have to use an angular directive right
but there is another approach for this like the property binding approach for this
we have another special

04:06:31
property for this called NG template Outlet so let's see this in action
guys think that we want to load something called to action button inside of this
component multiple times in different areas simply how do we do that in traditional
way we simply copy and paste that button code right so but in angular we can do
this more efficiently using the NG template so let's see this inaction first thing
first create a button something join now so now what I want to do is I want to load
this button inside the sidebar area foter area and

04:07:09
also in the hero section area for this we'll create three Deals the first
one is for the Side Bar the second one is for the hero section and the third one is
for the footer so in a traditional HTML website we will simply copy and paste this
button in these three places something like this so this will load inside the
browser as well so guys but as I said in angular we can do this using the NG
template so for this first thing first this button inside of NG template tags so
after this given identifier to

04:07:52
this NG template something called to action so save this and go to the
browser now we cannot see the button inside the browser why is that because the NG
template content will not render inside the browser until we Trigger or call it
right so now inside these sections how do we load in this NG template in here we do
not need to use any angular directives so how do we do that very simple for this we
have another property in angular called NG template Outlet so inside the first div
add square brackets

04:08:33
and add this property NG template Outlet so now from here access the NG
template which is this C action as you guys can see here we are getting a compile
error which is this NG template isn't known a property of D so in order to fix this
we have to import that into the app component so same like other Imports inside
this Imports array add the module name NG template Outlet select this from the auto
suggestions this will add the import statement automatically this also coming from
this angular Command Module awesome so now we

04:09:14
don't have the error so save this all and go to the browser now we can
see the join now button inside the first div sidebar so using the same approach we
can load the same button inside the other divs as well so inside this again pass
the same NG Outlet template let's copy and paste this from the previous View save
this and go to the browser now this loaded the join now button inside this all
three sections so guys before end of this lecture inside of this NG template area
we can Define as much as templates we needed

04:09:52
for example we can add a P tag here something call to action so save this
and go to the browser as you guys can see here this loaded this P tag also in all
of these sections so guys simply using the NG template we can reuse a piece of
template code again and again without repeating the same HTML code inside our
browser so guys this is the use of NG template so hope you guys all understand this
all right I think that's it for this lecture so let's move on to the next one all
right guys in this lecture let's

04:10:42
look at our next structural directive and G4 or the for Loop directive so
basically we use this to Loop a set of data stored inside of an array so let's see
this in action so guys first thing first we need an array for this so let's create
this array so go to the app component file and create this array set the array name
to something like users the variable type is array and set the array type as string
next set a default value for this array so how do we Define an array yes of course
we will define an array using

04:11:22
square brackets so open and close square brackets and inside set a few
dummy usernames uh set the first name as John so guys don't forget to put this
inside codes because this array values are strings all right so the first name is
John the second array value is Sam the third one is Smith and finally Raj so guys
all these values will be string data types okay so now we have the array now I want
to load these array values inside the V so how do we do that for this we can use
several approach just in angular so first let's

04:12:15
see the string interpolation approach so go to the app components HTML
file and create an H3 tag inside this add the string interpolation scope and the
array name which is users that's it so save this and go to the browser as you guys
can see here it's now loaded the array values inside the browser V but guys if you
look at this carefully all the array values are loaded as one value separated by
commas so think about this if I want to load these array values as separate values
in separate heading tags how do we do that so we can

04:13:00
simply do that using the array index values so let's see this an action
in our array we have four values so create 4 H3 tags simply duplicate these H3 tags
four times now we can access the array values one by one using the array index so
what will be the index for the first value is it one or zero as you guys know array
indexes start from zero not from one so we can access the array value using the
array index inside square brackets right so hope you guys already know know about
this this is nothing to

04:13:45
do with angular this is just basic JavaScript all right so for the first
value after the users variable open and close square brackets and add the array
index number which is zero for the second value insert square brackets use the
number one the next value is number two and the last value index is number number
three so now save this all and go to the browser as you guys can see here now we
got the array values one by one inside separate H3 TXS awesome right all right so
guys this is how we deal with array

04:14:33
values using string interpolation but this approach is not a good
practice in our example we are the one who created this array so we know how how
many values are inside this users array but in a real world application we cannot
predict exactly how many values are inside an array in that case we cannot use this
string interpolation approach effectively so as a solution we can use the ng4
directive in angular the ng4 directive will look inside this array and print each
and every value inside the browser view until the array values

04:15:13
are completed right so all right guys now let's see how we can do this
using the ng4 directory so down here create another H3 tag and we want to load the
array values inside this H3 tag so how do we write the ng4 directive so this is
similar to the previous ngf directive so first thing first we will look at the old
syntax of ng4 then in the next lecture we will look at the new syntax approach so
let's write the G4 inside the opening H3 10 as before start with an asri symbol
then the directive name is

04:15:56
ng4 next we have to Loop through the array so write this statement inside
codes so let user of users so guys with this we are telling angular to Loop through
the users array and assign the values to a new variable named user so by using the
L keyword we are creating a new user variable so this tells angular to iterate
through the users array hope you guys got the idea so to load this inside the
browser view we use the same approach as before with string interpolation so inside
this open and close string interpolation brackets

04:16:44
so open close to curly brackets so inside this add the user variable not
the users array variable right so carefully note this all right so before we move
on we have to import the ng4 direct to this otherwise this will not work so let's
do this inside the app component TS file go to this Imports array after this add
this NG for directive select this auto complete this will add the import statement
so guys this is also coming from the angular common module perfect um I think
that's it so save this and go to the browser as

04:17:32
you can see this loads the users array values inside these four H3 tags
one by one cool right so with just a few lines of code we dynamically displayed all
the values in the users array inside the browser VI so once again we use the ng4
directive to iterate over the users's array so with this statement we create a
variable named user and store each array values inside this user variable so after
that we use string interpolation to load this inside the browser view so guys this
is a simple use case of the

04:18:09
ng4 detective in angular so you guys got the idea so guys in the previous
lecture we learned how to fetch an array using the ng4 directive which is the old
way in this lecture let's see the new approach using the updated ng4 syntax so this
new approach is quite similar to the old one but with some improvements so we will
use the same scenario as before we want to patch this array and display the users
names one by one inside an 3 tag in the browser view so how do we do that so first
let's uh create the for syntax

04:18:50
blog how do we do that just like the same as the if syntax blog so we
start by adding the at symbol followed by the directive name which is for after
this add the parenthesis and the method scope so to define the scope simply simp L
open and close curly brackets so now inside the parenthesis uh we need to add the
condition we want to Loop through the users array so first we Define a new variable
and like before we don't this is not like in the previous one in here we don't need
to add the let keyword so just pass the new

04:19:37
variable name user after this add of and array name which is users so we
successfully added the looping condition now we want to load now let's load these
values inside the browser so this also same as before so create an3 tags inside
this looping scope inside this tag use the string interpolation approach so open
and close two curly brackets insert this pass the new looping array variable which
is user after this so next add this after this string interpolation loaded using
for syntax block so guys with this we

04:20:31
can identify the previous ng4 approach and this new approach inside the
browser view so that's it uh but before we move on you might no this an error
saying that this Loop must have a track expression so what is that in angular to
work with this new for Loop syntax we must Define a track expression so let's do
that so after the loop statement and a semicolon add the track keyword and set its
value to user so which is this looping array variable that's it so say this all and
go to the browser as you

04:21:15
guys can see here the users array values are loaded one by one inside the
browser so this time we use the new syntax approach in angular awesome right so
guys this is how we Loop through an array using the new for Loop syntax in angular
so guys in the previous lecture we learned how to fetch array data inside the
browser View using a heading tag to display the data but what if we want to load
this data inside an unnoted list so let's see this in action first we'll look at
the old ng4 directive approach and then we'll move on to the

04:22:00
new syntax so let's get started first create an unnoted list inside the
HTML file so how do we create an unloaded list so for this we use the UL HTML tags
so create UL tags and inside them create an Li tag now inside these Li tags we want
to fetch the users's name so how do we do that we can use the ng4 directive just
like before so inside the AI tag add the ng4 loop so start with the stic symbol and
add the directive name ng4 so next Define the loop by creating a variable let user
of users so this is

04:22:52
the array name so now inside the L Tex use a string interpolation to
fetch the user name so open and close to curly brackets and inside add the variable
name user that's it so save this and go to the browser as you guys can see here
this time we got our users names as a list so this is very easy right so guys
before we move on I want to show you something some of you guys might wonder why we
wrote this ng4 condition inside the L tags instead of inside the UL tags can you
guys tell me why is that the reason is that ng4 directive

04:23:40
should be used on the elements that we want to repeat so in this case the
LI elements are repeated for each user not the UL element if you used the ng4 on
the UL tag it would try to repeat the entire list structure instead of just the
list items uh wait let's see this in action so cut the ng4 directive from the LI
tag and paste it inside the UL tag save this and go to the browser as you can see
here nothing has changed so we got the same results as before but if you look
inside the code you can see that we got

04:24:25
four different UL tags each containing Li tags so now if I place the ng4
directive back inside the LI tags we got only one UL tag with four Li tags inside
this main UL tag so this is what I was trying to explain when using the ng4
directive it should be placed on the elements that you want to repeat which in our
case this Li tag not the UL tag so hope you guys got the idea all right so before
we move on let's quickly see how to do this using the new for syntax blogs so first
create uh the for Block using the ad

04:25:13
symbol after this add this directive four add the parenthesis next at the
Block scope so now inside this parenthesis at the Loop user of users so in this
syntax approach we don't need to use the let keyword and after this we must also
pass the track value add that here after this coland and the track keyword the
value is this variable user so now inside this scope create UL tags and Li tags
inside this Li tag simply render the user value using the string interpolation
that's it so save this and

04:26:10
go to the browser as you can see we go our second user list which is
loaded using the four syntax blocks awesome right um wait uh there's one more thing
here without realizing it I made a mistake can you guys find the problem yes of
course the problem is with the UL tag I place the UL tag inside this block if I
look at the code inside the browser elements tab we can see see this it's repeating
the UL TXS so what is the issue here so guys the issue here is that by placing the
UL tag inside the for Block

04:26:56
the entire UL tag is being repeated for each user instead of just this Li
Texs so this is the same issue as before to prevent this we need to move the UL
tags outside of the for loop block so let's do this so remove the UL Tex from
inside the for block and place them before the for Loop syntax and add the closing
U tag after the for Loop blocks scope so that's it save this and go to the browser
as you guys can see here this time we got only one UL tag so guys remember this we
must put only the repeating element inside this for loop

04:27:45
block scope so hope you guys got this idea perfect in the real world
application we often have to work with object arrays not simple string arrays like
our users array so in this lecture let's see how we can deal with object arrays
using the ng4 directive so first thing first let's create a new array for this
inside the component ts5 at the following code set the array variable name as
something users obj with a capital O after this set this type as an array and the
array type is objects next assign a default value to

04:28:36
this array so open close square brackets and inside this let's define the
user values as objects so how do we Define objects we Define objects using curly
brackets right so inside the array scope open and close the object scope open and
close two curly brackets now inser this Define key value pairs for the object so
the first key value pair is ID and set this value as number one so next let's
define the name name the key is name and the value is John so pass this as a string
value inside codes so next let's define the email

04:29:25
address the key is email and set the value as jn@ gmail.com so once again
pass this as a string value inside of codes so I think that that's enough for this
one object so let's define uh few more user objects in this array so copy and paste
the previous object three times and change the values so in the second object
change the ID to two name to Smith and email to Smith at gmail for the next object
set ID to three name to Sam and email to Sam at gmail.com lastly set the ID to 4
name to Raj and email to Raj at

04:30:44
gmail.com so guys now we have the array of objects so let's see how we
can load this inside the browser view so in order to load this inside the browser
view so go to the HTML file and create an unordered list first create UL tags and
after this add Li tags now inside these Li tags let's add the ng4 directive so even
though this values are objects the entire structure is still an array to load array
details inside the browser view we have to use the ng4 directive so at the ng4
directive inside this Li

04:31:27
opening Texs start with the S symbol followed by the directive name ng4
so next Define the loop as before so this is like same like previous so Define a
variable let user after this off and the this time array name is users obj so
follow this simple capital letters carefully so now in order to load these looping
values inside the browser view we have to use the string interpolation approach
right so inside the LI TX add the string interpolation scope and inside this add
the user variable which is this looping

04:32:21
variable now save this all and go to the browser so in the browser you
guys can see this object object instead of the actual object values so what is this
can you guys tell me so guys actually this happen because we are trying to display
play the entire object directly so that's why this loaded the object object inside
the browser so this is not like the previous string array in order to display
object values inside the view we have to access the values individually by using
the object key right so let's see this

04:33:01
inaction inside the string interpolation after the user variable add a
DOT and so let's load the user's name by passing the key which is name so it should
be user. name if you look at this carefully you can see in this compile error so
what is this error this error is coming from typescript when dealing with objects
in typescript we have to define the shape of our object using an interface
otherwise typescript doesn't know the exact shape of our object and it will throw
this error to fix this we need to

04:33:45
Define an interface however in this lecture we will not dive into object
interfaces so in a section we have a dedicated section for this interfaces right so
for now to fix this error simply change the array type from object to any that's it
so now we won't get any errors so save this and go to the browser as you guys can
see here all the users names are loaded inside the list so this is how we fetch
data from array objects so in any case if you want to load the email instead of the
user name how do we do that it's very simple just

04:34:30
change the key of the object from name to email so again save this and go
to the browser as you guys can see here this time we got the email addresses
instead of previous users name so guys that's it for this lecture let's move on to
the next lecture where we will see how to fetch this object arrays using the new
follow Loop syntax approach all right guys in the previous lecture we learned how
to fesh an array object using the ng4 directive so in this lecture let's work on
the how to fesh an array using the new angular

04:35:21
syntax approach so first let's write the new for syntax so how do we
write that so add the at symbol after this direct your name for after this next the
looping condition parenthesis and last don't forget to add the directive scope now
let's write the loop so user this is the variable so in this new Loop syntax we
don't need to pass the let keyword right so the loop is user of users obj which is
our users array object variable next when using this new syntax approach we must
pass pass the track

04:36:13
option to this Loop otherwise this will throw an error so after this add
a semicolon and the track after this pass the loop variable user that's it so guys
next uh let's load the values so how do we do that for this we'll use string
interpolation so inside this Loop scope add a string interpolation scope after this
add the looping array variable which is this user that's it so save this and go to
the browser as you guys can see here inside the browser we got this object object
so why is that can you guys remember in the last

04:36:55
lecture we learned about this right so guys we are getting this object
object value inside the browser because with this we are directly accessing the
entire object so in order to fix this we have to pass the object key name here so
pass that after this you user variable so user do name save this and go to the
browser this time we got the users names but this loaded in a single row so in
order to see this clearly let's load this inside of UL Tex so how do we do that so
first WP this for Loop inside of

04:37:31
 UL tags after that inside this Loop scope create L line tags and put this
string interpolation value inside of Li TS that's it so save this all and go to the
browser as you guys can see here this time the users names are loaded as unordered
list awesome right so guys this is how we deal with an array object using the new
for syntax approach in angular so guys in this lecture let's look at another
awesome feature in angular which is the angular change detection mechanism so let's
do this first I want to add a new user object to

04:38:14
our current object array programmatically so guys let's do this when
pressing a button so when user press uh the button will call to a method and from
that method we load the new user object into our user obj array so let's see this
in action all right so start this by adding a new user we'll create a button for
this purpose so guys let go to the HML file and enter button text and the button
text will be end new user now I want to call a method when I click this button so
for this we need to bind a click event binding to this

04:38:59
button so how do we bind a click event yes of course so inside the button
tag at the event click inside of brackets next assign this to a method called
something add new user so pass this inside codes and don't forget to add the method
parenthesis so guys this will call the add new user method when this button clicked
so as you guys can see here we are getting a compile error here why is that course
still we don't have this method declared so in order to fix this let's create the
add new user method in our

04:39:44
components typescript file so go to the component is file and create the
method so the method name is add new user carefully follow these Capital simple
letters so after this add the parentheses and the method scope now inside this
let's add a new user object to our array so how do we do that for this we can use
the JavaScript array push method right so so let's see this in action inside this
method first let's define a new user object to push inside this array first Define
a variable let user and assign this to the

04:40:25
user object open and close curly brackets inside this add the key value
pairs ID and set the value as number five next name add the name something user one
pass this insert codes next the email at this user [email protected] and pass this also
as a string value inside quotes all right so next let's push this object into our
user object so down here access this user object variable this keyword after this
dot user obj again dot push method so after this don't forget to add the
parenthesis now inside this parenthesis

04:41:27
pass the object that we want to push to our array which is this user so
pass that here inside this push method parenthesis as parameter that's it so guys
this push method will insert our new user object inside the array as the last array
value so I think that's it save this all and go to the browser now you should see
the add new user button click on it as you guys can see here once I press the add
new user button a new user is added to our array and the users name is loaded
inside the browser VI so if I press the button
 04:42:12
again another new user is rendered inside the browser view so every time
I click this button you can see a new user added to the list without reloading the
page so this happens in real time thanks to the angulus change detection mechanism
so what's happening here angulus change detection mechanism detects changes in the
application such as a button click an ax request or any data value changes when
such changes occur angular updates the D to reflect these changes in real time so
when we click the add new user button

04:42:56
angular detects the new user object added to the array and updates the
list in the vi immediately and in real time so without needing to refresh anything
once again guys angular change detection mechanism is like a small B inside our
application this bot continuously watches our entire application looking for any
changes when such changes occur this change detection but immediately acts and
updates the D according to the changes in real time this is what we simply call the
change detection mechanism in angular so this is one of

04:43:37
the reasons the angular framework is getting popular day by day all right
guys in the previous lecture we learned how to push a new value to our users array
object and also we learned and how the angular change detection mechanism works so
now think in any case if you want to remove a user object from the user obj array
how do we do that very simple so let's do this first thing first I want to add a
delete button to each array element that loads inside the browser so go to the HTML
file and add the delete button inside

04:44:15
the first list of user where we use the ng4 to fetch the array object so
now next to this string interpolation and the delete button so open and close
button tags and the button text will be delete now next I want to call a method
from this button to write the delete operation code so b a click even to this inser
brackets the event is click and next the method name is something on delete so
after this add the parenthesis now we have the delete button let's work on the
delete logic so go to the app component is file and

04:44:59
create the UND delete method so down here method name is UND delete next
the parenthesis and the method score so guys we are dealing with an array right so
I want to delete or remove the relevant user object when the user click the delete
button uh wait so save this and go to the browser now as you guys can see here we
got this delete button on each and every user value loaded inside the browser so if
I add another new user using our previous button for this also we got another new
delete button so guys

04:45:39
why do we need separate delete button for each and every value can you
guys guess yes of course so guys having a delete button for each user allows us to
remove specific user individually think if you want to delete the JN from this list
so for this we can simply click on the delete button which located front of the Jo
value not the other delete buttons If I click on the Raj delete button this will
remove only the r LGE user object not the others so this is important for user
management functionality where you might want to
 04:46:20
delete specific entries without affecting the rest of the list hope you
guys got the idea all right so next guys uh to delete a specific value from an
array we need the array index number of Target deleting object so how do we get
that for this we have another JavaScript method in Array index of method if we pass
the any array value to this method this will return the array index number so let's
see this in action in order to get the index number we have to pass the target
array value to this method right so how do we do

04:47:04
that so we can pass that to this method for binding this as a parameter
value so our array object is stored inside the user variable so pass the user
variable to this on delete method inside this parenthesis awesome so now we are
passing the user object from the on delete method let's capture it using a new
variable something user so guys don't get confused this user is inside the HTML
file we we storing the looping and array user objects and this user is located
inside the TS file we created this to capture

04:47:49
the parameter so these two variables are totally different okay so next
set this parameter variable type as object now inside this method let's first get
the index number of the array so this do array variable is users obj of this again
Dot and the index of method after this add the parenthesis so this method required
the array value as the parameter so pass that here pass this user parameter
variable inside this F parenthesis so next this inside of a variable something let
index awesome so we have successfully

04:48:37
captured the index value but wait uh let's see wait let's log this down
so we can see this clearly down here at the console.log and pass this index
variable to this now save this all and go to the browser click on one of these
delete buttons as you guys can see here inside the browser console we got the index
number of relevant user values perfect right all right so next by using this we can
delete the users from the users obj array so let's see this inaction what the
component is file as I mentioned

04:49:19
before for this we have another method called splice in JavaScript so
let's do this after this again add the array this do users obj after this dot
splice and the parenthesis guys this uh method require two parameters one is is the
index number and the next one is the number of items that we want to delete so pass
the index variable as the first parameter and as the second parameter pass number
one so we want to delete only one item at once that's it so save this and go to the
browser click on this Jon's delete

04:50:03
button as you guys can see here this deleted the John from this list next
let's click on the Raj delete button as you guys can see here this remove the Raj
from the list awesome right so guys clicking the delete button next to a user will
trigger the UND delete method which will remove that user from the users obj array
angular change detection mechanism will then automatically update the view to
reflect the changes in real time removing the user from the list displayed in the
browser so every time you click the
 04:50:42
delete button the specific user will be removed from the list without
needing to refresh the page this is another demo of an angular's change detection
mechanism in handling Dynamic updates to the Dom hope you guys got the idea awesome
right all right guys so in the previous lecture we did this delete operation for
this delete operation we had to use the index of the array to delete the relevant
array object so for this we use this index of JavaScript array method but guys in
angular we have a simple approach for

04:51:23
this in angular we can directly get the index of the looping array using
the ng4 directive with just one line of good right so let's see this in action
there's not much here just simply add this after this ng4 Loop and the semicolon
after this again Define another variable for index so let I assign index so guys
with this index NG for Loop we'll throw the current index number of the looping
array so in order to use that we have to assign this into a variable so this is
what we did with this new

04:52:04
variable all right so we successfully captured the index of the object
array values next um wait before we move on let's load this index numbers inside
the browser view so we can understand this clearly so before the string
interpolation add another string interpolation and add the index variable which is
this I that's it so save this and go to the browser as you guys can see here this
time we got the index numbers loaded inside the browser these numbers started from
zero why is that because we are

04:52:41
looping through an array so array index starting from zero simple right
all right so guys this is how we capture the index of the looping array in angular
ng4 directive way so now let's see how we can use this to deal with the delete
operation nothing much here this time just simply pass this index variable into
this on delete method parameter instead of the previous you users object so as you
guys can see here after we changing this parameter variable we are getting this
compile error why is that because this time we

04:53:19
are sending an index number not an object so in order to fix this we have
to change this variable type to number wait um I'll commend this and let's create
another method for this approach so we can compare them both clearly down here
again create the on delete method inser parenthesis create the parameter variable
something index and this time set this type as number now inside this method
nothing like previous we don't need to use the index of method because we already
have the index number so just simply add this

04:54:04
place method to remove that Target value from the users array so down
here this dot our array uses obj and again dot splice method so now inside this
parenthesis pass the index number that's it so save this all and go to the browser
press one of these delete button as you guys can see here when I click the button
that relevant item removed from the view which means this is working as previous
awesome right so guys with the single line of code we achieved the delete operation
as we expected so this is the beauty of

04:54:48
angular all right so before we move on some of you might wonder why we
need to assign the index to a variable instead of using it directly the reason is
that ng4 in angular provides a mechanism to capture the current Loops index and
bind it to a local template variable this local variable can then be used within
the scope of the loop to access the current index without assigning it to a
variable we don't have a way to reference the index value directly in the template
so that's why we are assigning this to a new template

04:55:30
variable hope you guys got the idea right guys that's it for this lecture
let's move on to the next lecture all right guys so in the previous lecture we did
this delete operation for this delete operation we had to use the index of the
array to delete the relevant array object so for this we use this index of
JavaScript array method but guys in angular we have a simple approach for this in
angular we can directly get the index of the looping array using the ng4 directive
with just one line of word

04:56:19
right so let's see this in action there's not much here just simply add
this after this ng4 Loop add a semicolon after this again Define another variable
for index so let I assign index so guys with this index ng4 Loop we'll throw the
current index number of the looping array so in order to use that we have to assign
this into a variable so this is what we did with this new variable all right so we
successfully captured the index of the object array values next um wait before we
move on let's load this index numbers inside the

04:57:00
browser view so we can understand this clearly so before this string
interpolation add another string interpolation and add the index variable which
which is this I that's it so save this and go to the browser as you guys can see
here this time we got the index numbers loaded inside the browser these numbers
started from zero why is that because we are looping through an array so array
index starting from zero simple right all right so guys this is how we capture the
index of the looping array in angular

04:57:37
ng4 directive way so now let's see how we can use this to deal with the
delete operation nothing much here this time just simply pass this index variable
into this on delete method parameter instead of the previous you users object so as
you guys can see here after we changing this parameter variable we are getting this
compile error why is that because this time we are sending an index number not an
object so in order to fix this we have to change this variable type to number wait
I'll command this and let's

04:58:18
create another method for this approach so we can compare them both
clearly down here again create the on delete method inser parenthesis create the
parameter variable something index and this time set this type as number now inside
this method now nothing like previous we don't need to use the index of method
because we already have the index number so just simply add this spli method to
remove that Target value from the users array so down here this dot our array uses
obj and again dot splice

04:59:03
method so now inside this parenthesis pass the index number that's it so
save this all and go to the browser press one of these delete button as you guys
can see here when I click the button that relevant item removed from the vi which
means this is working as previous awesome right so guys with a single line of code
we achieved the delete operation as we expected so this is the beauty of angular
all right so before we move on some of you might wonder why we need to assign the
index to a variable able

04:59:40
instead of using it directly the reason is that ng4 in angular provides a
mechanism to capture the current Loops index and bind it to a local template
variable this local variable can then be used within the scope of the loop to
access the current index without assigning it to a variable we don't have a way to
reference the index value directly in the template so that's why we are assigning
this to a new template variable hope you guys got the idea all right guys that's it
for this lecture let's move on to the next

05:00:27
lecture all right guys in the previous lecture we learned how to use the
index of followup directive in the ng4 directive so this lecture let's look at how
to use the same index value in the new syntax approach for this we'll use this for
Loop syntax blog we created this in the previous lecture so now let's see how to
capture the index number of this looping array so this also same like the previous
approach first we have to declare a variable so let I assign now we have to assign
this to the index so

05:01:05
pass that here as you guys can see here we are getting this compile error
unknown variable index so what is this guys can you guys guess so so guys the
problem is in this new syntax approach this index value will be stored inside of a
dollar sign index variable not the simple index variable like the ng4 so in order
to fix this we have to add the dollar sign before this index that's it so now the
error is gone so guys this is how we access the index variable in this new syntax
approach so almost same like the ng4 directive the

05:01:49
only difference is this dollar sign so hope you guys got the idea all
right so now we can use this index value inside our looping scope so first let's
render this index number inside the browser VI so we can see this clearly so same
like previous before this string interpolation inside this SL tag add another
string interpolation and pass the index variable which is this I that's it so save
this and go to the browser as you guys can see here now we got the index value
inside this new syntax loop as

05:02:27
well so now using this we can do the delete logic um let's do this uh the
all other steps are same like previous so create a button inside this Loop the
button name is delete next add a click event binding from this call the on delete
method so guys this method required the index number so pass this index variable
inside this parenthesis as the parameter that's it so we already created and wrote
delete operations inside this on delete method so so again we don't need to write
this so save this all and go to the browser

05:03:15
as you guys can see here we got the delete buttons delete the user joone
as you guys can see this removed the Jone from the list so now again remove Smith
and next and so on so guys delete button working as we planned so that's it for
this lecture once again in order to capture the index in the syntax for Loop
approach we have to use the dollar sign Index right so hope you guys got the idea
all right so let's move on to the next lecture all right so guys think that we want
to show the total number of user

05:03:55
accounts that are stored inside of our users OBG array inside the browser
view so how do we do that for this we have two different approaches so let's see
them one by one so first see the JavaScript way so guys in JavaScript we have the
length method in arrays to get the length of an array right so we can simply use
this to get the user accounts that are stored inside this users obj array right so
let's write example so we can understand this clearly uh first thing first I want
to show this user account when these

05:04:33
components loads inside the browser for this we can use the Constructor
method so guys don't worry about this Constructor method we will learn about this
in detail in next lectures for now just follow this code so inside the app
component is file create the Constructor method very simple this also same like
previous regular typescript methods so the method name is Constructor and next the
method parenthesis and at last add the method score now inside this let's log the
users count so create a console log and inser this log

05:05:18
parentheses pass this user objr length so how do we access this user obj
variable this dot users obj after this dot length so as you guys know this length
method will return how many array values are stored inside this users OBG array in
our case can you guys tell me how many user objects stored inside this array it's
for right so save this and go to the browser inside the browser console we got this
array length for in other words user count of this array is four so guys we got
this array value

05:06:02
using the array length JavaScript method guys remember this these arrays
and all of the array methods that we use in previous lectures and also this lecture
coming with the JavaScript or the typescript these are not angular things right so
angular is developed on top of the JavaScript so that's why we can use all the
JavaScript Concepts methods in angular okay all right so we got this value inside
this component is file and we printed this users count inside the browser console
so this browser console

05:06:39
will be used used by the developers not the end users so in order to show
the total count of users inside the browser view or the D we have to get this users
array length inside the app component HTML file so can you guys tell me a way to do
this yes of course we can use the string interpolation approach so go to the app
component HTML file let's show this inside this Li tags so before this I another
string interpolation scope open and close two cly brackets inside this now we have
to add the length of

05:07:17
the users OBG array so how do we do that simply just call the array
length method from here same like previous so insert this users obj do length
that's it so guys simply this will return the length of this users obj and render
that length value inside the browser that's it so save this over and go to the
browser as you guys can see here we got this array length or the users count inside
front of all of these users so let's add let's add another new user as you guys can
see here this users count

05:07:57
also increased 4 to five if I add another user again this value increased
awesome right so guys uh this is how we capture and work with the arrays l or in
our case number of users count using the JavaScript length approach so in the next
lecture let's look at the angular approach all right so guys in this lecture let's
look at how we can get the users count using the angular approach which is using
this ng4 directive so let's see this in action guys in this ng4 directive we have
an inbuilt variable to capture the looping arrays

05:08:38
length something same like this index approach so nothing much here very
simple just simply add this inside this loop after this index again we have to
create a variable to capture this so create a new variable something users count so
let keyword and the variable name is users count so after this assign this to the
count variable which is coming from this ng4 directory so guys why do we have to
assign this to VAR because this is coming from the ngf directive in order to use
this inside of our HTML component file we have to store

05:09:18
it inside of another variable which is declared under this Cod so
otherwise we cannot use this inside our template file right all right so now we
have the users count so let's load this inside the browser view so for this also we
have to use the string interpolation approach um let's remove this previous
JavaScript length method here and this time let's pass this users count variable
that's it so save this and go to the browser as you guys can see here we got the
users count for printed here same as previous so if I add a new user

05:09:59
this count also change to number five so this is working like previous
without any issues but this time we use the ng4 directive to get the count so so
some of you guys may wonder is there any issue if you use the previous JavaScript
length method for this guys there is no issue for this but if we are using the
angular framework to develop our application then why do we need to use the
JavaScript methods even a better approach is available with the angular framework
right so always guys if there is a better approach in angular

05:10:34
for any conditional Logics or code try to use that otherwise you cannot
take the full advantage of the angular framework so hope you guys got the idea all
right so guys now let's see how we can do this getting the users array count using
the new syntax block approach so let's see this in action same like the previous
first we need a variable so declare that inside this for Loop syntax block let
users count assign count so again we are getting this error why is that in this new
syntax approach this count variable

05:11:15
modified as dollar sign count so change it to dollar sign count that's it
the only difference is this dollar symbol compare with the ng4 count variable right
so next let's render this inside the browser view before this add another string
interpolation scope and pass the count variable here that's it so save this and go
to browser as you guys can see here we got this users count cool right so guys this
is how we deal with the count in angular for directive um I think that's it for
this lecture so let's move on to the

05:11:56
next all right so guys think if this array is empty then what will happen
to this Loop wait let's see this in action let's go to the component file and
remove all the users ofj arrays objects save this and go to the browser in here we
got nothing just an empty page why we got this empty page because there is no value
inside our array right if I press this add new users button this will start to
render the new user value inside the browser so guys now what I want to do is I
want to show a message

05:12:29
something like no users to display inside this browser view so how do we
do that can you guys guess for this first we have to check whether this looping
array has values or not so how do we do that for this we have to use the ngf
directive so let's do this before this create a div and inser this add a P tag and
add the message that we want to show the message is no users to display now I want
to load this inside the browser conditionally so for this let's use the ngf
directive so inside this add the ngf directive so the as

05:13:16
symbol and the directive is NG if so next the condition so what is the
condition we want to load this message inside the browser view when there is no
value stored inside the users array so let's add the condition here the users OBG
which is our array dot length equals operator which is double equal signs after
this add zero because we want to check whether this array length is Zer or not so
guys if this array length is equal to zero this will return true so in that case
this will render this message inside the browser

05:14:05
so save this and go to the browser as you guys can see here we've got
this no use users message inside the browser so how do we get this now our users
obj array is empty which means this array length will return zero in that case this
will return true if this return true this message will render inside the browser VI
so if I add the new user to this as you guys can see here this time the message is
removed from the view and this loads the users details inside the browser right so
guys this time we added

05:14:40
a new user object to the array programmatically using this add new user
button so once we add the new user value to this array this array length will
increase to one in that case the statement will return false because this length is
now not equals to the zero in that case this will remove this P tag from the Dom so
this is what's happening behind the scenes so guys all this happen in fraction of
second all in real time without reloading the web page so this is another example
for change detection mechanism in angular

05:15:20
right uh all right so before we move on I want to show you something um
some of you guys may wonder why do we didn't use this count NG if directive value
to do this logic with this also we can get the arrays length right so why do we use
using this JavaScript method here so guys this is a valid question but when there
is no values inside the array this ng4 will not Loop through this array this will
stop and this will move on to the next code uh wait I'll show you this so let's
comment the previous message

05:16:00
now inside this let's add a P tag and add the message we'll copy and
paste the previous message and inside this Li tags now let's set the NG if
directive to show this no user data message inside the browser view the same thing
we did before but this time we'll use this count value instead of the array length
method so at the directive inser this V tags so after this condition let's check
whether this us account value is equals to zero or not so the US account equals
operator zero if this users value is zero this

05:16:46
should render inside the browser Vib right so save this and go to the
browser we got nothing here so now our array is empty so this message should render
inside the browser right why this is not rendering this message inside the browser
so guys as I said before if there are no values inside the looping array this ng4
will stop executing and move on to the next so in that case this will ignore these
all so that's why this is not loaded inside the browser on other hand we cannot use
this count value out of this NG for directive scope

05:17:24
so in order to achieve this in here we have to use the JavaScript array
length method so there is no any other option so that's why I used this approach so
hope you guys got the idea all right so let's move on to the next lecture where we
learn how to do the same scenario using the new fope syntax approach all right guys
so in the previous lecture we learned how to deal with the empty value for this we
use the ng4 approach so in this lecture let's see this in the new approach so guys
there is not much let's do this so first

05:18:16
we have to get the array length so how do we get that same as the
previous In Here Also we cannot use this count variable because the same reason if
this array is empty this for Loop won't execute So In Here Also we have to use the
array length approach so now before this for Loop syntax create an if Loop syntax
so how do we do that add symbol and the if directive after this parenthesis and the
directive scope now let's add the condition so users obj which is our users array
after this dot length

05:19:01
 next add the equals operator which is this two equal signs now assign the
value which is number zero next inside the scope add the message so create a P tag
and the message is the same as the previous so copy and paste that here now after
this add this to this message loaded using syntax that's all so save this all and
go to the browser as you guys can see here this loaded the no user data message
coming from syntax right so we successfully loaded the message when there is no
users to fetch perfect right

05:19:50
uh before we move on we have something new another approach to display
this empty value message in this for Loop syntax so this is coming with this new
for syntax approach so we have another new separate block for this which is empty
syntax block so let's see this in action it's very easy compared to the previous
approach just simply open an empty directory block after this for syntax block same
as other syntax templates first add the add symbol after this the directive name
empty for this there is no parenthesis

05:20:29
just simply add the curly brackets just simply add the directive scope
with curly brackets all right so now this time let's pass the empty array message
inside this block so let's simply copy and paste it from the previous change it to
loaded from empty syntax block that's it so save this and go to the browser as you
guys can see here we got this message which is loaded using the N empty syntax
block if I add a new user as you guys can see here this removes the message from
the Dom and render the new user values so this empty

05:21:11
block also do the same thing but in a different way so when this for Loop
trying to execute this Loop if this looping array is empty this will stop executing
this and move on to this empty block and render this value inside the Dom something
similar like the if Els block right so this is one of the new features coming with
the new angular syntax approach so with this empty block we can simply do this
empty message without writing any conditions or Logics awesome right so guys this
is how we deal with the new

05:21:47
empty syntax block all right guys so we almost completed all the features
in fullop so in this lecture we'll quickly go through some of other properties
coming with the ng4 and the fullop syntax block so these are not that much
important but it can be sometimes helpful when you're dealing with the real world
application so let's look at the first and last properties so guys simply this will
return a Boolean value whether the current item is the first or the last item in
the list this can be useful for

05:22:24
applying special styles of behavior to the first or last item in a list
so let's see this in action so guys I will do this example in the new for Loop
syntax so these all valid in the previous ng4 directives as well so let's look at
the first property so inside this for sytax Loop let's add this first property
nothing much here same as the previous index and this count properties so after
this count property at the semicolon let's create a variable for this let first
assign the property is dollar sign and the property is first
 05:23:10
so guys in the new syntax approach always remember all the properties are
coming with the dollar sign right if we want to use this with the NG for all
directives then we don't need to use the dollar symbol right all right so guys this
first property will return true if the current array item is the first one in the
list otherwise it will return false so let's load this inside the browser view so
we can see this this clearly so before this enter another string interpolation and
add this first variable that's it so save this and go

05:23:50
to the browser as you guys can see here in front of all the users we got
these Boolean values for the first value we got true Boolean value and all other
values are false so basically this is what this first po Loop directive will do so
using this Boolean value we can add a dynamic style or we can work on something
conditional rendering and so on so you guys will get used to this when dealing with
real world applications all right so next we have the last property so guys this is
same opposite of the previous first property

05:24:26
so this will return a Boolean value when the current item is the last
item in the list okay so let's say this in action so again create another variable
after this the variable this time set as last and assign this to the last property
so this also coming with the dollar sign right so in order to see this inside the
browser view so let's pass this inside the string interpolation so inside this
previous string interpolation replace this first to last variable that's it so save
this and go to the browser as you guys can see here

05:25:10
this loaded the Boolean value unlike previous this time this returned
true Boolean value on the last item on the list if I add another user as you guys
can see here this changed and this last value only returning a true Boolean value
so this is what we can do with the last property so hope you guys got the idea all
right so let's quickly move on to the next even and odd follow directory properties
so what is this even and out properties so you can find the answer simply with
these property names so these even and odd return a

05:25:50
Boolean value when the current item is the even or the odd item in the
list if the item is even this even property will return true otherwise this will
return false so in other hand this odd property will return true if the item is odd
and otherwise false very simple right so let's look at this in action so we can
understand this clearly so first let's look at the even property so as usual create
a variable let even after this assign this to the dollar sign even property next
replace the string

05:26:33
interpolation value to even which is this even property variable all
right so save this all and go to the browser as you guys can see here this time we
got true Boolean value front of these even array indexes awesome right all right so
next let's look at the odd property so after this again create a variable for this
let odd and assign this to the dollar sign on property next replace this even to
odd that's it so save this and go to the browser we got this True Value front of
the odd items perfect so guys that's it
 05:27:19
for these properties these are just simple properties that are bundled
with angular for directive so hope you guys got the idea all right guys uh this is
the end of the ng4 and the new for Loop syntax directive so let's move on to the
next chapter which is our last structural directive which is NG switch case and the
new syntax NG switch all right so guys in this lecture let's look at the last
structural directive in the list NG switch case directive for this also we have the
old ways and the new syntax approach Ina so

05:27:58
first look at the old way and we'll move on to the new syntax approach so
guys when we learning if directive we use this example to load a message Mage
inside the view based on the users role if the user is admin we loaded the welcome
admin message if the user is a member we loaded the welcome member message and so
on so guys for this we used the else condition and again another if conditions and
so on so for this we have an easy and clean approach which is we can simply do this
using the NG switch case directly so let's see

05:28:37
this in action before that I will comment all the previous codes inside
the HTML files and inside the TS files as well so we'll do this from scratch next
first thing first we need a variable to store the users role so and that here
inside the component is file set the variable name as users role and this R is
capital after this type will be string and set a default value something admin pass
this inside codes all right so next inside the HTML file let's define the NG switch
case directive wait first let's define the

05:29:18
HTML code then we'll work on the directive so first create a d and inside
this add a P tag inside this P tag add the message welcome admin so next copy and
paste this P tag again and change the message as welcome member so guys when the
user is admin I want to show this admin message if the user is a member I want to
show this member message that's it so guys now let's work on the logic when we're
dealing with the switch directive we have to follow two steps first we have to
define the switch then

05:29:59
we have to define the cases right so all right so first we have to define
the switch so let's do this inser this d add this NG switch directive and guys we
have to Define this as a property binding so wrap this inside of square brackets
next equal sign inside codes pass the user R variable so guys this is how we Define
the switch with this we are telling angular to evaluate the user all variable and
switch based on its values so as you guys can see here we are getting this warning
CA as usual like other NG directives we have to

05:30:45
import this NG switch directive as well so go to the component is file
and add this inside this Imports array so the directive is NG switch select this
auto complete this will add the import statement as you guys can see here this also
coming with the common angular modu all right so next we have to define the case
for these messages so inside this V tag add this NG switch case so carefully follow
this Capital simple letters so guys unlike this NG switch we have to Define this as
a directive with
 05:31:25
a as symbol after this equal sign and add double codes so guys in here we
have to define the case so we want to show this message when the user role set as
admin so this case is admin now we have to pass this as a string value so inside
these double codes again add another single code inside this pass the admin so guys
this is the case so simply we are telling angular to display this message when the
user role set as admin so in here also we are getting this warning in order to
solve this we we have to import this NG switch case

05:32:10
directive as well so go to the app component es5 and add this import
statement this time the directive is NG switch case select this auto complete
that's it so we successfully completed the two steps first we Define the switch and
second we Define the cases with this we are simply telling angular to evaluate the
user all variable and display the the corresponding message based on its value if
the user rle is admin it will show this welcome admin message right so save this
and go to the browser in here

05:32:50
we got this welcome admin message so how this loaded here because guys by
default we set this user value as admin so in this case this NG switch case will
return true so this will displayed this message but guys if you notice this cas
carefully we got this welcome member also printed here why is that cuz guys we
Define this NG switch case only for the first admin message this ptag so for this
member message we didn't add any condition logic so that's why this loaded inside
the browser even this is

05:33:27
inside this NG switch div right so in order to fix this we have to add
the NG switch case directory to this ptag as well so same like previous Asic symbol
and the directive is NG switch case after this the case is this time we have to
show this message when the user role is a member so pass this inside of codes
that's it so save this and go to the browser as you guys can see here this time we
got only this welcome admin message so if you change this user rle value as member
save this and go to the browser

05:34:08
so this time we got the welcome member message hope you guys got the idea
all right guys before we move on to the next what I want to do is I want to add
down the user R case something for user all something editor how do we do that very
simple just all we have to do is simply add another case inside this NG switch
right so down here again create another P tag and set the pag value as welcome
editor next we have to define the case same as previous first add the directive NG
switch case followed by the as

05:34:52
symbol next the case is I want to show this message when the user R set
as editor so pass this inside double codes and inside of single codes that's it so
save this and go to the browser syvia got this member message why is that because
this user all value set as member so change this to editor save this and go to the
browser as you guys can see here this time we got the editor message so guys this
is how we deal with the NG switch case directory so in here first we have to define
the switch next we have to

05:35:29
define the cases so inside of a switch we can add as many as cases we
want so hope you guys got the idea so guys before the end of this lecture let's
look at another case for this so imagine that we are building this Logic for the
our applications login page if admin logged in we are showing the welcome admin
message if the member logged in we are showing this welcome member message right so
I think in any case if there is no users logged into our application in other words
this users role variable doesn't have any

05:36:08
value assigned to this in that case we want to change the message to
something else like please login or something right so how do we do that can you
guys guess for this guys we can simply use another NG switch case um let's see this
in action so first let's make this users rooll value as an empty string next inside
this add another P tag and the message is please login now in order to show this
conditionally we have to add the NG switch case directive to this P tag so add that
here this time the case is just an empty

05:36:52
string so pass that here inside of Double quotes and and a single Cotes
and a empty single quotes that's it so save this and go to the browser we got this
please login message which means this working as we expected um but guys using this
empty string values are not a good practice for this we have a better approach in
angular we have another directive for this which is NG switch default so using this
we can use this please login message when the user all not defined so let's see
this in action just simply

05:37:30
remove this NG switch case directive and add the NG switch default
directive so as symbol and the directive is NG switch default so follow these
Capital simple letters carefully so to this uh directive we don't need to pass any
checking values right so guys we are getting this warning as usual in order to
prevent this we have to import this directive as well so go to the app component is
file and add the import statement inside this import array the directive is switch
default select this auto complete

05:38:11
this will add the import statement that's it so say this go to the
browser as you guys can see here we got this place login message so guys how this
loaded when there is no values assigned to the users role this NG switch will go
through these cases if there is no any matching Case by default this will load this
NG switch default message inside the browser be so this will not only work with an
empty value so if I set something user all to apart from these Swit cases values in
that case also this will print this default

05:38:51
message uh so let's change this users roll to something HR save this and
go to the browser till we are getting this please login message so guys simply we
use this NG switch default directive to display a default message message when
there is no matching cases so hope you guys got the idea awesome all right guys
that's the end of the NG switch case directive so in the next lecture let's look at
the new Switch case syntax approach for this perfect