Introduction

In this article, we will see how we can publish one of our GitHub repository as a GitHub page. We will be discussing the problems I have faced while doing so, with screenshots. If you are ready, let’s just go ahead and create the page.

Background

I am sure that there are many related articles available on internet, but some of them are only explaining the steps to achieve this, but not the problems faced, so I thought I could write about the problems I faced while creating a page for my GitHub repository.

Prerequisites

1. A User/Organization GitHub account
2. An Angular repository

Publish GitHub Page

Selecting the repository

In this phase, you can select any Angular repository you have in your profile. I am going to select my repository Azure-AI-Image-Text-Reader.

Creating the GitHub page

Now let’s build our repository. Please make sure to change the base href property of your index.html file. Usually the value of the base href is “/”, now we are going to change the same with the argument
–base-href in our build command.

ng build --prod --base-href "https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/"

I am already using GitHub page for my user account and I have also enabled the custom domain for the same, that is the reason why I had given the custom URL in the base href. In your case, you should provide the URL as https://<username>.github.io/<repositoryName>/

Please do not remove the slash (/) at the last of the URL and also remember that the repository name is case sensitive.

Case sensitive repository URL

The above command will create a new folder if you are using angular cli 6 or the above, the folder name will be the project name specified in the angular.json file.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "azure-ai-image-text-reader": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
}

With the help of the npm package angular-cli-ghpages, we can easily upload the build contents to our repository.

npm i angular-cli-ghpages --save-dev

And then use the command below.

npx ngh --dir=dist/Azure-AI-Image-Text-Reader

If you are not sure about the difference between npm and npx, I recommend you to read my article here.

Here the –dir property is used to specify the folder where the build contents are generated. Please be noted that by default the directory name is dist, so if your angular cli version is below 6, you don’t need to specify the folder name.

If you are getting an error as preceding, while you run the ngh command, please make sure that you had installed the package

PS C:\Users\SibeeshVenu\source\repos\Azure-AI-Image-Text-Reader> npx ngh --dir='dist/azure-ai-image-text-reader' --branch=page
npx: installed 87 in 8.588s
Path must be a string. Received undefined
(node:16984) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

Once the task is done, we can go to our repository settings and activate the GitHub page for our repository. Click on the settings and go to the section GitHub Pages.

Now you can go to the page URL and check whether you angular application is loading correctly or not. In my case, I can go to the URL
https://sibeeshvenu.github.io/Azure-AI-Image-Text-Reader/ or
https://sibeeshvenu.com/Azure-AI-Image-Text-Reader/

Conclusion

Wow!. Now we have learned, how we can publish a GitHub page of our GitHub repository. We have also covered possible small mistakes and the remedies for the same.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu

Introduction

The Microsoft Azure has a lot to offer when it comes to Cognitive Services, trying out them is really fun. Here in this article, we are going to see how we can detect and read texts from an image and show it in the display using the Cognitive Service Computer Vision AI. The service Computer Vision has it’s own machine language running which helps us to do our task in an easy and effective manner. It uses the technology Optical Character Recognition and extracts the words or text to a readable format. All we have to do is, using the service and write some custom codes as per our requirement. Sounds good? If yes, let’s just skip the introduction and jump on to the real fun.

Background

I love quotes, and I strongly believe that a single quote can do an impact in your life sometimes. One of my hobbies is collecting the images which contain quotes in it. Now, with the help of Azure Computer Vision cognitive service, I thought of creating an application which can get the quotes from the image and save it. You can easily think of many other usages of this service, below are some of them.

1. Using the translator, which scan the image, read the text and translate
2. Document creation from the images, which will be useful to save hours
3. A Google Glass, which capture what you see and translate the content to your native language
4. A digital medical prescription from the actual one

Imagine that you need to create a solution which can save all of your medical prescription contents in a table in a database, so that you can easily sort/filter and show them in a UI. You can even create a mobile application to do that. The possibilities are countless. Now let’s build one of them.

Prerequisites

Before we start, we should have the following things in our hand.

1. A valid Azure Subscription
2. A good Code editor, I prefer VSCode or Visual Studio

Source Code

The source code be downloaded from here.

Let Us Start

As I mentioned earlier, we will be using an Azure service to build our application. Azure is a cloud computing service created by Microsoft, for the last few years there are significant growth in Azure. The services provided in Azure can be found here.

Create the Computer Vision Resource in Azure

To create the Azure resource, login to the Azure portal and click on the +Create a resource menu. Once the window loads, you can search for the resource Computer Vision as shown in the preceding image.

Now, click on the create button and fill the form.

It may take a few minutes to finish the development of the resource. Once it is finished, we can go to the resource and get our keys from the Keys section under Resource Management. Save those keys somewhere as we need them while we create our applications.

Develop the Angular Client Application

Here, we will be creating an Angular application with the help of Angular CLI and to create the application we are going to use the command ng new Azure-AI-Image-Text-Reader where the last parameter is our application name. You should also be given a chance to select your CSS and routing option. Please be noted that you can add them later as well.

Once the application is ready, we can create our own Angular service.

detection.service.ts

To create the service, let’s use the preceding command.

Here the name ‘detection’ is our service name. Now we can edit the service code as preceding.

As you can see that we are creating an HttpClient call to our baseUrl which is been configured in our config.ts file. To call the Computer Vision AI service, it is mandatory to pass the subscription key, the one we have created in the Azure portal, to the request by using the header Ocp-Apim-Subscription-Key.

config.ts

Please remember to change the baseUrl and apiKey before you run the application.

home.component.ts

As our service is ready, let’s create our component now using the command below.

Once the component is created, let’s go to the file home.component.ts and edit our code.

Once the component is loaded in the screen, the user will be able to type or paste the URL of an image and submit the same. Before submitting the request, we are validating the input using the FormControl, we are using the required validator and pattern validator which uses to find whether the given url is valid or not. Once the request is been made we are calling our detection service with a post request and once we get the result from the Azure service, we are looping through the result and formatting the data accordingly.

home.component.html

As we have our component logic ready in hand, now it is time to edit our component template. Let’s edit our home.component.html file as follows.

We use Angular Material design to develop our Angular application, the material component mat-card is a card component which can act as a container, apart from the mat-card we are using the components mat-form-field, matInput, mat-error, mat-card-image in our home component. You can use the command npm install –save @angular/material @angular/cdk @angular/animations to install the material in your application.

Once the component loads, we are giving an option to submit a valid image URL, if the URL provided is not valid, we are disabling the submit button. Once the user submit the request, then we are calling our detection service. Sounds good?

Output

Below are the screen print of our application.

Now we can test this application by giving the URL of the below image.

Once you submit the URL, you should be able to see an output as below.

Demo

The application demo can be viewed here.

Conclusion

Wow!. Now we have learned, what is Azure Computer Vision AI and how to create Azure Computer Vision Cognitive Service. We also learned to create an Angular application which reads the text from images. I hope you found this article useful. I can’t wait to see what you are going to build with Azure Computer Vision AI. You can also check out the other options we have in Microsoft Azure Computer Vision AI here, I am sure you will love playing with it.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu

Introduction

I understand that there are many article on the same topic. But most of the solutions didn’t work for me with the latest pipeline configuration, so, I thought of writing this article. Here, we are going to set up our Build and Release pipeline configuration of our Angular application very easy, in fact, by following some basic tasks. We will be using Azure DevOps FTP pipeline service connection for the configuration. Let’s stop the introduction and jump in to the configuration.

Background

I was trying to deploy my Angular application to Azure, for that I wanted to set up my build and release pipelines. I had followed some tutorials which are available already, but I was facing some issues with the same. Later, I had decided to use the Azure FTP Upload Release Task. So, basically, we will be having only one task in our Release pipeline.

Set Up the Pipelines

As I was mentioning, here, we are going to configure our Build and Release configuration.

Build Pipeline

Here we are going to configure the Azure DevOps build pipeline. But, before, we need to define our script in the package.json file.

If you have different routes, and if you need to access them directly in the URL of the browser, you should consider adding a web.config file in your src folder.

Once that is done, add it as an asset in the angular.json file.

Now, go to your Azure DevOps site, and click on Pipelines and then Builds. Click on the plus icon.

Pipeline

