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....
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 .....
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 .....
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......
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....
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.....
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 :) :).....
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...
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...
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...
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...
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....
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...
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...
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...
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.....
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...
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....
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...
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...
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....
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....
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....
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...
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....
Angular simple sort
Here I will be discussing about doing a simple sort using Angular and JavaScript...
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...
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...
ng if in Angular 4
Angular 4+ has updated there ng if capabilities, now it is more developer friendly. You can write...
ng switch in Angular
Let us check how ngSwitch works in Angular. Basically it is almost similar to Angular js 1 except...
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 ...
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 ...
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...
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...
3 simple ways to share data through angular route.
In this article I will be discussing about sharing data through routes. Compared...
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...
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...
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...
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...
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...
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...
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...
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...
Get Url parameter using Angular 4
In this article we will be discussing about getting query parameter in Angular 4...
Login authentication flow using angular auth guard - Angular 5
In this article we will be discussing about implementing a simple login flow using angular auth guard. This article will cover below use cases for login flow...
Create angular autocomplete - Angular 2/5
In this article we will be discussing about creating an autocomplete using angular. I am not using any external libraries to achieve this, we will create it from scratch....
Angular autofocus for input box - Angular 2/5
In this article we will be discussing about setting an autofocus for a text box and also setting focus on a click. I have explained the same u....
Angular autocomplete using HTML 5 - Angular 2/5
Here I am going to implement an auto complete feature using HTML 5 tag datalist along with using Angular. Advantage of using this tag is that no ...
Responsive image using HTML-5 srcset and Angular.
In this article I will be discussing about making an image responsive using latest html 5 attributes. We will integrate the same with Angular for better usage...
To view all articles please check Site Map page.
