Angular 8/7 | Radio Value Selection and Getting Updated Object in *ngFor Listing Example

In Angular, listing radio form controls and setting their behavior becomes tricky sometimes. There is a number of things a developer wants to do with a list of radio controls which are usually populated dynamically using an Object with JSON from the server-side.

Listing of items in Angular is done using *ngFor directive which is used to iterate over the values in an array or object.

Here we will discuss Radio control listing using a dynamic set of data in JSON format with a demo of the User Access Management page with a very simple explanation. Continue reading Angular 8/7 | Radio Value Selection and Getting Updated Object in *ngFor Listing Example

Resolved! Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘div’

In Angular views for displaying object values in a list, we use *ngFor directive to iterate values. This directive takes out each row in the object and creates repetitive blocks of an element which is having NgFor. Continue reading Resolved! Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘div’

Angular 8 | Re-sizable Elements and Layouts in Angular 8 Application

In this tutorial, we will Implement resizable feature on elements and layout. By adding resizable feature a user can resize a container or element by dragging from corners.

The resizable feature can be added in many areas in an application to resize the editable container, Images, Dashboard sections, etc.

Continue reading Angular 8 | Re-sizable Elements and Layouts in Angular 8 Application

Angular 7/8 | Use Popular jQuery Datatables in Angular2+ Projects in few steps

Compatible from Angular 2 to 8

Datatable is popular among developers developing in web projects using the mainly jQuery library. It is a full package of many basic features like Pagination, Sorting, Filter search bar, etc.

In this post, we will implement this fully featured Datatables library in Angular project and discuss various options available from basic to advance level of Datatables.

Continue reading Angular 7/8 | Use Popular jQuery Datatables in Angular2+ Projects in few steps

Angular Material 7 | Data Tables Example with Sorting, Filter, Pagination and Fixed header columns

Angular Material provides datatable components equipped with many common features like data filter, pagination, sorting on columns and even frozen columns and headers.

In this post, we will create an Angular application using Angular Material Tables component to show JSON data in tabular form. We can get data from server side using API’s. Continue reading Angular Material 7 | Data Tables Example with Sorting, Filter, Pagination and Fixed header columns

Angular 7 Material | Add Progress Spinner / Loader in Angular Application Example

In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners.

Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications. Continue reading Angular 7 Material | Add Progress Spinner / Loader in Angular Application Example

Angular 8/7 | Show Global Progress bar/ Loader on HTTP calls in few steps using Angular Interceptors in Angular 4.3+

Compatible from Angular 4.3 to latest version 7

Angular Interceptors can be used in a number of ways as they provide powerful support to HTTP calls we make from web applications. Web application build using Angular generally makes HTTP calls to the server for dynamic information, so it’s very important to provide information about what’s the status to API calls to users. Loaders/ Spinners and sometimes Progress bars are shown to inform the user that there are some server requests going on.

Continue reading Angular 8/7 | Show Global Progress bar/ Loader on HTTP calls in few steps using Angular Interceptors in Angular 4.3+

Angular 7/6 | Handle HTTP Request and Response using Interceptors in Angular 4.3 plus versions

Angular Interceptor is a powerful feature which can be used in many ways for securing and handling many HTTP related phenomena. HTTP interceptors were available in AngularJS but were missing in Angular 2, so there was a missing gap to manipulate HTTP calls globally at one place.

Continue reading Angular 7/6 | Handle HTTP Request and Response using Interceptors in Angular 4.3 plus versions

Angular 7/6 Material Autocomplete Example with Remote/ Server Side Results

We have already discussed the basic usage and implementation of Angular Material Autocomplete Component in an Angular Application in our previous post here.

Autocomplete is a very popular behavior used in many application to easy user form filling experience by providing some already built strings to fast data entry. Autocomplete is very similar to Input fields with addition to some Items showing up when the user focuses on that Input.

Continue reading Angular 7/6 Material Autocomplete Example with Remote/ Server Side Results

Angular 7/6 | Add AutoComplete in Angular Application using Angular Material

In this post, we will discuss How to Add and Autocomplete/ Suggestion box in Angular Application. Autocomplete helps a user to see predefined list items to choose from. These items in Autocomplete suggestions can be saved on local component, JSON file or remote results shown as user types in.

Autocomplete is attached to a simple input field which shows values to be filled as we see in chrome browser AutoFill. Data items to show in Autocomplete can be a simple list of an array or a JSON object.

Continue reading Angular 7/6 | Add AutoComplete in Angular Application using Angular Material