Click on the Pipeline section. Here you can mention your pipeline name and the Agent pool, please remember to select the Agent pool as Hosted VS2017, or else you may end up seeing an error as “Npm failed with return code: 1 2019-01-07T10:14:37.3309955Z ##[section]Finishing: npm build“.

Phase 1

I recommend you to leave this as it is, you can change the display name though.

npm install

Click on the + icon in the Phase section and search for “npm” and click add. Now we can configure this task.

You can also click on the ribbon View YAML, to see the yml version of the task.

npm build

In this step, we will add a new npm task and configure it for our build script.

Please be noted that the command is custom and we have given the script which we have already set in our package.json file, which is prod-build-dev.

Publish Artifact

Here, in this step, we will publish our artifacts generated. This is very important, otherwise, the release configuration will not be able to find your package.json file in the directory. Add a new task called “Publish Build Artifacts” and configure the same as mentioned in the image below.

Enable the Continuous Integration

As we have set up the Tasks, now it is time to set up the continuous integration. Click on the Triggers section and check the Enable continuous integration.

Debugging the Build

If you ever need to debug the build pipeline, you can enable the same in the Variable section. Just making the system.debug value to true will do the trick.

Run the Build

Once you are done everything, you can click on the Save & Queue button to initiate the build. Our Agent will run now, the tasks will be executed, as we have enabled the debug property to true in the Variables, we can now see the detailed logs in the console. The following tasks will be happening.

Release Pipeline

Wow, we have successfully created our build pipeline, now it is time to create a Release pipeline. As I mentioned earlier, we are going to have only one Task in our Release pipeline, which is nothing but “FTP Upload”. Click on the Pipelines and then Releases, click on the +New icon to create a new Release pipeline.

Select the Artifacts

Here, in this step, we should select the Artifacts generated in the build.

Select the Stage

Click on the Stages and add one.

Adding a FTP Service Connection

Before we add a new FTP Upload task, we need to create a new FTP service connection in our Azure DevOps site. Click on the Project Settings on the bottom left corner, go to the Pipelines section, and then click on the Service connections. Now click on the + New service connection, in the pop up you need to provide the details which you can get from the Publish profile of your Azure Web App (Click on the Get Publish Profile in your Web App resource, overview section in the Azure portal).

Add the FTP Upload Task

Now it is time to add the FTP Upload Task. Click on the + icon in the Agent Job Task and add the task FTP Upload.

Here the remote directory is the folder where our application files are going to be, you should be able to see those files if you just log in to the explorer using your FTP details from your app publish profile.

Create a Release

Now, it is time to create a Release, click on the + Release button and then + Create a release. In the upcoming window, you should be able to see the pipeline and the Artifacts selected. Just click on the Create button. The Agent will be started in a few seconds, once it is ready, it will execute the tasks. Please be noted that the FTP Upload task will remove the content from the directory first and then upload the new one.

Change the App Service Virtual Path

As we have given a custom folder in the Release configuration, we should also change the Virtual Path of the Azure App service. To do so, go to your Azure App Service and then select Virtual Path under Application Settings. Set the Virtual Path as “/” and Virtual Path as “site\wwwroot\wwwroot\yourappname(the folder name inside dist folder)” and the type as “Application”.

Once you are done, you can see your Angular application running.

Conclusion

Wow!. Now we have learned,

• How to set up the Azure DevOps Build Pipeline configuration
• How to set up the Azure DevOps Release Pipeline configuration
• How to create new FTP Service Connection in Azure DevOps
• How to configure Azure Web App

You can always read my articles related to Azure here.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu

Introduction

Wow, you are going to create your own package? Either a private one or a public one? You were looking for a documentation on how to create your own package in NPM, and you ended up landing here? No, worries, in this post I will help you with that. At the end of this article, you will get to know how can you create your own package in the NPM registry. Enough talking, let’s jump into the coding. I hope you will find this post useful.

Source Code

The source code can be found here.

Background

Sometimes creating your own packages will be essential especially when you work with some big companies/clients where they can reuse their components/packages. Doesn’t it really make sense? As a developer, it is our job to give that option to our client. In this article, I will be creating

• an Angular application
• the build and publish the angular application to the NPM registry
• another application, where we can use the NPM package which we have created

Before you start with, please make sure that you have an account in npmjs, so that you can publish your package there. You can always have a private space in NPM registry, but you must pay for that service, hence in this article, I will walk you through how we can publish your packages to publically, however the steps are going to be same for Private as well.

Creating your Angular application

The first thing we are going to do is to create an application and I will name this org-npm-package.

Installing Angular CLI

Yes, as you guessed, we are using Angular CLI. If you haven’t installed Angular CLI, I recommend you to install the same. It is a great CLI tool for Angular, I am sure you will love that. You can do that by running the below command.

npm install -g @angular/cli

Once we set up this project we will be using the Angular CLI commands and you can check Angular CLI documentation for understanding the things you can do with the CLI.

Generating a new project

Now it is time to generate our new project. We can use the below command for the same.

ng new org-npm-package

And you will be able to see all the hard work this CLI is doing for us. Now that we have created our application, let’s run our application and see if it is working or not.

ng serve --open (if you need to open the browser by the app)
ng serve (if you want to manually open the browser).
You can always use 'ng s' as well

The command will build your application and run it in the browser.

As we develop we will be using the Angular material for the design and we can install it now itself along with the animation and cdk. With the Angular 6+ versions you can also do this by following the below command.

ng add @angular/material

Generate menu module and ng-private-menu component

Now we have an application to work with and let’s create a module called Menu and a component ng-private-menu now.

ng g m modules/menu
ng g c modules/ng-private-menu

The above command will generate all the files you need to work with. I am going to edit only the HTML of the ng-private-menu component for myself and not going to add any logic. You can add anything you wish.

<div>
  <button mat-button [matMenuTriggerFor]="animals">Animal index</button>

  <mat-menu #animals="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
    <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
  </mat-menu>

  <mat-menu #vertebrates="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
    <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
    <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
    <button mat-menu-item>Birds</button>
    <button mat-menu-item>Mammals</button>
  </mat-menu>

  <mat-menu #invertebrates="matMenu">
    <button mat-menu-item>Insects</button>
    <button mat-menu-item>Molluscs</button>
    <button mat-menu-item>Crustaceans</button>
    <button mat-menu-item>Corals</button>
    <button mat-menu-item>Arachnids</button>
    <button mat-menu-item>Velvet worms</button>
    <button mat-menu-item>Horseshoe crabs</button>
  </mat-menu>

  <mat-menu #fish="matMenu">
    <button mat-menu-item>Baikal oilfish</button>
    <button mat-menu-item>Bala shark</button>
    <button mat-menu-item>Ballan wrasse</button>
    <button mat-menu-item>Bamboo shark</button>
    <button mat-menu-item>Banded killifish</button>
  </mat-menu>

  <mat-menu #amphibians="matMenu">
    <button mat-menu-item>Sonoran desert toad</button>
    <button mat-menu-item>Western toad</button>
    <button mat-menu-item>Arroyo toad</button>
    <button mat-menu-item>Yosemite toad</button>
  </mat-menu>

  <mat-menu #reptiles="matMenu">
    <button mat-menu-item>Banded Day Gecko</button>
    <button mat-menu-item>Banded Gila Monster</button>
    <button mat-menu-item>Black Tree Monitor</button>
    <button mat-menu-item>Blue Spiny Lizard</button>
    <button mat-menu-item disabled>Velociraptor</button>
  </mat-menu>
</div>

Once you have added that HTML, you should import some modules to your menu.module.ts file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgPrivateMenuComponent } from '../ng-private-menu/ng-private-menu.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule, MatButtonModule } from '@angular/material';


@NgModule({
  declarations: [
    NgPrivateMenuComponent
  ],
  imports: [
    BrowserAnimationsModule,
    CommonModule,
    MatMenuModule,
    MatButtonModule
  ],
  exports: [
    NgPrivateMenuComponent
  ]
})
export class MenuModule { }

Set up app.module.ts

Now it is time to set our App Module. Every Angular app will be having at least one NgModule class AppModuleresides in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuModule } from './modules/menu/menu.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run your application

Once you have done everything, you will be able to run “ng serve” and see your application working in the browser.

Angular application output

Creating the NPM package

