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

Angular 8/7 Bootstrap | Tabset Tutorial with Options by Example

In this tutorial, we will implement The Tabset UI component in Angular application using the ng-bootstrap package.

The ng-bootstrap package provides a number of UI components that are compatible with the latest versions of Angular. Bootstrap components are getting used for a long time by developers to add multi-device and screen support. So using ng-bootstrap components not only fasten the development process but also adds up responsive behavior to these components by default.

Let’s get started with Bootstrap Tabset component implementation. We will create a new Angular 8 application using the ng CLI tool the install ng-bootstrap package.

Continue reading Angular 8/7 Bootstrap | Tabset Tutorial with Options by Example

Angular 8/7 Form Validation with Bootstrap using Template driven Validation

In this tutorial, we will discuss how to implement simple form validation in Angular 8 application using Template-driven validation method.

For form validation tutorial we will use Bootstrap UI library to ease our task. In this form example, we will have Input field, Select box with single and multiple selections, Textarea and a checkbox. Continue reading Angular 8/7 Form Validation with Bootstrap using Template driven Validation

Angular 8/7 NgSelect with Single/ Multiple Selection and Search Filter

In this tutorial, we will discuss an awesome Dropdown select UI component which is loaded with many useful features which makes it a great choice for Angular project.

Showing listings of data for user selection is generally shown to the user in Select drop-down HTML control. Which is a traditional and nice way to show a limited set of data for selection. Continue reading Angular 8/7 NgSelect with Single/ Multiple Selection and Search Filter

Angular 8/7 Material Inline MatCalender/ Datepicker Tutorial by Example

We have already discussed how to use Material UI framework in Angular project and how to use Datepicker component in a view.

But sometimes we may need to show Datepicker inline in a view so that it will be always visible to the user for selections.

In this tutorial, we will go through steps to demonstrate how to use Calendar inline in component with available options like:

  • Set Max Date
  • Set Min Date
  • Filter some of the dates; Disable Sundays and Saturdays in Inline MatCalender
  • Start At property
  • Event trigger control on date selected.

Continue reading Angular 8/7 Material Inline MatCalender/ Datepicker Tutorial by Example

Angular 8/7 + ng-bootstrap | Accordion Tutorial by Example

In this tutorial, we will discuss how to add Bootstrap Accordion in Angular Project using ng-bootstrap package with multiple option properties.

We will create a new Angular project then install the ng-bootstrap package to use its UI components like Accordion. Continue reading Angular 8/7 + ng-bootstrap | Accordion Tutorial by Example

Angular 8 | ng-bootstrap Carousel Tutorial

There are a number of options available for an Image/ Content Carousel in Angular project, but Bootstrap Carousels are pretty much popular among developers due to their easy implementation and very fewer dependencies.

In this tutorial, we will discuss how to implement Bootstrap Carousel in Angular project using ng-bootstrap package. NgBootstrap is built on Angular with readily available UI components, which is very easy to install and usage of UI components is very smooth. Continue reading Angular 8 | ng-bootstrap Carousel Tutorial