Angular | Create Documentation of Angular Project in 20 Secs!

Yes! you read it right… with this simple tool, you can create a documentation of your Angular project automatically by simply running an NPM command in your CLI. This package creates complete project documentation in HTML format with an overview and detailed view of each component in the project.

As our application grows, it becomes difficult to keep track of each module and its components. The situation becomes worse when there is a need for giving project structure to co-team members or deliver code source and explain everything to other teams. During maintenance by other team members also slows down the debug or change processes.

So its always a better idea to keep a well maintained, simple and self-explanatory documentation at hand so that others and can understand and go through the structure with their own pace and conveniences. Continue reading Angular | Create Documentation of Angular Project in 20 Secs!

Ionic 4 HttpClient CRUD Service Tutorial to Consume RESTful Server API

Angular’s HttpClient service enables communication between application and server by making an HTTP call to RESTfull API endpoints. In response, we get JSON data which is consumed to show meaningful content to users in client-side applications.

In this tutorial we are going to learn, how to use HttpClient service in Ionic 4 Application to make server HTTP calls with custom headers and propper Error Handling using RxJS operators. In our student application, we will implement CRUD (Create, Read, Update and Delete) operations to communicate with a Mock Server which we will build using JSON-Server NPM package. Continue reading Ionic 4 HttpClient CRUD Service Tutorial to Consume RESTful Server API

Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with We Components which are supported for responsive and multi-device platforms. There is a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, Data tables, etc which can empower Ionic applications to the next level.

In this tutorial, we will get to know how to install Angular Material UI Components in an Ionic application.

We will first install Material packages in Ionic 4 application then try some of its components. For this, we will create a new Ionic 4 application with a blank template. Continue reading Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

Angular Material 8 | Stepper Tutorial with Examples

In many applications which includes large forms to take data submission, it is very important to keep the user interface simple and clean for visitors to understand. The best way is to take data from users in steps.

We can divide data into multiple groups and take these input from the user in a step by step formats. This type of data submission is done with the help of Stepper.

Continue reading Angular Material 8 | Stepper Tutorial with Examples

Angular 8 + Material | Adding Tabs Component in Angular using Material v8.x.x

Tabs component organizes different content views at one area where only one is visible time and the user can switch them by clicking on each tab’s header name.

Angular Material Tabs create a beautiful layout filled with animation. Each tab section is provided with a header label name which can be clicked to show its content on the same place.

In this tutorial, we will add Angular Material Tab’s component and also discuss available options and features in Tab’s component.

Continue reading Angular 8 + Material | Adding Tabs Component in Angular using Material v8.x.x

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 8 Pipes | All Type of Pipes with Examples

In a real-world application, we may receive data in multiple forms, but some of these could in complex formats which are not easy for normal users to understand. For example Date object shows to date in a format like this

Sat Aug 03 2019 19:48:11 GMT+0530 (India Standard Time)

But it’s better to have something like this:

Saturday, 03 Aug 2019 07:50 PM

Continue reading Angular 8 Pipes | All Type of Pipes with Examples

Angular 7/8 | NgFor and TrackBy quick tutorial by example

In Angular DOM if we want to Iterate over each item in a collection (Which can be an Array or Object), then we use NgForOf Directive.

In this tutorial, we will discuss *ngFor structure directive with a quick example and get to know how we can use NgFor in different real-world application scenarios.

Structural directives are used to make changes in HTML layout by adding, removing, repeating or manipulating elements in DOM structure. Continue reading Angular 7/8 | NgFor and TrackBy quick tutorial by example

Angular 8/7 | NgSwitch quick tutorial by example

Applying conditional expressions to add or remove elements in Document Object Model (DOM) i.e our HTML structure we usually use NgIf, NgIf ELse or NgIf Then Else. But if there are more then two outputs other then true or false, NgIf simply makes conditional expressions more complex and messy.

Switch case strategy which we use in JavaScript is available in Angular as NgSwitch Directive. NgSwitch Directive can be used to match multiple conditions while keeping the DOM structure simple, clean and easy to understand.

Continue reading Angular 8/7 | NgSwitch quick tutorial by example

AngularFire2 + FireStore | Pagination with Next & Previous in Tabular Form Example

FireStore is a Firebase service which provides NoSQL Cloud Database solutions. We can easily use Firebase SDK’s to use a number of services on Android, IOS and even on We Application.

In this tutorial, we will learn how to integrate FireStore service in Angular 8 application and how to store data in the FireStore cloud database using Firebase JavaScript SDK. For Angular, we will use Firebase’s official package to use its services in Angular project known as AngularFire2.

Our tutorial example Application will have a form to submit values in FireStore and a Table to list items from the database. We will implement FireStore Query methods to load data in chunks from database using limit, there will be two buttons to load Next and Previous set of records.

Continue reading AngularFire2 + FireStore | Pagination with Next & Previous in Tabular Form Example