Whenever we do something, it is always a good idea to check whether something is already there or not, to help our development easier. That’s the advantage of using NPM public registry, we can always search for public repositories or packages which will definitely help in our development process. We have such packages in this case as well, so we are going to use the package called “ng-packagr”.

According to the package documentation, the packagr is a tool which transpile your libraries to Angular package format. It is a great package which does its job very well. I would like to give a huge round of applause to the developers/collaborators of that package. Please feel free to see the documentation of that package. You can install the same by running the command below.

npm i ng-packagr

Setting up the package.json

The first thing we are going to do is, to set the package.json as per the requirement of the packagr. Please add the preceding code to your package.json file.

"$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "@sibeeshpassion/org-npm-package",
  "version": "2.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "packagr": "ng-packagr -p package.json"
  },
  "ngPackage": {
    "lib": {
      "entryFile": "public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
      "@angular/animations",
      "@angular/cdk",
      "@angular/common",
      "@angular/compiler",
      "@angular/forms",
      "@angular/core",
      "@angular/http",
      "@angular/material",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router",
      "core-js",
      "rxjs",
      "tsickle",
      "zone.js"
    ]
  }

The $schema is for making the editing easier and it will add the JSON editing support, especially if you are using the IDE VSCode.

The name is the name of your package. And it is a scoped name here. Did you notice that I have used @ before the SibeeshPassion? A scoped name should be started with @ and should be followed by a slash (/). It is a way of grouping all of your packages together in a common place. Doesn’t it make sense to have all of your company packages under your company name? It has some other benefits as well.

1. You can get unique names for your package, as you will be the only one who can add a package to that group
2. To install such packages, you need to use @your-org-name/your-package-name

You can always read more on the same topic here.

The script packagr is a custom script so that you can just run “npm run packagr” and everything else will be done in the background.

The ngPackage is the main settings for the packagr package, as it sets the entry point for our packaging. The file public_api.ts should be placed with the same directory of the package.json file. In our case, the public_api.ts contents will be as below.

export * from './src/app/modules/menu/menu.module';

We are exporting from our module menu.module.

Distributing npm packages with 'dependencies' is not recommended. Please consider adding @angular/animations to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency @angular/animations must be explicitly whitelisted.

Run the commands and generate the dist

As we have already configured our package.json file, now we can go and run the commands. Are you ready? The first thing we are going to run is “npm run packagr”. It will do the following things for you.

• Building Angular Package
• Building entry point ‘@sibeeshpassion/org-npm-package’
• Compiling TypeScript sources through ngc
• Bundling to FESM2015
• Bundling to FESM5
• Bundling to UMD
• Minifying UMD bundle
• Copying declaration files
• Writing package metadata

From the image below, you can understand that it is creating a folder called dist.

npm run packagr

If you just look at the dist folder you can see that all the packaging work has been done.

dist folder after packaging

Publishing your package to NPM registry

As our package is ready, we can go ahead and start publishing our package to the NPM registry.

npm publish dist

When you run the above command, if you haven’t signed up for private packages, you will get an error as below.

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @sibeeshpassion/org-npm-package

Let’s just publish this package publically now, so that I don’t want to pay anything. Before you do that, go to your package.json file and change the name from “name”: “@sibeeshpassion/org-npm-package” to “name”: “org-npm-package”. Run “npm run packagr” again. It will update your dist folder with the new files. The contents of the dist folder will be a little than the one we had for our organization.

dist folder after packaging publically

Let’s just run “npm publish dist” again, this time we should not see any errors. Please be noted that you should run “npm login” before you run npm publish command.

npm publish dist

Now if you look at your NPM registry you should be able to see your package.

Using the package in another solution

Wow!, we have successfully created an Angular NPM package, now we can easily use the same in our other applications. Let’s just create another application.

ng new use-org-npm-package

Once the application is been created, let’s just install the new package we have created.

npm i org-npm-package

Now, we can add our MenuModule to the new application’s app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MenuModule } from 'org-npm-package';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The only thing pending now is, to use the app-ng-private-menu in your app.component.html.

<app-ng-private-menu></app-ng-private-menu>

Output

Let’s just run our new application and see everything is working as expected.

my own npm package

Conclusion

Congratulation, you have created and used your own NPM package. In this article, we have learned how to,

1. Create an angular 7 application
2. Create a Private NPM package
3. Create a Public NPM package
4. Publish a package to NPM registry
5. Use the created package in another solution

We will make this package to accept the properties while using the same so that we can easily pass the menu items from the application where this package is being consumed. Isn’t that the way to make a package reusable? Please feel free to play with this GitHub repository. Please do share me your findings while you work on the same. I really appreciate that, thanks in advance.

Your turn. What do you think?

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu

Introduction

As you all know that Angular 7 is out with some cool new features. I really appreciate that you wanted to experience the brand new Angular. Here in this post, I am going to explain a bit about one of the Angular 7 feature, which is Drag and Drops. At the end of this article, you will have an application which fetches the real data from the database and binds it to the UI and then performs multi-directional drag and drops. Enough talking, let’s jump into the setup. I hope you will find this post useful.

Source Code

The source code can be found here.

Background

As Angular 7 is out last week, I wanted to try a few things with the same and that is the cause for this article. If you are really new to Angular, and if you need to try some other things, visiting my articles on the same topic wouldn’t be a bad idea.

Creating ngDragDrop app

The first thing we are going to do is to create a dummy application.

Installing Angular CLI

Yes, as you guessed, we are using Angular CLI. If you haven’t installed Angular CLI, I recommend you to install the same. It is a great CLI tool for Angular, I am sure you will love that. You can do that by running the below command.

npm install -g @angular/cli

Once we set up this project we will be using the Angular CLI commands and you can see here for understanding the things you can do with the CLI.

Generating a new project

Now it is time to generate our new project. We can use the below command for the same.

ng new ngDragDrop

And you will be able to see all the hard work this CLI is doing for us. Now that we have created our application, let’s run our application and see if it is working or not.

ng serve --open (if you need to open the browser by the app)
ng serve (if you want to manually open the browser).
You can always use 'ng s' as well

The command will build your application and run it in the browser.

As we develop we will be using the Angular material for the design and we can install it now itself along with the animation and cdk. With the Angular 6+ versions you can also do this by following the below command.

ng add @angular/material

Generate and set up header component

Now we have an application to work with and let’s create a header component now.

ng g c header

The above command will generate all the files you need to work with and it will also add this component to the app.module.ts. I am going to edit only the HTML of the header component for myself and not going to add any logic. You can add anything you wish.

<div style="text-align:center">
  <h1>
    Welcome to ngDragDropg at <a href="https://sibeeshpassion.com">Sibeesh Passion</a>
  </h1>
</div>

Set up footer component

Create the footer component by running the below command.

ng g c footer

And you can edit or style them as you wish.

<p>
  Copyright @SibeeshPassion 2018 - 2019 :)
</p>

Set up app-routing.module.ts

We are going to create a route only for home.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Set up router outlet in app.component.html

Now we have a route and it is time to set up the outlet.

<app-header></app-header>
<router-outlet>
</router-outlet>
<app-footer></app-footer>

Set up app.module.ts

