Angular 7/8/9 | Search Pipe Filter using ng2-search-filter Quick Example Tutorial

Sometimes we may have a long list of items or data in tabular form which is added on the component for users. In that case, adding a simple filter search bar can prove a boon for a user to filter the required set of information.

The ng2-search-filter package provides a ready to use pipe filter to add search functionality nearly to any type of object data.

This package is very easy to use and implement.

Here we will look into the steps required to install the ng2-search-filter package and usage tutorial with some more tricks and tips. Continue reading Angular 7/8/9 | Search Pipe Filter using ng2-search-filter Quick Example Tutorial

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 | Add ( Star *) Asterisk Sign to Required Fields using Custom Directive for Bootstrap Form

Adding Asterisk to required fields on a form helps the user to quickly identify the required fields. Adding a star(*) is now an industrial standard that is required in almost every data-centric application consuming any kind of data.

For lengthy form it becomes a cumbersome job to add star sign to every form of control. Here we will discuss how to create a custom Angular 2+ directive to automatically add an asterisk(*) sign to required field controls like Input, Textarea, Radio, Checkboxes, and Select boxes.

Continue reading Angular 7/8/9 | Add ( Star *) Asterisk Sign to Required Fields using Custom Directive for Bootstrap Form

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