Custom Directives in Angular 8 | Angular Directive Tutorial With Example

I think directives are the most important bit in an Angular application. There are 3 types of directive in Angular which is listed below.

  1. Component Directive
  2. Attribute Directive
  3. Structural Directive

Component Directive:

The component directive is something which is the core thing of angular application. We create components by using @Component decorator. The best example of component directive is AppComponent.

Attribute Directive:

Creating a directive is pretty similar to a component, we user @Directive decorator for creating the directives. Attribute directives are used as attributes of elements. Let me explain this with an example: ...  Read More

Share This:

Angular 8 - Reactive Forms Validation Example | Angular Form Validation Example

Forms are always an integral part of our application. In angular, we build the form in  2 ways either template-driven or model-driven/reactive forms.

Here we are going to discuss reactive forms with Angular. Reactive forms are more scalable and can be managed easily. It's much simple way to validate the reactive forms. There are a number of validations which are commonly used in our application. Here we'll discuss the following validations:

  1. Confirm Password Validation in Angular 8
  2. URL Validation in Angular 8
  3. Age-Old Validation in Angular 8
  4. Up to Decimal Point Validation in Angular 8
  5. Number Validation in Angular 8
  6. Alpha Numeric Validation in Angular 8
  7. Email Id Validation in Angular 8
  8. Credit Card Validation in Angular 8

Code for all the above validations can be found here

Let me create a service which I'll use to validate the forms in my application: src/app/Services/validation.service

Now let me create a validation message component. This is the common component which will be used throughout the forms to show the validation message. ...  Read More

Share This:

TypeScript Interfaces | Why use interfaces in angular typescript

  • An interface defines the syntax that an entity must have to follow.
  • Interfaces are only at compile time.
  • Interfaces contain only the declarations of the members.
  • A deriving class must define the required members.
  • It is also helpful in providing a structure.

Let me give you an example with users interface: i-users.ts

And now let say we have a users service and inside that, we have a function 'updateUser' to update the user info.


Here in the above code snippet, we are passing a parameter userData of type IUsers. This means we can not pass any other format except the IUsers.
But did you notice we have a question mark (?) at property phone and which means phone is optional.

So I can pass data something like:

Here above userData is valid data to pass the API.
Now let's have another example of invalid parameters:

Here this is invalid data because we have not declared the city in our interface and that's why this will result in an error at compile time.

Interfaces are also helpful when sometime we forgot to pass a required parameter and this will help you at the compile time by telling that a particular member is not defined. ...  Read More

Share This:

Angular 8 feature | Using loadChildren to Lazy-Load your Module | Angular 8 dynamic EcmaScript imports

Lazy loading is the beautiful feature which Angular provides. We can load the modules only when the user navigates to their routes for the
first time. It will increase the application performance and also will reduce the initial bundle size.
The Angular Router has always supported lazy loading but now in Angular 8, we can dynamically import the lazy-loaded module only when it is needed.
It is promise based and gives you access to the module whenever the module is called.

Let's create a transaction module for demonstrating the angular 8 dynamic EcmaScript imports:

This will create a transaction list, detail and create components. ...  Read More

Share This:

Handling 404 with Angular 2 | How to handle 404 (page not found) page in Angular 2,4,5

How to handle the exception if user is trying to access the page which not found. I'm going to explain how to handle a page not found exception in Angular 2,4,5.

In you RouterConfig add the following below line:

And here is the whole route file.

For more information about routing in Angular 2,4,5 click here.

Share This:

Angular 2 Routing | How to Set Up Basic Routing in Angular 2,4,5 | Routing example in Angular 2,4,5

In Angular 2,4,5 we nevigates our components through routing. Here in this tutorial I'll explain how to manage routing in Angular 2,4,5 very easily.

Because Angular Js is preferred to develop single page web applications so if you have common navigation then you can manage them through the routing in angular.

We also can manage the authenticated routing in Angular 2,4,5.

Here we will create a file called app.routing.ts inside the app directory of application.


 ...  Read More

Share This:

How to push objects into array in Angular 2 | How to iterate objects in Angular 2 Component

Sometime we need to push objects into array in Angular or to iterate the objects. Today I'll explain how we can do it in an easy proficient way.

Here I have declared that allitems is an array of any type. And we got some users data from the web service is assigned to the allitems array.

Here allItems is an array of object and I will iterate this array like:


Share This:

What is the difference in let and var in typescript

I will try to explain this by taking an example.

create a file main.ts

Now compile and run the compiled code like:

 Output will be:

last value: 5

here value of i at the end is 5.

This is the issue of declaring a variable with var keyword. we have declared value of i inside the for block but it is also available outside the for block or it is available inside the whole function body.

if you declare the variable with let

It will immediately give a compilation error say 'can not find name i' and you will catch this error at compile time. This is the beauty of Typescript. ...  Read More

Share This:

Typescript in Angular Js

Install Typescript:

To check the Typescript version:

Typescript is just a superset of JavaScript. It is client side object oriented language. It follows classes, objects, Inheritance, Interface etc.. object oriented concepts like in Java or .net.

A valid JavaScript code is also valid typescript code. Because when you compile the typescript code it create a JavaScript file.


when you compile this main.ts file like:

a new file will generated here named as main.js. ...  Read More

Share This:

Angular 2 Interceptors | ng2-interceptors

Concept of Interceptors is used for intercepting the HTTP request and response in Angular 2. You can append values in your HTTP request before sending to the server. You can alter you server response before displaying it.

For example in every request you wanted to show a loader and after coming response from server you wanted to hide the loader this show and hide of loader can be manage with Interceptors.

If you wanted to send some authentication token in headers you can manage it through Interceptors...  Read More

Share This: