How to deploy an Angular application to GitHub

In this article, we will follow a step-by-step approach to deploy an Angular application to a GitHub. We will create a project using Angular CLI  and then deploy that to GitHub. Let us get started.

Step 1

To create a project using Angular CLI. Run the command:

ng new demo

You need to make sure that Angular CLI is installed globally on your machine.

Step 2

Change directory to demo and open project in VS Code or any other IDE of your choice.  Modify AppComponent to add, subtract, multiply, and divide two numbers as shown in the below listing:

As you can see, that AppComponent is very simple and it contains code to perform basic calculator operations.

Next, modify the AppComponent template

 

Like the component class template, it is also very simple. It uses:

  • ngModel for two way data binding between input controls and properties
  • event binding to call a function on click of the button
  • interpolation to display the result

Step 3

Before we publish this application to GitHub, let us run it locally. To run it locally, run the command

ng serve

Your application should run on default port 4200 of localhost as shown in the image below:

 

Continue reading full articles on the Infragistics blog

How to do Conditional Validation on valueChanges method in Angular Reactive Forms

Read full article on the Infragistics blog

In this blog post, we will learn to use Angular Reactive Forms value change detection and enable conditional validation on basis of that.

Learn How to Create Your First Angular Reactive Form here

Let us say you have a Reactive Form created using FormBuilder class as shown below:

You have created loginForm, which has three controls: email, password, and phonenumber. Here, you are using FormBuilder to create a reactive form. On the component template, you can attach loginForm as shown in the code listing below. Using property binding, the formGroup property of the HTML form element is set to loginForm and the formControlName value of these controls are set to the individual FormControl property of FormBuilder.

We have also put error messages for email and phone number fields. Besides, that submit button would only be enabled when the form is valid.  Form submit is handled as shown in the listing below:

If the form is valid in browser console, you will get the output as below:

In addition, if there is an error, submit button would be disabled and an error message will be shown as below:

You can learn to create Custom Validators for Angular Reactive Forms here

Now assume a scenario that you have a radio button to send a notification. The user should able to select the send notification option, and on basis of that, certain FormControl will have some validation.

Consider the form below,

We have added a Send Notification option. If the user selects Phone to send notification then Phone Number field should be required, otherwise, it should not be. To achieve this we need to perform following tasks,

  1. Listening to changes
  2. Put conditional validation

To start with, let us modify our form to handle the notification. So now form has a notification FormControl with the default value set to null as shown in the listing below :

On the Reactive form template, we will add radio button group to handle Send Notification option.

Continue Reading full article on the Infragistics blog here

Simplifying ViewChild and ContentChild in Angular

Read full article on the Infragistics blog

In this blog post, we will learn about ViewChild and ContentChild in Angular.

Essentially ViewChild and ContentChild are used for component communication in Angular. Therefore, if a parent component wants access of child component then it uses ViewChild or ContentChild.

Any component, directive, or element which is part of a template is ViewChild and any component or element which is projected in the template is ContentChild.

ViewChild and ViewChildren

If you want to access following inside the Parent Component, use @ViewChild decorator of Angular.

  1. Child Component
  2. Directive
  3. DOM Element

ViewChild returns the first element that matches the selector.

Let us assume that we have a component MessageComponent as shown in the below listing:

We are using MessageComponent inside AppComponent as shown in below listing:

In application, you will get the output as below:

Here, MessageComponent has become child of AppComponent. Therefore, we can access it as a ViewChild. Definition of ViewChild is:

“The Child Element which is located inside the component template”,

Here MessageComponent is located inside template of AppComponent, so it can be accessed as ViewChild.

We need to do following tasks:

  • Import ViewChild and AfterViewInit from @angular/core
  • Implement AfterViewInit life cycle hook to component class
  • Create a variable with decorator @ViewChild
  • Access that inside ngAfterViewInit life cycle hook

In the output console you will find reference of MessageComponent, also if you can notice that __proto__ of MessageComponnet is set to Object.

Continue reading on the Infragistics blog

How to dynamically create a Component in Angular

You can read full article on the Infragistics blog

In this article, we will learn to create a component dynamically. You may need to load a component dynamically in various scenarios such as want to show a popup modal etc.

Let us assume that, we have a component as listed below, which we will load dynamically.

To load MessageComponent dynamically you need a container. Let us say that we want to load MessageComponent inside AppComponent. We need a container element in the AppComponent.

Template of AppComponent is as below:

As you see that, we have an entry point template or a container template in which we will load MessageComponent dynamically.

In the AppComponent, we need to import following:

  1. ViewChild, ViewContainerRef, and ComponentFactoryResolver from @angular/core
  2. ComponentRef and ComponentFactory from @angular/core
  3. MessageComponent from message.component

After importing required things, AppComponnet will look like following listing:

We can access template as the ViewChild inside the Component class. Template is a container in which, we want to load the component dynamically. Therefore, we have to access temple as ViewConatinerRef.

ViewContainerRef represents container where one or more view can be attached. This can contain two types of views.

  1. Host Views
  2. Embedded Views

Host Views are created by instantiating a component using createComponent and Embedded Views are created by instantiating an Embedded Template using createEmbeddedView. We will use Host Views to dynamically load MessageComponent.

Let us create a variable called entry which will refer template element. In addition, we have injected ComponentFactoryResolver services to component class, which will be needed to dynamically load the component.

Keep in mind that entry variable which is reference of template element has API to create components, destroy components etc.

Now to create component, let us create a function. Inside the function, we need to perform following tasks,

  • Clear the container
  • Create a factory for MessageComponent
  • Create component using the factory
  • Pass value for @Input properties using component reference instance method

Putting everything, together createComponent function will look like listing below:

We can call createComponent function on click event of the button.

You can keep reading full article on the Infragistics blog

Step by Step creating Custom Pipe in Angular

Read full article on the Infragistics blog

Angular pipes take data as input and transform it to your desired output. For example, using interpolation you are displaying name of the product. Now you want the product name always displayed in the uppercase. You can do this using Angular pipe uppercase.

In above component, productName will be displayed in uppercase. Therefore, pipe takes an input and transforms it into desired output as shown below:

Angular library provides us many built-in pipes like

  • UpperCasePipe
  • LowerCasePipe
  • CurrencyPipe
  • PercentPipe
  • DatePipe etc.

Let us see how we could use the built-in currency pipe.

You can also pass parameters to a pipe using the colon. You can pass input to currency pipe as shown below:

Even though Angular provides many default pipes, there could be requirements when you create custom pipes. Creating a custom pipe is very as simple as creating a function.  Let us say that we want to create a pipe, which will capitalize first letter of each words in a string.

Consider below component,

This component will print names as below:

Now we want to capitalize the first letter of each word in the name. To do that we need to write a custom pipe.  To create a pipe, you need to follow these steps:

Read full article on the Infragistics blog