Angular: How to toggle between Card and List view components

As you all know Angular is known for as fast app development framework among the developers and it is best choice now a days. Most of the time during the Angular app development you have to deal with large data set and to fulfill this requirement you have to a create a component(s) which represent app data in such way that it has to be presented.

Now a days a if you see lot's of Angular apps has a such feature for the end users to switch the view between Card view and List view. Today in this post I am going to show you that how could you achieve this behavior. So without further delay let's start now.

In wireframe picture below, I have described that how we are going to do this in our Angular app.

Let's create an simple Angular App

First let's create an simple Angular app quickly by using stackblitz. It is the fastest way to create and build Angular bootstrap app without any code editor. See picture below:

Add dependencies to the app

After creating the app first we need to have an Toggle button component which handle the toggle behavior. There are lot's of open source Angular libraries available which has variety of good components and Primeng is one them that I am going to use in this tutorial.

So to add Primeng in above project you have to click on Dependencies tab and type primng in the input box and press enter and it will add the primeng dependency within few seconds. See picture below:

Styles Configuration

Since we added Primeng in our app now we have to add styles. Configure required styles at the styles section in angular.json or angularcli.json if you are using Angular CLI.

Add ToggleButtonModule in the app and use it

Now import ToggleButtonModule in app.module.ts file like below:

You may use p-toggleButton in app.component.html now like below:

This toggle button has following properties which we gonna use to perform toggle action:

1. (onChange)="handleChange($event)" event handler which listen the toggle event.
2. onLabel Label for the on state. Default is 'Yes'.
3. offLabel Label for the off state. Default is 'No'.
4. offIcon Icon for the off state. Default is null.
5. onIcon Icon for the on state Default is null.

Let's declare handleChange(event) method in app.component.ts and file will like below:

We also need to declare isCard boolean and it will initialize with false value. Once toggle button has clicked will catch the event and assign to the isCard like below:

this.isCard = event.checked

Now let's mock some data in the data array in app.component.ts to pass this data to the child components i.e our card-view.component and list-view.component

Create Card view component

In Angular CLI you may use short command to generate component like this ng generate component . In this tutorial I'll use it ng generate component . I have used CSS Bootstrap cards layout to represent the data in card view. See card-view.component.html below:

In card-view.component.ts we will add @Input data: Array = [] which will take data from it's parent component (i.e app.component.ts) as input. See below:

In above html code it is binding the data and it's property in the card.

Create List view component

Similarly generate List view component using this command ng generate component . See list-view.component.html below:

Similarly list-view.component.ts will be like below:

Include both component in app.module

To use both component in app.component first let's list-view.component.ts and list-view.component.ts in app.module.ts

Final step

In the final step let's add both components in the app.component.html like below:

In above html we have added condition *ngIf="isCard; else list" to switch the view when the toggle button has clicked. You may have noticed that how easy it is achieve to switch between card and list view.

Wrap up

It's time to wrap up and see the switch view in action by click below demo button:

If you have like this post then please let me know your opinion by commenting below and sharing this post with other developers.