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