Angular | How to Get Dropdown Selected Text using Common Service Method

In Angular, we can easily iterate over the dropdown values using *ngFor directive and get the selected value using its model, but sometimes we have different properties for dropdown value and text which we need to show in options.

In that case, it becomes tricky to fetch the selected dropdown value’s text. Here we will create a service method that can be easily used anywhere in the application to fetch selected value text. Continue reading Angular | How to Get Dropdown Selected Text using Common Service Method

Angular 8/9 Autocomplete using angular-ng-autocomplete Package Tutorial by example

In general Autocomplete or Auto, suggestion control is used to show/ fetch related items from a local or remote server as user types to make a selection from available items.

In this tutorial, we will discuss the angular-ng-autocomplete package using which we can easily implement a fully-featured autocomplete without using any third party framework like Material or Bootstrap.

This package provides many inbuilt features to make Autocomplete control more user-friendly for a user. Continue reading Angular 8/9 Autocomplete using angular-ng-autocomplete Package Tutorial by example

Angular 7/8/9 | Angular EventEmitter and RxJs Subjects Quick Tutorial by Example

Data communication between components siblings or from Parent to child or vise-versa is possible by using many ways in Angular applications.

Sometimes we may need to pass data or any information to parent component from any of its child components in its hierarchy. For example, we have messages component which shows unread messages, now if we want to display the count on the header component.

In that case, we have two options available to do so. The EventEmitter available in angular core package and RxJS Subject provides observable which can be used to emit values to other components. Continue reading Angular 7/8/9 | Angular EventEmitter and RxJs Subjects Quick Tutorial by Example

@ng-bootstrap | Pass Data to a Bootstrap Modal Dialog using Angular

Angular tutorial on How to pass data from parent component to Bootstrap modal and get back response to the parent component.

Note: This tutorial is compatible with Angular version 6,7,8 and 9

The ng-bootstrap package provides the bootstrap components for Angular projects which makes the implementation of bootstrap components in an Angular project very easy.

In this tutorial, we will discuss how to implement Bootstrap modals in an Angular project using the ng-bootstrap package and also get to know about how to pass data from parent component in modal and also how we can get back data to parent component from modal.

To pass and get back data from Bootstrap modals does not require any special arrangements, these communications are beautifully handled by bootstrap modal methods. Continue reading @ng-bootstrap | Pass Data to a Bootstrap Modal Dialog using Angular

Angular 7/8/9 | Draggable Bootstrap Modals in 2 Steps! Tutorial by Example

Using modals in application really helps by adding a new layer of space on-page to add more information to users. They are the very common and most preferred way of displaying data.

Bootstrap modals in an Angular project are super easy to add and use anywhere in the project. But modals opens on some underlying data that a user can miss when modal is open. It can be closed easily but what if there is some hard filled data?

In this tutorial, we will add an extra amazing feature of dragging the Bootstrap modal using a handle using which a user can drag the modal a bit to see underlying info then simply release the icon to revert its original position.

Sounds great? let’s do it in just 2 steps 🙂 Continue reading Angular 7/8/9 | Draggable Bootstrap Modals in 2 Steps! Tutorial by Example

Angular 8/9 | Custom Filter Pipe Get Child Values based on Parent Id Passed

In client-side applications, we may need to filter out a set of data based on some unique values of the property passed to it. This type of data set can be a list of items with a parent-child relationship where they need to refine the child results based on parent id in it.

In Angular applications, we can do so by using Filter Pipes which can be easily used on a data object with custom login. Continue reading Angular 8/9 | Custom Filter Pipe Get Child Values based on Parent Id Passed

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