Every Angular app will be having at least one NgModule class AppModuleresides in app.module.ts. You can always learn about the Angular architecture here.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule } from '@angular/material';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { MovieComponent } from './movie/movie.component';
import { MovieService } from './movie.service';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    MovieComponent
  ],
  exports: [
    HttpModule,
    BrowserModule,
    AppRoutingModule,
    DragDropModule,
    MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule, BrowserAnimationsModule
  ],
  imports: [
    HttpModule,
    BrowserModule,
    AppRoutingModule,
    DragDropModule,
    MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule, BrowserAnimationsModule
  ],
  providers: [MovieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Do you see a DragDropModule there? You should import it to use the drag and drop feature and it resides in the @angular/cdk/drag-drop. As you might have already noticed, we have added one service called MovieService in the providers array. We will create one now.

Creating a movie service

import { Injectable } from '@angular/core';
import { RequestMethod, RequestOptions, Request, Http } from '@angular/http';
import { config } from './config';

@Injectable({
  providedIn: 'root'
})
export class MovieService {
  constructor(private http: Http) {
  }

  async get(url: string) {
    return await this.request(url, RequestMethod.Get);
  }

  async request(url: string, method: RequestMethod) {
    const requestOptions = new RequestOptions({
      method: method,
      url: `${config.api.baseUrl}${url}${config.api.apiKey}`
    });

    const request = new Request(requestOptions);
    return await this.http.request(request).toPromise();
  }
}

As you can see I haven’t done much with the service class and didn’t implement the error mechanism and other things as I wanted to make this as short as possible. This service will fetch the movies from an online database TMDB and here in this article and repository, I am using mine. I strongly recommend you to create your own instead of using the one mentioned here. Can we set up the config file now?

Set up config.ts

A configuration file is a way to arrange things in handy and you must implement in all the projects you are working with.

const config = {
    api: {
        baseUrl: 'https://api.themoviedb.org/3/movie/',
        apiKey: '&api_key=c412c072676d278f83c9198a32613b0d',
        topRated: 'top_rated?language=en-US&page=1'
    }
};
export { config };

Creating a movie component

Let’s create a new component now to load the movie into it. Basically, we will be using this movie component inside the cdkDropList div. Our movie component will be having the HTML as below.

<mat-card>
  <img mat-card-image src="https://image.tmdb.org/t/p/w185_and_h278_bestv2/{{movie?.poster_path}}" >
</mat-card>

I just made it as simple as is. But if future we can add a few more properties for the movie component and show them here. The typescript file will be having one property with @Input decorator so that we can input the values to it from the home component.

import { Component, OnInit, Input } from '@angular/core';
import { Movie } from '../models/movie';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
  @Input()
  movie: Movie;
  
  constructor() { 
  }

  ngOnInit() {
  }

}

Below is my model movie.

export class Movie {
    poster_path: string;
}

As I said, it has only one property now, will add a few later.

Set up home component

Now here is the main part, the place where we render our movies and perform drag and drop. I will be having a parent container as<div style="display: flex;"> so that the inner divs will be arranged horizontally. And I will be having two inner containers, one is to show all the movies and another one is to show the movies I am going to watch. I can just drag the movie from the left container to right and vice versa. Let’s design the HTML now. Below is all the movie collection.

<div cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]" (cdkDropListDropped)="drop($event)">
    <app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
</div>

As you can see that there are a few new properties I am assigning to both the app-movie and app-movie container.

<div cdkDropList #towatch="cdkDropList" [cdkDropListData]="moviesToWatch" [cdkDropListConnectedTo]="[allmovies]" (cdkDropListDropped)="drop($event)">
    <app-movie *ngFor="let movie of moviesToWatch" [movie]="movie" cdkDrag></app-movie>
</div>

<div style="display: flex;">
  <div class="container">
    <div class="row">
      <h2 style="text-align: center">Movies</h2>
      <div  cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]"
        (cdkDropListDropped)="drop($event)">
        <app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <h2 style="text-align: center">Movies to watch</h2>
      <div cdkDropList #towatch="cdkDropList" [cdkDropListData]="moviesToWatch" [cdkDropListConnectedTo]="[allmovies]"
        (cdkDropListDropped)="drop($event)">
        <app-movie *ngFor="let movie of moviesToWatch" [movie]="movie" cdkDrag></app-movie>
      </div>
    </div>
  </div>
</div>

