Angular @ng-select | Validation, Multiselection, Custom Property Binding and Checkboxes

It’s always a boon that Angular developers have some great packages which not only provide the required solution for behavior but also sometimes adds up to the value.

One of a package is @ng-select in our top list to convert traditional HTML select form control into an advanced selection component with many features:

  • Search Filter
  • Optimized for large values using Virtual Scroll
  • Customized template for options
  • Single and Multi-selection in form of Tags
  • And many more…

Continue reading Angular @ng-select | Validation, Multiselection, Custom Property Binding and Checkboxes

Angular 7/8/9 | Input File Image/ File Upload to Base64 Tutorial by Example

Uploading media files like profile images or PDF or Word documents to the server via a web form is a common practice in data-centric applications.

In Angular application where data is sent via HTTP calls, we can easily convert images and docs to the Base64 string and send them to the server is using HTTP Post. After getting the Base64 string we can easily convert it to a real file and save at server disk with file name and path saved in the database. Continue reading Angular 7/8/9 | Input File Image/ File Upload to Base64 Tutorial by Example

Angular 7/8/9 | Download PDF Files in Browser Instead of Opening in New Tab Quick Solution

In Angular application, we may have a form where a user can upload documents in PDF formats and also can view and download the same in view mode.

By default when we add a link to PDF files in HTML, they open in a new tab from a user can download. This behavior is common in Chrome and Mozilla which are the most used web browsers.

In this tutorial, we will discuss how to force download PDF files in the user’s file systems when we click on a link instead of opening it in a new Tab. Along with that, we will also learn a bonus tip on how we can open a PDF file in tab starting from a specified page number. Continue reading Angular 7/8/9 | Download PDF Files in Browser Instead of Opening in New Tab Quick Solution

Angular 7/8/9 How to Use Directives in other Modules on Child Components

In this tutorial, we will learn how to create custom Directive in Angular Application and re-use them in different components and at different levels of module hierarchy.

Sometimes in large Angular applications, we may have a more complex structure of components where some of them may have their own modules and sub-modules or components. Continue reading Angular 7/8/9 How to Use Directives in other Modules on Child Components

Angular Material 8 | Adding Multiple Tables on Single Component Tutorial

Angular material tables provide the fully loaded table components in which we can easily add sorting, paging, filter like features without any much codding. It works like charm in real-world applications and provides a nice user-friendly user interface.

Sometimes our component may represent more than one grid of tabular data, in that case, it becomes a bit confusing on how to add more than one Angular material tables in a single component having respective sorting and pagination components. Continue reading Angular Material 8 | Adding Multiple Tables on Single Component Tutorial

Angular 7/8 | Hide Div on Click Ouside Angular Tutorial

In this tutorial, we will learn how to trigger click events on an element when we click outside of that element container in Angular.

We used to have a target element in JQuery using which we could have easily detected if the clicked element is the same element or its outside that element.

In Angular, we will use a nice package module called ng-click-outside which provides a directive component to trigger click event when we click outside of an element with click event bindings. Continue reading Angular 7/8 | Hide Div on Click Ouside Angular Tutorial

Angular 7/8 | Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

In this tutorial, we will discuss another but popular Date and Time picker supported by Angular 2+ applications. It is well supported for Datepicker with integrated time picker and Range of date and time picker.

Here we will discuss its installation on a new Angular project and all possible features and scenarios which we come across in a real-world app. Continue reading Angular 7/8 | Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

Angular 7/8 | HTTP Global Spinner Loader using ng-http-loader Tutorial by Example

In this tutorial, we will implement a global Spinner Loader in the Angular project by using a third-party package. The Spinner loader is shown whenever there is a pending HTTP call using Interceptors. This spinner loader comes with many configuration settings to customize its look and feel in your project.

Angular interceptors were introduced after version 4.3, which are used to handle HTTP calls behavior to the next level. This Loader Spinner also creates an interceptor to show or hide spinner loader automatically, but we can also control it to show/ hide manually for specific situations. Continue reading Angular 7/8 | HTTP Global Spinner Loader using ng-http-loader Tutorial by Example

Angular 7/8 | How to Cancel HTTP Calls on Router Change

Angular Interceptors play an important role to control and manipulate HTTP calls behavior which we do to get remote data from the server.

In this tutorial, we will get to know how to cancel unnecessary HTTP get, post or any request to server after a user route to another component in an application using Angular Interceptor services. Continue reading Angular 7/8 | How to Cancel HTTP Calls on Router Change

Angular 7/8 | Image Uploader with Cropper and Preview Tutorial with Example

In this tutorial, we will implement Image selection functionality with a crop window for a user to crop any area on the browsed image and also preview the selected section of the image.

The cropper image section is converted into base64 encoded string which can be easily uploaded to the server and saved as a real image into JPG or PNG formats. Continue reading Angular 7/8 | Image Uploader with Cropper and Preview Tutorial with Example