Angular 7/8 | Hide Div on Click Ouside Angular Tutorial

In this tutorial, we will learn how to trigger click events on an element when we click outside of that element container in Angular.

We used to have a target element in JQuery using which we could have easily detected if the clicked element is the same element or its outside that element.

In Angular, we will use a nice package module called ng-click-outside which provides a directive component to trigger click event when we click outside of an element with click event bindings. Continue reading Angular 7/8 | Hide Div on Click Ouside Angular Tutorial

Angular 7/8 | Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

In this tutorial, we will discuss another but popular Date and Time picker supported by Angular 2+ applications. It is well supported for Datepicker with integrated time picker and Range of date and time picker.

Here we will discuss its installation on a new Angular project and all possible features and scenarios which we come across in a real-world app. Continue reading Angular 7/8 | Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

Angular 2+ Useful Pipes Library Package for Strings Objects Date and more

In Angular data manipulation at the client-side is a common practice for which we may spend much of our development time in thinking logics for some simple formatting and operations.

In this tutorial, we will discuss a very powerful NPM package that is fully loaded with a number of useful pipes that require no external dependencies to be installed. Just install, configure and start using it.

Continue reading Angular 2+ Useful Pipes Library Package for Strings Objects Date and more

Angular 7/8 | How to Cancel HTTP Calls on Router Change

Angular Interceptors play an important role to control and manipulate HTTP calls behavior which we do to get remote data from the server.

In this tutorial, we will get to know how to cancel unnecessary HTTP get, post or any request to server after a user route to another component in an application using Angular Interceptor services. Continue reading Angular 7/8 | How to Cancel HTTP Calls on Router Change

Angular 7/8 | Image Uploader with Cropper and Preview Tutorial with Example

In this tutorial, we will implement Image selection functionality with a crop window for a user to crop any area on the browsed image and also preview the selected section of the image.

The cropper image section is converted into base64 encoded string which can be easily uploaded to the server and saved as a real image into JPG or PNG formats. Continue reading Angular 7/8 | Image Uploader with Cropper and Preview Tutorial with Example

Angular 8/7 | Radio Value Selection and Getting Updated Object in *ngFor Listing Example

In Angular, listing radio form controls and setting their behavior becomes tricky sometimes. There is a number of things a developer wants to do with a list of radio controls which are usually populated dynamically using an Object with JSON from the server-side.

Listing of items in Angular is done using *ngFor directive which is used to iterate over the values in an array or object.

Here we will discuss Radio control listing using a dynamic set of data in JSON format with a demo of the User Access Management page with a very simple explanation. Continue reading Angular 8/7 | Radio Value Selection and Getting Updated Object in *ngFor Listing Example

Resolved! Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘div’

In Angular views for displaying object values in a list, we use *ngFor directive to iterate values. This directive takes out each row in the object and creates repetitive blocks of an element which is having NgFor. Continue reading Resolved! Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘div’

How to Copy and Paste Images from Clipboard to WordPress Post

Images make a blog post more interesting and interactive. Adding multimedia content in a post makes things more understood and easily convey the message.

But sometimes it becomes a very cumbersome job to save a number of images on somewhere in the computer then upload them one by one in post content.

In this post, I will tell you how you can easily add images in your blog post by simply copy and paste in your WordPress post. Continue reading How to Copy and Paste Images from Clipboard to WordPress Post

Ionic 4 Grid Tutorial by Example

Ionic UI components prove very helpful in quickly creating responsive view layouts compatible with almost all screen sizes.

But some times we may need a gid system like we rows and columns are popularly known in bootstrap for better and tight distribution of elements Horizontally and Vertically on an app page.

Ionic provides a well-trained Grid system for such tasks.

The ion-grid provides a flexbox custom layout. It is having mainly three components a grid, rows, and columns. Continue reading Ionic 4 Grid Tutorial by Example