import { Component } from '@angular/core';
import { MovieService } from '../movie.service';
import { Movie } from '../models/movie';
import { config } from '../config';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent {
  movies: Movie[];
  moviesToWatch: Movie[] = [{
    poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
  }];
  constructor(private movieService: MovieService) {
    this.getMovies();
  }
  private async getMovies() {
    const movies = await this.movieService.get(config.api.topRated);
    return this.formatDta(movies.json().results);
  }
  formatDta(_body: Movie[]): void {
    this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
  }
  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

private async getMovies() {
    const movies = await this.movieService.get(config.api.topRated);
    return this.formatDta(movies.json().results);
}

moviesToWatch: Movie[] = [{
    poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
  }];

formatDta(_body: Movie[]): void {
   this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
}

drop(event: CdkDragDrop<string[]>) {
   if (event.previousContainer === event.container) {
     moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
   } else {
     transferArrayItem(event.previousContainer.data,
       event.container.data,
       event.previousIndex,
       event.currentIndex);
   }
 }

import { Component } from '@angular/core';
import { MovieService } from '../movie.service';
import { Movie } from '../models/movie';
import { config } from '../config';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent {
  movies: Movie[];
  moviesToWatch: Movie[] = [{
    poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
  }];
  constructor(private movieService: MovieService) {
    this.getMovies();
  }
  private async getMovies() {
    const movies = await this.movieService.get(config.api.topRated);
    return this.formatDta(movies.json().results);
  }
  formatDta(_body: Movie[]): void {
    this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
  }
  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

Custom styling

I have applied some custom styles to some components, those are below.

home.component.scss

.container{
  border: 1px solid rgb(248, 144, 144);
  margin: 5%;
  overflow: auto;
  width: 40%;
  height: 500px;
}
app-movie{
  cursor: move;
  width: 50%;
  display: inline-flex;
}

movie.component.scss

mat-card{
    width: 70%;
    padding: 26px;
    margin: 5px;
    border: 1px solid;
}

Output

Once you have implemented all the steps, you will be having an application which uses Angular 7 Drag and Drop with actual server data. Now let us run the application and see it in action.

ngDragDrop Initial

ngDragDrop After Adding

ngDragDrop adding more

Conclusion

In this post, we have learned how to,

1. Create an angular 7 application
2. Work with Angular CLI
3. Generate a service in Angular
4. How to fetch data from the server using HttpModule
5. Generate components in Angular
6. Use Material design
7. Work with Angular 7 Drag and Drop feature with real server data

Please feel free to play with this GitHub repository. Please do share me your findings while you work on the same. I really appreciate that, thanks in advance.

Your turn. What do you think?

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? If yes, please like/share/clap for me.

Kindest Regards
Sibeesh Venu

Introduction

Yes!. Angular 7 is out with some cool new features. I really appreciate that you wanted to experience the brand new Angular. Here in this post, I am going to explain a bit about one of the Angular 7 feature, which is Virtual Scrolling. At the end of this article, you will have an application which fetches the real data from the database and binds it to the UI by using Virtual Scrolling feature. I am not sure about you, but I am super excited to develop a sample application with this feature. Enough talking, let’s jump into the setup. I hope you will find this pose useful.

Source Code

The source code can be found here.

Background

As Angular 7 is out last week, I wanted to try a few things with the same and that is the cause for this article. If you are really new to Angular, and if you need to try some other things, visiting my articles on the same topic wouldn’t be a bad idea.

Creating ngVirtualScrolling app

The first thing we are going to do is to create a dummy application.

Installing Angular CLI

Yes, as you guessed, we are using Angular CLI. If you haven’t installed Angular CLI, I recommend you to install the same. It is a great CLI tool for Angular, I am sure you will love that. You can do that by running the below command.

npm install -g @angular/cli

Once we set up this project we will be using the Angular CLI commands and you can see here for understanding the things you can do with the CLI.

Generating a new project

Now it is time to generate our new project. We can use the below command for the same.

ng new ngVirtualScrolling

And you will be able to see all the hard work this CLI is doing for us.

Generate ng project

Now that we have created our application, let’s run our application and see if it is working or not.

Build and open in browser

As we develop we will be using the Angular material for the design and we can install it now itself along with the animation and cdk.

install material, cdk, and animation

With the Angular 6+ versions you can also do this by following the below command.

ng add @angular/material

Generating components

Now our project is ready and we can start creating the components, again, CLI is going to do the work for us for free. If it is a freelance developer, how much would you pay him/her?

ng g c home

ng g c header

ng g c footer

Now we have three components to work with. So let’s begin.

Set up header component

I am going to edit only the HTML of the header component for myself and not going to add any logic. You can add anything you wish.

<div style="text-align:center">
  <h1>
    Welcome to ngVirtualScrolling at <a href="https://sibeeshpassion.com">Sibeesh Passion</a>
  </h1>
</div>

Set up footer component

<p>
  Copyright @SibeeshPassion 2018 - 2019 :)
</p>

Set up app-routing.module.ts

We are going to create a route only for home.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Set up router outlet in app.component.html

Now we have a route and it is time to set up the outlet.

<app-header></app-header>
<router-outlet>
</router-outlet>
<app-footer></app-footer>

Set up app.module.ts

Every Angular app will be having at least one NgModule class, the same is named as andAppModule resides in a file named app.module.ts. You can always learn about the Angular architecture here.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule} from '@angular/material';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { MovieComponent } from './movie/movie.component';
import { MovieService } from './movie.service';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    MovieComponent
  ],
  imports: [
    HttpModule,
    BrowserModule,
    AppRoutingModule,
    ScrollingModule,
    MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule, BrowserAnimationsModule
  ],
  exports: [
    HttpModule,
    BrowserModule,
    AppRoutingModule,
    ScrollingModule,
    MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule
  ],
  providers: [ MovieService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Do you see a ScrollingModule there? You should import it to use the virtual scrolling and it resides in the @angular/cdk/scrolling. As you might have already noticed, we have added one service called MovieService in the providers array. We will create one now.

Creating a movie service

import { Injectable } from '@angular/core';
import { RequestMethod, RequestOptions, Request, Http } from '@angular/http';
import { config } from './config';

@Injectable({
  providedIn: 'root'
})
export class MovieService {
  constructor(private http: Http) {
  }

  get(url: string) {
    return this.request(url, RequestMethod.Get)
  }

  request(url: string, method: RequestMethod): any {
    const requestOptions = new RequestOptions({
      method: method,
      url: `${config.api.baseUrl}${url}${config.api.apiKey}`
    });

    const request = new Request(requestOptions);
    return this.http.request(request);
  }
}

As you can see I haven’t done much with the service class and didn’t implement the error mechanism and other things as I wanted to make this as short as possible. This service will fetch the movies from an online database TMDB and here in this article and repository, I am using mine. I strongly recommend you to create your own instead of using mine. Can we set up the config file now?

Set up config.ts

A configuration file is a way to arrange things in handy and you must implement in all the projects you are working with.

const config = {
  api: {
        baseUrl: 'https://api.themoviedb.org/3/movie/',
        apiKey:'&api_key=c412c072676d278f83c9198a32613b0d',
        topRated:'top_rated?language=en-US&page=1'
    }
}
export { config };

Creating a movie component

Let’s create a new component now to load the movie into it. Basically, we will be using this movie component inside the cdkVirtualFor so that it will call this component each time and render it. Out movie component will be having the HTML as below.

<div class="container">
  <mat-card style="min-height: 500px;" class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{movie?.title}}</mat-card-title>
      <mat-card-subtitle>Release date: {{movie?.release_date}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/{{movie?.poster_path}}" alt="{{movie?.title}}">
    <mat-card-content>
      <p>
        {{movie?.overview}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

And the typescript file will be having one property with @Input decorator so that we can input the values to it from the home component.

import { Component, OnInit, Input } from '@angular/core';
import { Movie } from '../models/movie';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
  @Input()
  movie: Movie;
  
  constructor() { 
  }

  ngOnInit() {
  }

}

Set up home component

Now here is the main part, the place where the virtual scrolling is happening. Let’s design the HTML now.

<div class="container" style="text-align:center">
  <div class="row">
    <cdk-virtual-scroll-viewport itemSize="500" class="example-viewport">
      <app-movie *cdkVirtualFor="let movie of ds" [movie]="movie" class="example-item">{{movie || 'Loading...'}}</app-movie>
    </cdk-virtual-scroll-viewport>
  </div>
</div>

Here itemSize is a mandatory property and you can give any number as per how many data you want to load to the component. We are inputting the values to our app-movie component by using [movie]=”movie”.

Let’s see the typescript code now.

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { DataSource, CollectionViewer } from '@angular/cdk/collections';
import { BehaviorSubject, Subscription, Observable } from 'rxjs';
import { MovieService } from '../movie.service';
import { Movie } from '../models/movie';
import { config } from '../config';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class HomeComponent {
  constructor(private movieService: MovieService) {
  }
  ds = new MyDataSource(this.movieService);
}

export class MyDataSource extends DataSource<Movie | undefined> {
  private page = 1;
  private initialData: Movie[] = [
    {
      id: 19404,
      title: 'Dilwale Dulhania Le Jayenge',
      overview: 'Raj is a rich, carefree, happy-go-lucky second generation NRI. Simran is the daughter of Chaudhary Baldev Singh, who in spite of being an NRI is very strict about adherence to Indian values. Simran has left for India to be married to her childhood fiancé. Raj leaves for India with a mission at his hands, to claim his lady love under the noses of her whole family. Thus begins a saga.',
      poster_path: '\/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
    }
  ];
  private dataStream = new BehaviorSubject<(Movie | undefined)[]>(this.initialData)
  private subscription = new Subscription();

  constructor(private movieService: MovieService) {
    super();
  }

  connect(collectionViewer: CollectionViewer): Observable<(Movie | undefined)[]> {
    this.subscription.add(collectionViewer.viewChange.subscribe((range) => {
      console.log(range.start)
      console.log(range.end)
      this.movieService.get(config.api.topRated)
        .subscribe((data) => {
          this.formatDta(JSON.parse(data._body).results);
        });
    }));
    return this.dataStream;
  }

  disconnect(): void {
    this.subscription.unsubscribe();
  }

  formatDta(_body: Movie[]): void {
    this.dataStream.next(_body);
  }
}

I have a parent HomeComponent where I get the data from a class MyDataSource which extends DataSource<Movie | undefined>. This DataSource is an abstract class and residing in @angular/cdk/collections. As the MyDataSource class is extending from DataSource, we had to override two functions which are, connect() and disconnect(). According to the angular material documentation, The connect method will be called by the virtual scroll viewport to receive a stream that emits the data array that should be rendered. The viewport will call disconnect when the viewport is destroyed, which may be the right time to clean up any subscriptions that were registered during the connect process.

Inside the connect method, we are calling our own service to get the data.

this.movieService.get(config.api.topRated)
        .subscribe((data) => {
          this.formatDta(JSON.parse(data._body).results);
        });

Custom styling

I have applied some custom styles to some components, which you can see in the GitHub repository. Please copy those from there if you are creating the application from the scratch.

Output

Once you have implemented all the steps, you will be having an application which uses Angular 7 virtual scrolling with actual server data. Now let us run the application and see it in action.

Angular Virtual Scrolling Demo Start

Angular Virtual Scrolling Demo Middle

Conclusion

In this post, we have learned how to,

1. Create an angular 7 application
2. Work with Angular CLI
3. Generate components in Angular
4. Use Material design
5. Work with virtual scrolling in Angular 7

Please feel free to play with this GitHub repository. It may not be a perfect article on this topic, so please do share me your findings while you work on the same. I really appreciate that, thanks in advance.

Your turn. What do you think?

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? Please share me your valuable suggestions and feedback, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on Stack Overflow instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this article, we will learn how we can create an end to end tests (e2e) for our Angular application. We will be using an existing end-to-end testing framework, which is nothing but, Protractor. Protractor runs your tests against your application running in a real browser, in the same way, your user may perform the actions. I will be using an existing application which is available in my GitHub profile. The same can be available in the source code section. Please do share your feedback with me. I hope you will like this article. Let’s start coding.

Source Code

The source code can be found here. Please clone this repository before you start.

Importance of End to End Testing

Some of you might have already started writing an end to end testing for your application, and you may be knowing how important that is. Here in this section, I will list down the key benefits of an end to end testing.

• End to end testing tests the complete flow or the action. For example, a complete login process can be treated as one end to end testing. Basically, it tests a specific functionality.
• It doesn’t improve the code quality as does in Unit testing. Unit testing is a different topic, and an end to end testing and unit testing are completely different.
• As I said earlier, an end to end testing run tests on the browser, so it tests your application live, with some real data.
• You can easily find out if any functionalities are broken because of your recent changes or implementation

Basic overview

If you have already cloned the application, you should be able to see a folder e2e in your application code, open that folder. You can see 3 files as below.

• tsconfig.e2e.json
• app.po.ts
• app.e2e-spec.ts

Here tsconfig.e2e.json is the configuration file, if you open that file, you can see that the file is been extended from tsconfig.json. 

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

app.po.ts is the page object, this is really helpful and important. Here is the place, where we will write the codes to find out the elements on our page or view. So, in future, if you are changing the selectors of your element, your changes will impact only in this file, so that you don’t need to change anything in your tests. Isn’t that handy? By default, this file will have the codes as below.

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}

