Angular 2

How to start with Angular 2

Angular 1 is basically developed for google developers for their internal use and more over it is developed for UI designing purpose and later they extended many features like two way data binding etc. Now Angular js 1 is widly used by developers, and some architectures and developers points about performance issues and angular core team finally come up with a new version Angular 2.Which is well structured and it offers a very good performance....

Continue Reading

ng-repeat in angular 2

Looping is very simple in Angular js 1, don't worry it is more simple in Angular js 2 as well with lot of performance improvement. Let us check .....

Continue Reading

Angular 2 filter using pipe concept

Yes we can do the filtering in Angular 2 as well, instead of filter it is pipe concept. Pipe will take the data and convert into desired output. There are many built in pipes like date, uppercase etc. Let us check here how we can create a custom pipes .....

Continue Reading

ng-click in angular 2

ng-click in angular js 2 is different from angular js 1. Let us check how it is in angular js 1 first......

Continue Reading

ng-if in angular 2

Angular js 1 ng-if is pretty straight forward to use. Let us check how it is in angular js 2....

Continue Reading

Show and hide in Angular 2

Let us check how it is in Angular js 2....

Continue Reading

Get selected values on click and show in the UI - Angular 2

There is lot of difference between angular one and two. Angular two is supporting JavaScript ES6 which is not yet supported by latest browsers however you can use current JavaScript ES5 with angular 2. But you may not be able to enjoy all features of angular 2 in this case. Let us check how we can show selected value on click in angular 2.....

Continue Reading

How to build toggle button or collapsible panel using angular 2

Let us check how we can build a toggle button using angular js 2. Same code you can use for building collapsible panel as well. It is almost similar like angular js 1 concept except some syntax changes. So if you are an angular js 1 guy, you are the best person to learn angular js2 as well :) :).....

Continue Reading

Simple search using pipe in angular 2

In this article I will be explaining about how to implement a simple search using pipe concept. I have explained in my previous articles how to do a simple search or filtering using angular 1. If you want to compare both implementation you can refer below reference url as well...

Continue Reading

Date filtering and formatting using pipe in Angular 2

Here I am going to discuss about date filtering/formatting using pipe. There are many inbuilt pipe in Angular 2 for date filtering. Let us check some of them first...

Continue Reading

Select all/ deselect all checkbox - Angular 2

Here I am going to discuss about implementing a select all/deselect all checkbox using Angular 2. I have explained the same using Angular js 1 and Jquery. If you want to compare the implementation please check below post as well...

Continue Reading

Collapsible menu using Angular 2 | Nested menu using Angular 2

Here I am going to explain about how to implement a simple collapsible or nested menu using Angular 2. Let us create simple component first...

Continue Reading

Add class to an active element - angular 2

Here I am going to discuss about adding a class to an active element. For example if we click on a link or dynamic menu we need to highlight that with a color. In this article we will be discussing the same in different scenarios....

Continue Reading

Angular simple progress bar using bootstrap.

Here I am going to explain how to build a progress bar using angular 1 and 2. I will be explaining this by using bootstrap 2 and 3 as well...

Continue Reading

Angular 2 simple client side pagination

Let us check how we can build a simple client side pagination using Angular 2. Basically it is so straight forwarded and we can achieve this by using very less code...

Continue Reading

Angular: Create reusable component and pass data to component

Here we will be discussing about reusing a component and also about how to pass data to a component...

Continue Reading

Angular: Share data between components using service file

We can easily communicate with components by making a service file common. Inject the service file where ever you want and use it and this is the most preferred way.....

Continue Reading

How to communicate between a component and a service file

In this article we will be discussing about how to communicate between a component and a service file...

Continue Reading

Angular show more/less pagination

In this article we will be discussing about developing a show more/less pagination using angular. Basically it is so simple which can be achieved by very less code....

Continue Reading

Angular window scroll up using a component

Let us check how we can scroll up the page/window using angular. I will be creating a simple component that can be placed anywhere in the page and user can click on the button to scroll up the page...

