Angular 7/6 | How to Show Radio Input Listing

Listing of items in data is a simple way to show items. If users have to select only a single Item out of it, we need to use radio input fields. here we will discuss the implementation of radio input list in Angular 6. We will develop a simple Angular application which will have the following tasks:

1) Create a new Angular Application.
2) item.ts having item model definition.
3) mock-data.ts, will have a list of items.
4) use ngModel to have data binding flowing both sides.
5) Change event binding to get Checked item record.

Continue reading Angular 7/6 | How to Show Radio Input Listing

Angular 7/6 | Share Data between Components Using @Input Decorator

Angular’s best feature is component. We can divide different modules into a number of components. Where each component having its own responsibility to perform. But, sometimes these components may need to communicate with each other and share data having each other’s dependencies.

In this post, we will discuss a simple example app which will share data between components using @Input() Decorator. @Input() decorator will allow passing data in the defined template.

Continue reading Angular 7/6 | Share Data between Components Using @Input Decorator

Angular 7/6 | Parent Child Checkbox List Structure with Expand Collapse

In this post we will discuss on How to Create a Checkbox List having parents and child structure, using single data object.

What we will do here?

– Create a list with parents and children each having a checkbox.
– Parents having controls to expand/ collapse respective children.
– Expand/ Collapse All control on top of the list.
– Select/ Unselect All control on top of the list.

Continue reading Angular 7/6 | Parent Child Checkbox List Structure with Expand Collapse

Angular 7/6 | Implement Simple Image Carousel/ Slider in Angular 2 Plus Versions

Image Carousels provides a good front-end user experience to show graphics or images in a small space in an interactive way.

But in Angular Application we hardly find great carousels/ image sliders to work with. In this tutorial, we will implement a Great Simple and Easy to Use Angular Image Carousel.

Continue reading Angular 7/6 | Implement Simple Image Carousel/ Slider in Angular 2 Plus Versions

Angular 7/6 | Not Reflecting Change in Variable and Model Value Passed in Component Method as Parameter/ Argument Resolved!

In an Angular application in some situations, we need to make changes in local variables which are getting used and defined as global. These variable or Model values does not reflect any change if we pass them as argument or parameter in a component method, then change in that parameter value does not reflect globally in view.

Continue reading Angular 7/6 | Not Reflecting Change in Variable and Model Value Passed in Component Method as Parameter/ Argument Resolved!

Angular 7/6 + Typescript: Create Filter List with Check-boxes to Select from List

Compatible with Angular versions 2 to 7

Hi Guys, here we will create a list of items with a filter using Angular 5 and Typescript. For filtering list data we will use Pipes.

Features:

  1. Filter from the list using input search form field.
  2. Use the checkbox to select a game from the populated list.
  3. Selected game tags will be added below the list items.
  4. Clear cross icon on search input to clear search term.
  5. “Clear Selection” to clear all selections by the user.
  6. An individual tag can be deleted using the cross icon on respective tags.

Continue reading Angular 7/6 + Typescript: Create Filter List with Check-boxes to Select from List