As you can see, on the first line, we are importing browser, by, an element from protractor.

1. browser, is for interacting with the browser
2. by, is for finding the element by CSS or any other function
3. element, is for converting the selected element

Here in this line, element(by.css(‘app-root h1’)).getText(), like you have already guessed, we are just finding an element with the selector ‘app-root h1’

app.e2e-spec.ts  is the tests holder. We will be writing all of our tests here.

import { AppPage } from './app.po';

describe('my-angular5-app App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to ng5!');
  });
});

The first thing we do is, importing the page, in this case, AppPage. This will be very easy for you if you have already written any unit test cases using jasmine. If you are not sure about how you can write the unit tests, I recommend you to visit this link.

Once we import the page, we are declaring an object and initialize the same with an AppPage instance in beforeEach function, so that the code can be executed before each test runs.

And in our first test, we are just confirming that the title is ‘Welcome to app’ by getting the value from our page object by calling page.getParagraphText(). 

Creating Login Component

As you all know, a component will have two files by default.

• login.component.html
• login.component.ts

login.component.html

Let’s write some HTML code for our component.

<div class="container" style="margin-top:100px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-4 col-sm-4 center-block ">
      <mat-card>
        <mat-card-header>
          <img mat-card-avatar src="../../../assets/images/App-login-manager-icon.png">
          <mat-card-title>Login here</mat-card-title>
          <mat-card-subtitle>Trust us for your data, and sign up</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
          <div class="signup-fields">
            <form id="loginForm"[formGroup]="form" (ngSubmit)="login()">
              <div class="form-group">
                <input name="email" class="form-control" matInput type="email" placeholder="Email" formControlName="email" />
              </div>
              <div class="form-group">
                <input name="password" class="form-control" matInput type="password" placeholder="Password" formControlName="password" />
              </div>
              <div>
                <button id="btnSubmit" mat-raised-button type="submit" color="primary">Login</button>
              </div>
            </form>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  form;
  constructor(private fb: FormBuilder,
    private myRoute: Router,
    private auth: AuthService) {
    this.form = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  ngOnInit() {
  }

  login() {
    if (this.form.valid) {
      this.auth.sendToken(this.form.value.email)
      this.myRoute.navigate(["home"]);
    }
  }

}

If you run the application, you can see that we are accepting the form only if we give relevant values to the fields, if not given, the form will be invalid. In our next step, we will write an end to end test for this functionality. Sounds good?

Write end to end tests for Login component

To get started, let us create two files as below.

1. login.po.ts
2. login.e2e-spec.ts

Now let us define our page and some functions in login.po.ts.

Set up login.po.ts

Open the file and write some code as preceding.

import { browser, by, element } from 'protractor';

export class LoginPage {
    navigateTo(){
        return browser.get('/login');
    }
}

Now we will write the codes to find the email and password text boxes.

getEmailTextbox() {
 return element(by.name('email'));
}

getPasswordTextbox() {
 return element(by.name('password'));
}

Set up login.e2e-spec.ts

It is time to set up our spec file before we start writing the tests.

import { LoginPage } from './login.po';

describe('Login tests', () => {
    let page: LoginPage;

    beforeEach(() => {
        page = new LoginPage();
        page.navigateTo();        
    });
});

We have imported our login page and initialized the same. It is time to write the tests now.

it('Login form should be valid', () => {
 page.getEmailTextbox().sendKeys('info@sibeeshpassion.com');
 page.getPasswordTextbox().sendKeys('1234');

 let form = page.getForm().getAttribute('class');

 expect(form).toContain('ng-valid');
});

Here what we are doing is, set the values to our text boxes by using sendKeys function and then find the class attribute of our form, so that we can check whether it is valid or not. If the form is valid, the form will be having the class as ng-valid, if not, it will have ng-invalid class.

Run end to end test

Running end to end test is as easy as falling off a log. As we are using Angular CLI, all we have to do is run the command ng e2e.  This will be set in our package.json file.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

let us run ng e2e now.

PS F:\My Projects\ng5> ng e2e

If everything goes well, your application should open in a browser and test the functionality. You will also get a message saying “Chrome is being controlled by automated test software”.

ng e2e browser output

And in your terminal console, you should see an output saying all of your tests are passed.

Automated test output

Writing a few more tests

Let us write a few more tests to check some other functionalities.

Check form is invalid

To check the form is invalid or not, we need to pass some invalid data to the form. The final test should be as follows.

it('Login form should be invalid', () => {
 page.getEmailTextbox().sendKeys('');
 page.getPasswordTextbox().sendKeys('');

 let form = page.getForm().getAttribute('class');

 expect(form).toContain('ng-invalid');
});

Check whether the value is been saved to local storage

You might have already looked at what is the functionality we are doing when we click the login button in our application. For now, we are just saving the email value to the local storage. Below is the function which gets called when we click the login button.

login() {
    if (this.form.valid) {
      this.auth.sendToken(this.form.value.email)
      this.myRoute.navigate(["home"]);
    }
  }

And this is the sendToken method in out AuthService.

sendToken(token: string) {
    localStorage.setItem("LoggedInUser", token)
 }

Now, we are going to write an automated test for this functionality. First, let us add a function which returns submit button in login.po.ts.

getSubmitButton() {
 return element(by.css('#btnSubmit'));
}

Now, write the test as preceding.

it('Should set email value to local storage', () => {
 page.getEmailTextbox().sendKeys('info@sibeeshpassion.com');
 page.getPasswordTextbox().sendKeys('1234');

 page.getSubmitButton().click();

 let valLocalStorage = browser.executeScript("return window.localStorage.getItem('LoggedInUser');");
 expect(valLocalStorage).toEqual('info@sibeeshpassion.com');
});

As you can see that, we are actually setting some valid data to the form and triggering the click event of our button, and the value of the email text box is being saved to the localStorage. In our test, we are checking the value of the localStorage by executing the script browser.executeScript(“return window.localStorage.getItem(‘LoggedInUser’);”). We should get an output as below if everything is fine.

locaStorage in Protractor

Conclusion

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this post, we are going to see how to do validation using template driven forms in Angular 5, this is just a different approach that you can follow, as we have discussed another way in our previous post. At the end of this article, you will get to know how you can implement validations in Angular 5 application using Template Driven Forms. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

1. What Is New and How to Set Up our First Angular 5 Application
2. Angular 5 Basic Demo Project Overview
3. Generating Your First Components And Modules in Angular 5 App
4. Implement Validations in Angular 5 App

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. We are going to see Template Driven Forms approach here.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Install Bootstrap

Before we begin, let’s install bootstrap in our application.

PS F:\My Projects\ng5> npm install bootstrap --save

As we are developing this application using Angular CLI, we can add the reference of Bootstrap in our Angular-CLI.json file. The styles section of that file will look like below after you add the reference.

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ]

Please be noted that there are many other ways to configure Bootstrap in our application, here we are not going to explain that.

Importing ngForm to a variable

Let’s clean codes in our Registration component and add a new form which has a form variable, and this form variable can hold the values of our form. There are many things you can do with this variable, for now, let’s say it is our model values container.

<div class="container">
  <div class="row">
    <div class="no-float center-block col-lg-4 col-sm-4">
      <mat-card>
        <mat-card-header>
          <img mat-card-avatar src="../../../assets/images/App-login-manager-icon.png">
          <mat-card-title>Sign up</mat-card-title>
          <mat-card-subtitle>Trust us for your data, and sign up</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
          <form #regsiterForm="ngForm" (ngSubmit)="register(regsiterForm)">
          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

import { OnInit, Component } from "@angular/core";

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }
}

Implement Validation for User Name field using Template Driven Forms

As we have created our form, now it is time to generate out input controls into it.

<form #regsiterForm="ngForm" (ngSubmit)="register(regsiterForm)">
    <div class="signup-fields">
        <div class="form-group">
            <input type="text" required name="userName" class="form-control" placeholder="User Name">
        </div>
        <div>
            <button class="btn btn-primary btn-block" type="submit">Signup</button>
        </div>
    </div>
</form>

What we have above is a simple HTML with template driven form, where we are going to introduce the validation. Let’s modify the userName field now.

<input type="text" [(ngModel)]="userName" #userName="ngModel" required name="userName" class="form-control" placeholder="User Name">

