Angular 8/7 Material Inline MatCalender/ Datepicker Tutorial by Example

We have already discussed how to use Material UI framework in Angular project and how to use Datepicker component in a view.

But sometimes we may need to show Datepicker inline in a view so that it will be always visible to the user for selections.

In this tutorial, we will go through steps to demonstrate how to use Calendar inline in component with available options like:

  • Set Max Date
  • Set Min Date
  • Filter some of the dates; Disable Sundays and Saturdays in Inline MatCalender
  • Start At property
  • Event trigger control on date selected.

Continue reading Angular 8/7 Material Inline MatCalender/ Datepicker Tutorial by Example

Angular 8/7 + ng-bootstrap | Accordion Tutorial by Example

In this tutorial, we will discuss how to add Bootstrap Accordion in Angular Project using ng-bootstrap package with multiple option properties.

We will create a new Angular project then install the ng-bootstrap package to use its UI components like Accordion. Continue reading Angular 8/7 + ng-bootstrap | Accordion Tutorial by Example

Angular 8 | ng-bootstrap Carousel Tutorial

There are a number of options available for an Image/ Content Carousel in Angular project, but Bootstrap Carousels are pretty much popular among developers due to their easy implementation and very fewer dependencies.

In this tutorial, we will discuss how to implement Bootstrap Carousel in Angular project using ng-bootstrap package. NgBootstrap is built on Angular with readily available UI components, which is very easy to install and usage of UI components is very smooth. Continue reading Angular 8 | ng-bootstrap Carousel Tutorial

Angular 8/7 + ng-bootstrap | Tooltip Tutorial

In this tutorial, we will learn how to add bootstrap tooltips in Angular 8 project by using ng-bootstrap package.

Tooltips are used to provide information to users in a floating container with some textual content. Tooltips are generally used to show some extra or optional data on hover or click events triggered by users on a webpage. Continue reading Angular 8/7 + ng-bootstrap | Tooltip Tutorial

Angular 8 + ng-bootstrap 4 | Popover Tutorial by Example

In this tutorial, we will learn how to install NgBootstrap in Angular application and implement Popover UI Component by examples.

What are Bootstrap Popovers?

A popover is a small overlay which is used to show information in a floating container. It is shown at a specified position by user actions like Click or Hover beside an element. Continue reading Angular 8 + ng-bootstrap 4 | Popover Tutorial by Example

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 | 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 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