Angular component lifecycle hooks Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 24 of angular2 tutorial in
this video we'll discuss angular
component lifecycle hooks a component
has a lifecycle managed by angular
anytime a component is required angular
create the component renders the
component creates and renders the
component children checks when the
confident data bound properties change
and finally destroys the component
before removing it from the Dom so to
tap into and react when these events
occur angular offers several lifecycle
hooks as you can see right here the
order in which these lifecycle hooks are
specified is the order in which they
execute as you can see there are a lot
of them out of all these cooks the three
most commonly used ones are ng on
changes ng own init and ng on destroy so
let's look at these three commonly used
lifecycle hooks ng on changes this is
called before ng on a net this lifecycle
hook excuse every time the value of an
input property changes the hook method
receives a simple changes object
containing current and previous property
values we look at an example of using
tests in test abet ng on init this
lifecycle hook executes after the
constructor and after ng on change hook
for the first time it's most commonly
used for component initialization and
retrieving data from a database we look
at an example of using this in our next
video ng on destroy execute just before
angular destroys the component and
generally used for performing cleanup
now let's look at a simple example of
using ng on changes lifecycle hook so
here is what we want to do on a webpage
we want to have a text box and as we
type into this text box we want to
capture the current and previous value
and log it to the browser console as you
can see right here so let's see how to
achieve this using ng on change its life
cycle hook this is the same project that
will be in version with so far in this
video series now we know ng on changes
is called
the component input property changes so
let's create a simple component that one
input property we're going to place this
simple component in a different folder
so let's right-click on our app folder
and add a new folder and lets me move
folder others and let's right-click on
this new folder and add a new type
script file and I'm going to name or
component simple dot component dot TS
let's click OK first let's create our
class export class and in the name of
your class let's name your class simple
continent next let's import the
component decorator from angular core to
turn this class into a component let's
decorate it with component decorator
first let's specify a selector for our
component let's set this selector as
simple so we can use the selector
anywhere we want to use this component
and this component is going to have one
input property let's name our input
property simple input you can give it
any meaningful name we want I just call
that simple input and the datatype for
this is going to be string and to turn
this property into an input property we
need to decorate it with input decorator
so first let's import input decorator
from angular core and decorate this
property with at input decorator next
let's include an inline template for our
continent look at what the inline
template does it displays this text you
entered and whatever value we have
within this input property simple input
and here is what we want to be able to
do so whatever value we type in this
text box we want to echo that on the
back page like this and the way we are
going to achieve this is by including
this text box within our route component
that is our app component and whatever
we type into this text box we pass that
value to this input property of our
component
and this input property is then used
with interpolation to display the value
we have typed into this textbox so the
next step is to include a textbox with
another root content which is apt or
complement or TS so within the inline
template right here let's include a
textbox to keep track of what we have
typed into this textbox
let's include a property within our
class I'm going to name this property
use a text and the disc type is string
and now let's use two-way data-binding
to keep the value within this property
and in the textbox in sync and to use to
a data binding we use ng model directive
and the model equals of a property name
which is user text next let's nest our
simple component within this fruit
component before that let's use to HTML
break elements and for our simple
component that we have just created the
selector that we have used is simple so
let's use this selector as a directive
within our root continent clear we want
to nest it and the simple component also
has an input property and the name of
the input property is simple input so
let's bind to this input property so
within a pair of square brackets we
specify the name of the input property
of the simple component and we want to
bind it to this property of our root
component and let's close this simple
directive there are several moving parts
here so let's understand what's going on
now if you look at the textbox they
using two-way data-binding with this and
we have bound this textbox to this
property user txt so whatever value we
type into the textbox that value is also
updated in this property user text we
are then binding this user text property
to the input property of our simple
component so that value gets passed to
the input property and what are we doing
with that input property
of the simple component so if we look at
that within our simple component we are
simply echoing that on the webpage using
interpolation so whatever we type into
the textbox that gets displayed on the
webpage as you can see right here before
we can run our project we need to import
and register our simple component within
the Drude module so let's open this file
app module dot PS which contains our
route module first let's input our
simple component and then let's declare
that but in the declarations array let's
save our changes and view the page in
the browser notice at the moment
whatever we have in the textbox is
echoed on the web page now what we want
to be able to do is the value that we
type into the textbox we want to capture
the current and previous values and lock
those values into the console window at
the moment we don't have anything within
the console so as we type into this text
box we want to capture the current and
previous values and log it to the
console
let's see how to achieve this using ng
on changes lifecycle hook the first step
to use a life cycle hook is to import
the interface that contains the life
cycle hook method in our case we want to
use ng on changes life cycle hook now
the interface for this is on changes and
we will have to import that interface
from angular co first so let's do that
now so but then our simple component
along with component and input we also
want to import on changes life cycle
hook interface now if you look at this
ng on changes by cycle hook method this
also receives an object called simple
changes as a parameter so let's also
import simple changes from angular core
next we make this class implement this
lifecycle hook interface on changes so
let's use the implements keyword for
that and then we want to implement on
changes in
Faye's and then finally we provide
implementation for this method ng on
changes notice we have a red squiggly
here and if we look at the error it says
class simple component incorrectly
implements interface on changes property
ng on changes is missing in type simple
component so basically it's complaining
that we are incorrectly implementing
this interface on changes because it
contains a method called ng on changes
which is our lifecycle hook method which
is missing implementation so let's
provide implementation for ng on changes
lifecycle hook method so with another
class let's include the name of the
method ng on changes and we know this
method is called every time the value of
this input property changes and this
method is going to receive a change
object let's call the object changes and
the type for this is simple changes
which we have imported from angular core
and this object is going to contain all
the property names that have changed
current and previous values so let's
provide the implementation for this
method now all we are going to do within
this method is loop through all the
properties that we have in the changes
object that we are going to receive into
this method and then you know we are
going to get the property name so we're
going to store that in this variable and
we are going to get the current value of
that property as well as the previous
value using tenant value and previous
value properties respectively and then
by using string concatenation here to
display the property name that has
changed its current value and previous
value pretty straightforward code here
and we are using let keyword instead of
Val keyword to declare our variables so
let's save all our changes and reload of
a page notice now within a console we
have the property name its current value
and previous value look at what's going
to happen as we type into the textbox
notice the property name its current
value and previous value
automatically logged to the console so
we know every time a value in this
textbox changes it also changes the
input property of our nested component
then the input property of the nested
component changes it automatically calls
this ng on changes lifecycle hook method
passing it this simple changes object
which contain the names of the
properties the current value and
previous values and all we are doing
within this hook method is logging the
properties their current and previous
values to the console and we see those
values right here now instead of using
string concatenation like this we can
also use this placeholder syntax notice
within the placeholder we have specified
a variable the value we have in this
variable but then we concatenate it to
this string right here so whichever
syntax you prefer you're free to use
that syntax so here are the three simple
steps to use in lifecycle hook first
import the lifecycle hook interface next
make the competent class implement the
lifecycle hook interface using the
implements keyword and finally provide
the implementation code for the
lifecycle hook interface method in this
video have looked at an example of ng
changes lifecycle hook in a later video
we'll look at an example of ng own in it
lifecycle hook one important thing to
keep in mind is that the second step
right here is optional so even if we
remove this line right here implements
own changes this is going to work
exactly the same way as before let's
actually prove it let's save our changes
and free loader web page notice now as
we start to type it works exactly the
same way as before so the obvious
question that comes to our mind at this
point is then what's the use of this
line now if we include this line then
typescript knows that our intention is
to implement own changes lifecycle hook
interface so if we make any type of
graphical errors like this typescript
compiler will be able to flag that as an
error right away at compile time as you
can see right here
but if we don't have this line right
here then typescript compiler does not
know our intention whether we want to
implement on changes lifecycle hook or
whether we want to implement a separate
method with name and on changes so it
will not be able to flag this as an
error so I suggest though the step is
optional always included when
implementing a light cycle hook thank
you for listening and have a great day