What we are trying to achieve by the above code is, creating a reference variable userName and assign the input value to it. Basically, this is a two-way binding, where we can set the data from our component and update it in the form, and vice versa. Now if you run your application, you should see an error as below.

Uncaught Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (compiler.js:26025)
    at PropertyWrite.visit (compiler.js:4585)
    at convertActionBinding (compiler.js:25475)
    at eval (compiler.js:27987)
    at Array.forEach (<anonymous>)
    at ViewBuilder._createElementHandleEventFn (compiler.js:27983)
    at nodes.(anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:27620:27)
    at eval (compiler.js:27928)
    at Array.map (<anonymous>)
    at ViewBuilder._createNodeExpressions (compiler.js:27927)

This is because we are using the same name for both model and reference variable. So we should change it. To do so, let’s create a User Model (user.model.ts) and reference it to our Register component.

export class User {
    id: any;
    userName: string;
    email: string;
    userRole: string;
    profileImage: string;
    phoneNumber: string;
    firstName: string;
    lastName: string;
}

import { User } from '../models/user.model'

Now we can change our input as below.

<input type="text" [(ngModel)]="user.userName" #userName="ngModel" required name="userName" class="form-control" placeholder="User Name">

Please make sure that to declare a user in registration component.

export class RegistrationComponent implements OnInit {
  user = new User();
  constructor() {
  }

  ngOnInit() {
  }
}

Now if you run your application, you can see that the Submit button will be enabled only if the form is valid, that is, only if you enter any values in the username field.

Decorate the validation message

Now we know that our form is working fine, but don’t we need to give a message to the users if they haven’t given any values in the fields? Let’s add few more markups in our HTML.

<div class="form-group" [class.has-error]="userName.invalid" [class.has-success]="userName.valid">
    <input type="text" [(ngModel)]="user.userName" #userName="ngModel" required name="userName" class="form-control" placeholder="User Name">
    <span class="help-block" *ngIf="userName.errors?.required">
                  User Name is required
                </span>
</div>

We are enabling the class “has-error” and “has-success” dynamically by checking the valid and invalid property of userName field. We are also showing our required field message in a new span if there are any required errors in our userName model. Now if you run your app, you can see that the validation is working fine.

But isn’t that validation showing by default, we should show the message only if the user touched our field, and refused to type anything right? Let’s add “userName.touched” in our markup.

<div class="form-group" [class.has-error]="userName.invalid && userName.touched" [class.has-success]="userName.valid">
    <input type="text" [(ngModel)]="user.userName" #userName="ngModel" required name="userName" class="form-control" placeholder="User Name">
    <span class="help-block" *ngIf="userName.errors?.required && userName.touched">
                  User Name is required
                </span>
</div>

Implement the validation for other fields as well

Now it is time to implement the same in other fields.

<div class="container" style="margin-top:100px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-4 col-sm-4 center-block ">
      <mat-card>
        <mat-card-header>
          <img mat-card-avatar src="../../../assets/images/App-login-manager-icon.png">
          <mat-card-title>Sign up</mat-card-title>
          <mat-card-subtitle>Trust us for your data, and sign up</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
          <form #regsiterForm="ngForm" (ngSubmit)="register(user)">
            <div class="signup-fields">
              <div class="form-group" [class.has-error]="userName.invalid && userName.touched" [class.has-success]="userName.valid">
                <input type="text" [(ngModel)]="user.userName" #userName="ngModel" required name="userName" class="form-control" placeholder="User Name">
                <span class="help-block" *ngIf="userName.errors?.required && userName.touched">
                  User Name is required
                </span>
              </div>
              <div class="form-group" [class.has-error]="email.invalid && email.touched" [class.has-success]="email.valid">
                <input type="text" required [email]="user.email !== ''" [(ngModel)]="user.email" name="email" class="form-control" placeholder="Email"
                  #email="ngModel">
                <span class="help-block" *ngIf="email.errors?.required && email.touched">
                  Email is required
                </span>
                <span class="help-block" *ngIf="email.errors?.email && email.touched">
                  Email is invalid
                </span>
              </div>
              <div class="form-group" [class.has-error]="password.invalid && password.touched" [class.has-success]="password.valid">
                <input type="password" [(ngModel)]="user.password" required class="form-control" name="password" placeholder="Password" #password="ngModel">
                <span class="help-block" *ngIf="password.invalid && password.touched">
                  Password is required
                </span>
              </div>
              <div class="form-group" [class.has-error]="confirmPasswordControl.invalid && confirmPasswordControl.touched" [class.has-success]="confirmPasswordControl.valid">
                <input type="password" required class="form-control" name="confirmPassword" placeholder="Confirm Password" [(ngModel)]="confirmPassword"
                  #confirmPasswordControl="ngModel">
                <span class="help-block" *ngIf="confirmPasswordControl.errors?.required && confirmPasswordControl.touched">
                  Confirm password is required
                </span>
              </div>
              <div>
                <button class="btn btn-primary btn-block" type="submit" [disabled]="regsiterForm.invalid">Signup</button>
              </div>
            </div>
          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

For email validation, we have given an additional attribute and set the condition as [email]=”user.email !== ””, this is for not showing both the required validation and email validation together. This will show the required message if the user touched the field and not giving any values, and the email validation will get fired only if the entered value is not a valid email. Sounds good?

Add register function

Finally, let’s add our function register.

import { OnInit, Component } from "@angular/core";
import { User } from '../models/user.model';
@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  user = new User();
  constructor() {
  }

  ngOnInit() {
  }

  register(user: User): void{
    console.log(user);
  }
}

Once it is done, let’s open our browser console and see the data.

Here we have seen how we can implement validation using template driven form. I will write my next article about implementing custom validators using directives in Angular, for comparing our password and confirm password field. Till then, bye.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this post, we are going to see how to create a custom validator directive in Angular 5. We have already seen how to do validation in our previous posts, and we have not done any validations for comparing the password and confirm the password, remember? Here we are going to see that. At the end of this article, you will get to know how to create a new shared directive according to our requirements. This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

1. What Is New and How to Set Up our First Angular 5 Application
2. Angular 5 Basic Demo Project Overview
3. Generating Your First Components And Modules in Angular 5 App
4. Implement Validations in Angular 5 App
5. Validation Using Template Driven Forms in Angular 5

Source Code

You can always clone or download the source code here

Background

Validations have a vital role in all application no matter in what language it is been developed. And since it is an essential part, there are many ways to achieve it. If we create a custom shared directive for creating a compare validator, it would be a great piece of code right, which can be reused.

Using the code

It is recommended to clone the project from GitHub, so that you can try everything your own. Let’s go ahead and write some codes now.

Creating a custom directive

Let’s just create a new directive in a shared folder and name it equal.validator.directive.ts. Now open that file and start writing the code. Let’s import some of the core components first.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

Now Let’s define our class and @Directive.

import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
import { Directive, Input } from "@angular/core";

@Directive({
    selector: "[appEqualValidator]",
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: EqualValidatorDirective,
        multi: true
    }]
})
export class EqualValidatorDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        throw new Error("Method not implemented.");
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

As you can see that, we are actually inheriting our new class  EqualValidatorDirective from Validator. Now we need to change the implementations of the method inside it. We should also add our new directive in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { EqualValidatorDirective } from './shared/equal.validator.directive';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavComponent } from './nav/nav.component';
import { RegistrationComponent } from './registration/registration.component';
import { LoginComponent } from './login/login.component';

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavComponent,
    RegistrationComponent,
    LoginComponent,
    EqualValidatorDirective
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implement validate

Before we do that, we should add our new cutom directive selector in our confirm password field, because that’s where we are going to use our validator. So we are going to change our markup for confirm password field as below.

<div class="form-group" [class.has-error]="confirmPasswordControl.invalid && confirmPasswordControl.touched" [class.has-success]="confirmPasswordControl.valid">
    <input type="password" required class="form-control" name="confirmPassword" appEqualValidator="password" placeholder="Confirm Password" [(ngModel)]="confirmPassword" #confirmPasswordControl="ngModel">
    <span class="help-block" *ngIf="confirmPasswordControl.errors?.required && confirmPasswordControl.touched">
                  Confirm password is required
                </span>
</div>

