DEV Community: Dev-Coder

Angular : Lifecycle Hooks

Dev-Coder — Tue, 15 Dec 2020 11:50:35 +0000

In Angular, a component is the main building block the application, it is very important for us to understand the lifecycle processing steps of the components so that we can implement that in our applications.

LifeCycle Process

In Angular, every component has a life-cycle, a number of different stages it goes through.
There are 8 different stages in the component lifecycle.
Every stage is called as lifecycle hook event.
So, we can use these hook events in different phases of our application to obtain control of the components.
Since a component is a TypeScript class, every component must have a constructor method.
The constructor of the component class executes, first, before the execution of any other lifecycle hook events.
If we need to inject any dependencies into the component, then the constructor is the best place to inject those dependencies.
After executing the constructor, Angular executes its lifecycle hook methods in a specific order.

These stages are mainly divided into two phases:

One is linked to the component itself and
Another is linked to the children of that component.

ngOnChanges – This event executes every time when a value of an input control within the component has been changed. Actually, this event is fired first when a value of a bound property has been changed. It always receives a change data map, containing the current and previous value of the bound property wrapped in a SimpleChange.
ngOnInit – This event initializes after Angular first displays the data-bound properties or when the component has been initialized. This event is basically called only after the ngOnChanges()events. This event is mainly used for the initialize data in a component.
ngDoCheck – This event is triggered every time the input properties of a component are checked. We can use this hook method to implement the check with our own logic check. Basically, this method allows us to implement our own custom change detection logic or algorithm for any component.
ngAfterContentInit – This lifecycle method is executed when Angular performs any content projection within the component views. This method executes when all the bindings of the component need to be checked for the first time. This event executes just after the ngDoCheck() method. This method is basically linked with the child component initializations.
ngAfterContentChecked – This lifecycle hook method executes every time the content of the component has been checked by the change detection mechanism of Angular. This method is called after the ngAfterContentInit() method. This method is also called on every subsequent execution of ngDoCheck(). This method is also mainly linked with the child component initializations.
ngAfterViewInit – This lifecycle hook method executes when the component’s view has been fully initialized. This method is initialized after Angular initializes the component’s view and child views. It is called after ngAfterContentChecked(). This lifecycle hook method only applies to components.
ngAfterViewChecked – This method is called after the ngAterViewInit() method. It is executed every time the view of the given component has been checked by the change detection algorithm of Angular. This method executes after every subsequent execution of the ngAfterContentChecked(). This method also executes when any binding of the children directives has been changed. So this method is very useful when the component waits for some value which is coming from its child components.
ngOnDestroy – This method will be executed just before Angular destroys the components. This method is very useful for unsubscribing from the observables and detaching the event handlers to avoid memory leaks. Actually, it is called just before the instance of the component is finally destroyed. This method is called just before the component is removed from the DOM.

JavaScript Arrow Functions

Dev-Coder — Sun, 13 Dec 2020 14:51:42 +0000

_Today, We will learn how to use the JavaScript arrow function to write more concise code for function expressions.

Introduction

ES6 arrow functions provide you with an alternative way to write a shorter syntax compared to the function expression.

The following example defines a function expression that adds two numbers:

Arrow Function Example

In above example, The arrow function has one expression x + y so it returns the result of the expression.

However, if you use the block syntax, you need to specify the return keyword:

The typeof operator returns function indicating the type of arrow function.

Arrow Functions With Multiple Parameters

If an arrow function has two or more parameters, we need to use the following syntax:

For example, To sort an array of numbers in the descending order, we use the sort() method of the array object as follows:

The code is more concise with the arrow function syntax:

Arrow Functions With Single Parameter

If an arrow function takes a single parameter, we can use the following syntax:

(parameter1) => { statements }

Note that, We can omit the parentheses as follows:

parameter => { statements }

The following example uses an arrow function as an argument of the map() method that transforms an array of strings into an array of the string’s lengths.

Arrow Functions With No Parameter

If the arrow function has no parameter, we must use the parentheses, like this:

( ) => { statements }

Line Break Between Parameter Definition and Arrow

JavaScript doesn’t allow us to use a line break between the parameter definition and the arrow ( => ) in an arrow function. The following code produces a SyntaxError:

However, the following code works perfectly fine:

JavaScript allows us to use the line break between parameters as shown in the following example:

Summary:

Arrow functions are handy for one-liners. They come in two flavors:

Without curly braces: (...args) => expression – the right side is an expression: the function evaluates it and returns the result.
With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the function, but we need an explicit return to return something.

JavaScript - Destructuring Assignment

Dev-Coder — Sat, 12 Dec 2020 18:57:52 +0000

Today, We will learn how to use the ES6 destructuring assignment that allows us to destructure an array into individual variables.

ES6 provides a new feature called destructing assignment that allows you to destructure properties of an object or elements of an array into individual variables.

Array destructuring

Let's take an example of a function that returns an array of subject list as follows:

The following invokes the getSubjectList() function and assigns the returned value to a variable:

Prior to ES6, there was no direct way to assign the elements of the returned array to multiple variables such as x, y and z.
To get the individual subject to a variable, We need to do like this:

Fortunately, From ES6, We can use the destructing assignment as follows:

The variables x, y and z will take the values of the first, second, and third elements of the returned array.

Note that the square brackets [] look like the array syntax but they are not.

If the getSubjectList() function returns an array of two elements, the third variable will be undefined, like this:

In case the getSubjectList() function returns an array that has more than three elements, the remaining elements are discarded.

For example:

Array "Destructuring Assignment" with "Rest" Parameter

It’s possible to take all remaining elements of an array and put them in a new array by using the rest syntax (...):

The variables x and y receive values of the first two elements of the returned array.
The args variable receives all the remaining arguments, which are the last two elements of the returned array.

Setting default values

For Example:

How it works:

First, declare the getValues() function that returns an array of two numbers.
Then, assign the dataValue variable to the returned array of the getValues() function.
Finally, check if the third element exists in the array. If not, assign the value 0 to the thirdItem variable.

It’ll be simpler with the destructuring assignment with a default value:

If the getData() function doesn’t return an array and you expect an array, the destructing assignment will result in an error.

For example:

Uncaught TypeError: getData is not a function or its return value is not iterable

A typical way to solve this is to fallback the returned value of the getData() function to an empty array like this:

Summary

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
We can set user-defined default values if array has returned null or variable has a undefined.

JavaScript ES6 - Spread Operator

Dev-Coder — Fri, 11 Dec 2020 19:17:56 +0000

ES6 provides a new operator called spread operator that consists of three dots (...).
The spread operator allows you to spread out elements of an iterable object such as an array,a map, or a set.

Example

Result

Above example, the three dots (...) located in front of the oddValue and evenValue array is the spread operator.
The spread operator unpacks the elements of the oddValue and evenValue array.

Summary

The spread operator is denoted by three dots (…).
The spread operator unpacks elements of iterable objects such as arrays, sets, and maps into a list.
The spread operator can be used to clone an iterable object or merge iterable objects into one.