Google Maps can be easily implemented in an Angular project using the @agm package as we have already discussed here. In this tutorial, we will focus on adding a Circle Radius in the map to limit the markers shown to the user. A user can control up to how far the markers/ locations should be
Integration of Ezoic using Cloudflare cause some 520 errors saying ‘Web server is returning an unknown error’. Here I will discuss a small step that can resolve this issue. In this article, I am going to share some personal experiences about the integration of my blog with Ezoic. I will discuss the issues I faced
Using @Input decorator parent component can pass values to child components using property binding. But there may be a case where we are passing more than one property in a child component. We may need control on which property is changed and also check if other properties have changed from the previous one or not.
In this tutorial, we will explore the Angular Material’s Tree structure UI component. A tree structure depicts a hierarchy of data in a parent-child relation. These tree nodes can be collapsed and expanded to deep drill over child items. Material is an Angular compatible UI library which provides a wide variety of components following a
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
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
Finally, Angular 9 is released! Here we will discuss major changes and what’s new for your current project which you need to look at. There are only some under-the-hood changes which are mostly how Angular works and optimization during the bundle creation process.
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
Using Angular’s Animation package we can implement custom animation in our project which adds up a lot of value to the application by improving the way it behaves in front of users.
To check or select a Radio form control we use prop() method in jQuery. For that, we need to bind the prop method using a selector which can be an ID, class or value of radio control in a group.
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 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
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
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
In this tutorial, we’ll learn How to install & setup Python on Windows 10 operating system. Here we will learn how to download the Python setup from its official website, choose directory, setup Environment variables to make it work correctly for CMD terminal as well. Before we start, let’s have a look at other facts
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