Continue Reading

Disable submit button until all mandatory fields are filled - Angular

Let us check how we can disable submit button of a form until all mandatory fields are filled. Angular folks made these things very simple, before explaining those you can check...

Continue Reading

How to show a date is today or yesterday or last week etc using pipe - Angular

Let us check how we can convert a timestamp/date to today or last week etc using a simple angular pipe. This will be very help full for users to understand the time very clearly. We can achieve this by using a simple pipe....

Continue Reading

Rating star component using Angular.

In this article I will be discussing about implementing a simple rating star component. This component can be reused very easily. Let us check with a working example....

Continue Reading

Communicate with parent and child component in Angular.

In this article we will be discussing about communicating between child and parent component in Angular. $scope and $rootScope concepts are removed in Angular, and this is one of the reason for improved performance in Angular application....

Continue Reading

Format date using pipe and append local time zone - Angular

Since most of the countries has different time zone and date time, it is important to show local time zone for users. Let us check how we can format a date and append a local time zone along with that. I will be creating a simple pipe and append the local time zone along with that. I will be adding local time zone logic into a service file, advantage is that you can easily inject and use it anywhere...

Continue Reading

Multi checkbox dropdown component using Angular

Here I am going to explain about creating a simple multi select checkbox dropdown component using angular. This component can reuse by adding anywhere in the application. Let check with working example....

Continue Reading

Angular simple sort

Here I will be discussing about doing a simple sort using Angular and JavaScript...

Continue Reading

Http calls in Angular with simple examples.

In this article we will be discussing about how to do an http calls in angular 2+. We already know...

Continue Reading

Set header for http request in Angular

In this article we will be discussing about passing headers for http request. Most of the applications will be passing some ticket for all http calls...

Continue Reading

ng if in Angular 4

Angular 4+ has updated there ng if capabilities, now it is more developer friendly. You can write...

Continue Reading

ng switch in Angular

Let us check how ngSwitch works in Angular. Basically it is almost similar to Angular js 1 except...

Continue Reading

Flash messages using Angular.

In this article we are going to discuss about creating a simple flash message using Angular component. Which can reuse very easily. It can be used for ...

Continue Reading

Watch input changes - Angular 4

In this article we are going to discuss about detecting an item changes from another component. It was done by using $watch property in Angular js 1 but in Angular 2+ we don't have such listeners ...

Continue Reading

5 different ways for conditionally adding class - Angular.

Here I am going to discuss about adding a class conditionally using Angular concept. I have explained about adding a class to an...

Continue Reading

Angular 2/4 routing with simple examples.

Here I am going to explain about implementing routing in Angular with simple examples. Angular team made routing so simple...

Continue Reading

3 simple ways to share data through angular route.

In this article I will be discussing about sharing data through routes. Compared...

Continue Reading

Share data between components using ViewChild - Angular 2+

In this article we will discussing about sharing data between different components using ViewChild. There are many ways to share data between components...

Continue Reading

Share data between sibling components - Angular 2+

In this article we will be discussing about sharing data between two different components. In my previous articles I have explained...

Continue Reading

Share data between Angular components - 7 methods

In this article we will be discussing about six different ways for sharing data between Angular components. I have written separate articles...

Continue Reading

Show preview image while uploading - Angular 4

In this article we are going to discuss about showing a preview image while uploading. This can be achieved by using very less code...

Continue Reading

File/image upload and send data to backend - Angular 4

In this article we will be discussing about how to upload a file/image and send data to backend...

Continue Reading

File upload validation - Angular 4

In this article we will be discussing about validating a file/image from client side before uploading. In my previous articles I have covered...

Continue Reading

Share data between non related components - Angular 4

In this article we will be discussing about sharing a data between non related components. Here I have used angular BehaviorSubject...

Continue Reading

Reusable flashy message using Angular 4

We are going to create a simple flash message that can be accessed by anywhere in the application. One of the use case will be, suppose we have many forms in our application...

Continue Reading