Angular 8/9 Image Slider with Lightbox using ng-image-slider Tutorial

In this tutorial, we will discuss a simple awesome image slider with a great feature to show a full-screen lightbox of full image on click. This image slider is created by Sanjay Verma and loaded with many features required for a web layout based application. A user can click on an image in the slider […]

Angular 8/9 Image Slider with Lightbox using ng-image-slider Tutorial Read More »

Angular 8/9 Owl Carousel 2 Image and Content Slider ngx-owl-carousel-o Tutorial by Example

In this post, we’ll discuss how to add Owl Carousel 2 in Angular application using the ngx-owl-carousel-o package. This package doesn’t need any jQuery support like the ngx-owl-carousel package. The Owl Carousel 2 is one of the most popular images and content slider library. It provides a number of feature which makes it compatible and

Angular 8/9 Owl Carousel 2 Image and Content Slider ngx-owl-carousel-o Tutorial by Example Read More »

How to Deploy Angular Project Production in Firebase Hosting

In this tutorial, we will discuss how to easily deploy Angular 9/8 production applications on Firebase hosting. Firebase provides many cloud-based services which prove very helpful to optimize and standardize application development process including Authentication, Realtime Database, Storage, Analytics, Performance Quality, A/B Testing, Cloud Messaging, and Hosting. The hosting is our target of discussion today

How to Deploy Angular Project Production in Firebase Hosting Read More »

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

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

Angular 9|8 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

Angular 9|8 Autocomplete using angular-ng-autocomplete Package Tutorial by example Read More »

Angular 9|8|7 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

Angular 9|8|7 Angular EventEmitter and RxJs Subjects Quick Tutorial by Example Read More »

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

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

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

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

Angular 9|8|7 Draggable Bootstrap Modals in 2 Steps! Tutorial by Example Read More »

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

In this Angular tutorial, we’ll learn how to implement a filter search on a dataset using a pipe filter with the help of ng2-search-filter. This package helps to filter out a collection provided as a source in the *ngFor directive. Sometimes we may have a long list of items or data in tabular form which

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

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

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

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

In this Angular 9/8/7/6 tutorial, we’ll learn How to create a file upload section to display selected image and convert it into Base64 format. While selecting a file we’ll add validation for the file type, height & width of images. Uploading media files like profile images or PDF or Word documents to the server via

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