As you can see, we are using the selector  appEqualValidator=”password” in our confirm password field. Please do check my previous posts if you are not sure how to implement other validations like email and required.

Now let’s go back to our custom directive and make some changes.

export class EqualValidatorDirective implements Validator {
    @Input() appEqualValidator: string;
    validate(c: AbstractControl): { [key: string]: any; } {
        const controlToCompare = c.parent.get(this.appEqualValidator)
        if (controlToCompare && controlToCompare.value == c.value)return { "equal": true };
        return { "notEqual": true }
    }
    registerOnValidatorChange?(fn: () => void): void {
        throw new Error("Method not implemented.");
    }
}

Here, we get our confirmPassword control in the absolute control “c”, and in the next line, we are just finding our password control by getting the parent element of confirmPassword. Once we get that, we can easily perform the comparison easily right? So, if it matches we return  { “equal”: true }; or else { “notEqual”: true }. Sounds good?

Introduce new span for custom message

Now we have a custom validator which compares two values, and the only thing which pending is, that to create a span for showing our new message in UI. Let’s change our markup now.

<div class="form-group" [class.has-error]="confirmPasswordControl.invalid && confirmPasswordControl.touched" [class.has-success]="confirmPasswordControl.valid">
    <input type="password" required class="form-control" name="confirmPassword" appEqualValidator="password" placeholder="Confirm Password" [(ngModel)]="confirmPassword" #confirmPasswordControl="ngModel">
    <span class="help-block" *ngIf="confirmPasswordControl.errors?.required && confirmPasswordControl.touched">
                  Confirm password is required
                </span>
    <span class="help-block" *ngIf="confirmPasswordControl.errors?.notEqual 
                      && confirmPasswordControl.touched && !confirmPasswordControl.errors?.required">
                  Password doesn't match
                </span>
</div>

As you can see, we are showing the custom message only if the directive returns notEqual property and there are no required errors. Let’s run our application and see it in action.

Here we have seen how we can implement shared custom validator directive. Let’s connect to a database and save these values in next article. Till then, bye.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

This post is a continuation of the course Developing an Angular 5 App series if you haven’t gone through the previous posts yet, I strongly recommend you to do that. You can find the links to the previous posts below. In this post, we are going to implement Guard, which help us to restrict users to access some pages if they haven’t logged in to our application, in  Angular 5. So at the end of this article, you will get to know how you can handle unauthorized route accesses. I hope you will like this article.

Developing an Angular 5 App series

These are the previous posts in this series. Please go ahead and have a look.

1. What Is New and How to Set Up our First Angular 5 Application
2. Angular 5 Basic Demo Project Overview
3. Generating Your First Components And Modules in Angular 5 App
4. Implement Validations in Angular 5 App
5. Implementing Guard in Angular 5 App

Source Code

You can always clone or download the source code here

Background

We may be having many numbers of pages on our app, some may be used by logged in users, and some can be used by unauthorized users. But if you are letting all the users use all the pages, no matter whether they have logged in or not? Yeah, obviously that’s not a perfect application. In our application, we are going to make our homepage available only for a logged in user. To do this, we can use Guard.

Using the code

Let’s go ahead and write some codes now.

Generate Guard

As we are using Angular CLI, we can easily generate Auth Guard on our application. Do you remember that we have created some components in our previous article? We can always create a Guard in the same way.

PS F:\Visual Studio\ng5> ng generate guard auth

In the above step, we are generating guard on our root level. Once you run the above command, this will generate two new Typescript files as follows.

Let’s go to those two files now.

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }
}

auth.guard.spec.ts

import { TestBed, async, inject } from '@angular/core/testing';

import { AuthGuard } from './auth.guard';

describe('AuthGuard', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [AuthGuard]
    });
  });

  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
    expect(guard).toBeTruthy();
  }));
});

This is just a test file, we can see how to perform tests on the Angular app in another article. Let’s concentrate on the implementation for now.

Generate login component and set up

Now that we have Guard ready for modification before we do that, let’s create a component for login.

PS F:\Visual Studio\ng5> ng g c login
  create src/app/login/login.component.html (24 bytes)
  create src/app/login/login.component.spec.ts (621 bytes)
  create src/app/login/login.component.ts (265 bytes)
  create src/app/login/login.component.css (0 bytes)
  update src/app/app.module.ts (1331 bytes)
PS F:\Visual Studio\ng5>

Now it is time to edit our routes in app.module.ts with the new route for login. Please be noted that it is not a recommended way to create routes in app.module.ts file. We should create a separate routing module for the same and use it in app.module.ts. I will be sharing how to do that in another article.

import { LoginComponent } from './login/login.component';

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent}]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavComponent,
    RegistrationComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

We may also need to edit the nav.component.html by adding a new button for login.

<mat-toolbar color="primary">
  <button mat-button routerLink="/">Home</button>
  <button mat-button routerLink="/register">Register</button>
  <button mat-button routerLink="/login">Login</button>
</mat-toolbar>

Now, go to your login.component.html file and add the following markup.

<mat-card>
  <form [formGroup]="form" (ngSubmit)="login()">
    <mat-input-container>
      <input matInput type="email" placeholder="Email" formControlName="email" />
    </mat-input-container>
    <mat-input-container>
      <input matInput type="password" placeholder="Password" formControlName="password" />
    </mat-input-container>
    <button mat-raised-button type="submit" color="primary">Login</button>
  </form>
</mat-card>

As you can see, we are actually calling a login method on submit. Before we implement that function now on login.component.ts file let’s create an auth service and edit as preceding.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {

  constructor(private myRoute: Router) { }

  sendToken(token: string) {
    localStorage.setItem("LoggedInUser", token)
  }

  getToken() {
    return localStorage.getItem("LoggedInUser")
  }

  isLoggednIn() {
    return this.getToken() !== null;
  }

  logout() {
    localStorage.removeItem("LoggedInUser");
    this.myRoute.navigate(["login"]);
  }


}

Now it is time to edit our login.component.ts file.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  form;
  constructor(private fb: FormBuilder,
    private myRoute: Router,
    private auth: AuthService) {
    this.form = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  ngOnInit() {
  }

  login() {
    if (this.form.valid) {
      this.auth.sendToken(this.form.value.email)
      this.myRoute.navigate(["home"]);
    }
  }

}

This is not the preferred way of doing this, instead, you should create an API service and connect to a database. And then, check whether this email and password are valid or not, at last, you should set the localStorage with the token you get from server API. This topic is enough for another article, to make this article short, I am just setting the value email here.

If you are getting an error as “ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence”, please make sure that you have rxjs version greater than or equal to 5.5.4 in package.json file. The rxjs version 5.5.3 has this issue with Angular 5.

Now run your application and make sure that it is redirecting to the homepage. you can also check the localStorage entry on your browser console.

Set up Guard generated

Let’s go to our auth.guard.ts file and make some changes.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import {Router} from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
    private myRoute: Router){

  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.auth.isLoggednIn()){
      return true;
    }else{
      this.myRoute.navigate(["login"]);
      return false;
    }
  }
}

Do not forget to add AuthService and AuthGuard in providers in app.module.ts.

import { AuthService } from './auth.service';
import { AuthGuard } from './auth.guard';

Use Auth Guard in Routes

Wow, the set up is done, now it is time for action. Let’s go to our routes now and change the code as preceding.

const myRoots: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' , canActivate: [AuthGuard]},
  { path: 'register', component: RegistrationComponent },
  { path: 'login', component: LoginComponent},
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

Run your application and try to access the home page before login if everything goes fine, it should redirect you to login page.

Let’s do some more coding on the nav.component.html and nav.component.ts for making our app more meaningful.

nav.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(private auth: AuthService) { }

  ngOnInit() {
  }

}

nav.component.html

<mat-toolbar color="primary">
  <button mat-button routerLink="/home">Home</button>
  <button mat-button *ngIf="!auth.isLoggednIn()" routerLink="/register">Register</button>
  <button mat-button *ngIf="!auth.isLoggednIn()" routerLink="/login">Login</button>
  <button mat-button *ngIf="auth.isLoggednIn()" (click)="auth.logout()">Logout</button>
</mat-toolbar>

Here we are just making the log out button available only for logged in users and hiding register and login button for logged in user. Sounds good? The auth.isLoggedIn function will be available on this page as we are injecting the auth service on out nav.component.ts file.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu