Class in JavaScript

Read full article on the Infragistics blog

ECMAScript 6 introduced the class keyword to create classes in JavaScript. Now, you can just use the class attribute to create a class in JavaScript. Before ECMA 6, whenever you called a function using a new operator, the function returned a new object. Therefore, the function was acting as a class and known as a constructor. This way of calling a function to return an object is also known as the Constructor Invocation Pattern.

But In ECMAScript 6, a class can be created using the class keyword. Consider the code below:

In the above code snippet, you have created a class named Car using the ECMAScript 6 classkeyword. You can also create an object of the Car class as shown below:

The JavaScript class is a simplified syntax for the usual prototype based inheritance. It does not offer any new way of object creation or prototype inheritance and does not bring any new models of object orientation or inheritance in JavaScript. You could say that a class is a special function to create objects.

Read full article on the Infragistics blog

Simplifying function expressions and the function statement in JavaScript

Read full article on the Infragistics blog

In JavaScript, a function can be created in three possible ways:

  1. Function as an expression
  2. Function as a statement
  3. Arrow functions

In this post, we will learn about function expressions and the function statement.

Consider the following code:

When you create a function as shown above, it is called a function declaration or statement. You can rewrite the code above to add a function in different ways, as shown below:

The function created above is called a function expression – in this case, an anonymous function expression. A named function expression can be created as below:

The name of the function expression can only be used inside a function body, which is helpful in recursion. A function expression can either be a:

  1. Named function expression
  2. Anonymous function expression

The third method of creating a function is by using the Arrow function, which was introduced in ECMAScript 6. You can learn more about Arrow functions here.

Read full article on the Infragistics blog

What are the Call and Apply Methods in JavaScript

Read full article on the Infragistics blog

In JavaScript, the apply() and call() methods execute a function in the context (scope) of the first argument you pass to them. Let’s take a look at them in action to learn more. Say that you have an object person as shown below:

And in addition, you have a function message as shown below:

Now, you have a requirement to pass the person object as the value of this in the function. In addition to explicitly passing the value of this, you also need to pass the value for the age parameter.

You can pass the context (the value of this) explicitly using by either the call() or apply() methods. Consider the following code:

Using the call method, we are passing the object person as the value of this inside message function.  You can achieve the same using the apply() method as shown in the listing below:

In JavaScript, the call() and apply() methods work in almost exactly the same way, but with a few key differences:

  1. The first parameter of both call() and apply() is the value of this object.
  2. In the call() method, the other arguments to function will be passed as separate comma separated values.
  3. The call() method takes zero or more individual parameters.
  4. In the apply() method, the second parameter is an array.
  5. The apply() method takes an array of parameter.
  6. You should use the call() method when the number of function parameters is fixed.
  7. You should use the apply() method, when the number of function parameters is not fixed.

 

Read full article on the Infragistics blog

Four Ways to Create Objects in JavaScript

In JavaScript, there are four methods to use to create an object:

  1. Object literals
  2. New operator or constructor
  3. Object.create method
  4. Class

In this post, we will learn each of these methods.

Object literals

An object literal, also called an object initializer, is a comma-separated set of paired names and values. You can create an object literal as shown below:

You can add properties dynamically in an object, including after you have created the object. Here we add the dynamic property car.type:

The object literal is a simple expression that creates an object each time the statement that it appears in is executed in the code. You can also use Object.defineProperty to create properties in the object literal as shown below:

The main advantage of using Object.defineProperty is that you can set values for object property descriptors or modify existing properties. You can learn more about Object Property Descriptor here.

New Operator or Constructor

The second way to create an object is to use the constructor function. If you call a function using a new operator, the function acts as a constructor and returns an object. Consider the following code:

Learn full article on the Infragistics blog

What are Template Literals in JavaScript

Read full article on the Infragistics blog

In ES6, two types of literals were introduced:

  1. Template Literals for string concatenation and expression embedding in a string
  2. Tagged Template Literals to tag the Template Literal in a function so the literal can be evaluated in the function

Let’s assume that you need to do the string concatenation with a dynamic expression or with the value of a variable. Take a look at the following code:

Here you see you’ll need to embed the value of variable foo in a string literal. In ES6, you can do this using Template Literals, as shown in the code listing above. Template Literals are mainly used for the following purposes:

  • String concatenation
  • To create multi line strings
  • To embed expressions
  • To use string interpolation

In the code above, we are embedding the expression foo in the string result. To use Template Literals:

  1. Template literals are created inside a back-tick (` `) character.
  2. In Template literals, placeholders are created using the ${expression} symbol. At run time, the expression will be evaluated and replaced in the placeholders.
  3. In template literals, the expression can be embedded using ${expression}. This is also called an expression interpolation.

Using Template literals, let us create some expression interpolation. Consider the following code:

To create expression interpolation here, we are using the Template literal. You’ll also notice the string is broken into multiple lines. If required, you can created a nested template also.

Tagged Template Literals :

ES6 allows you to tag template literals, meaning you can parse that inside a function.  So, if you use Tagged Template Literals, JavaScript will not immediately assign them to a variable, and rather parse them in a function

Read full article on the Infragistics blog

What are @HostBinding() and @HostListener() in Angular?

Read full article on the Infragistics blog

To understand @HostListener and @HostBinding, you should have basic knowledge about directives in Angular. There are three types of directives in Angular:

  1. Component
  2. Attribute Directive
  3. Structural Directive

The basic difference between a component and a directive is that a component has a template, whereas an attribute or structural directive does not have a template. To understand these two concepts, let us start by creating a simple custom attribute directive. The directive below changes the background color of the host element:

To create a custom attribute directive, you need to create a class and decorate it with @Directive. In the constructor of the directive class, inject the objects ElementRef and Renderer. Instances of these two classes are needed to get the reference of the host element and of the renderer.

You can use the above attribute directive on a component template as shown in the listing below:

Here, the component class holding the host element is created as below:

Right now, the appChbgcolor directive will change the color of the host element.

@HostListener() decorator

In Angular, the @HostListener() function decorator allows you to handle events of the host element in the directive class.

Let’s take the following requirement: when you hover mouse on the host element, only the color of the host element should change. In addition, when the mouse is gone, the color of the host element should change to its default color. To do this, you need to handle events raised on the host element in the directive class. In Angular, you do this using @HostListener() .

To understand @HostListener() in a better way, consider another simple scenario: on the click of the host element, you want to show an alert window. To do this in the directive class, add @HostListener() and pass the event ‘click’ to it. Also, associate a function to raise an alert as shown in the listing below:

Read full article on the Infragistics blog

How to Create Your First Angular Reactive Form

Read full article on the Infragistics blog

Out of the box, Angular provides us with two types of forms:

  1. Template Driven Forms
  2. Reactive Forms

In Template Driven Forms, you create controls on the component template and bind data using ngModel. With these, you do not create controls, form objects, or write code to work with pushing and pulling of data between component class and template; Angular does all of these tasks for you. In template driven forms, there is very little code for validations in the component class, and they’re asynchronous.

In Reactive Forms, you create form controls as trees of objects in the component class and bind them to the native form controls in the template. All validations and the creation of form controls are written in the component class. In Reactive Forms, all validations and changes in the state of native forms are synchronous, so you can write code in the component class to observe them.  You should choose to create reactive forms when the data model is immutable and usually mapped to a database.

The major difference between these two approaches of creating forms? In reactive forms you do not use directives such as ngModel, required, etc. You create all controls and their validations in the component class. Reactive forms are easy to test and maintain, so in this post we will learn to create a basic Reactive Form, using FormControl, FormGroup, FormBuilder class, and adding validations.

Step 1: Add Reactive Forms Module

To start working with reactive forms, first add ReactiveFormsModle in the App Module as shown in the next listing:

Step 2: Import required module in Component

Next, you need to import the required Reactive forms classes such as FormGroup, FormControl, FormArray in the components class. We will use these classes to construct our reactive form.  After importing these classes, the component class should look like the listing below:

Your component class can be different from the AppComponent created above depending on your implementation; however, here we have imported FormGroup, FormControl, and FormArray classes. Let’s learn about these classes one by one:

Step 3: Using the FormControl class

The FormControl class corresponds to one individual form control, tracking its value and validity. While creating your reactive form, you will create an object of the FormControl class. The FormControl constructor takes three parameters:

  1. Initial data value, which can be null.
  2. Array of synchronous validators. This is an optional parameter.
  3. Array of asynchronous validators. This is an optional parameter.

In the component class, you can create a FormControl as shown in the listing below:

We are not passing any optional parameters like sync validations or async validations, but we will explore these parameters while adding validation to a FormControl.

On the View, you can use email FormControl as shown below:

As you see, we are using property binding to bind the formControl email to the input element on the view.

Read full article on the Infragistics blog