Angular accordion example

In this video we will discuss
1. How to implement simple accordion type of functionality in Angular
2. Difference between ngIf directive and hidden property in Angular 2 and later versions

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
   / @aarvikitchen5572  

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CRUD Tutorial
   • Angular CRUD tutorial  

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic  

Implementing accordion type of functionality in Angular 2 and later versions : When the panel title is clicked, the panel body and the footer must be collapsed. Clicking on the panel title again, must expand the collapsed panel body and footer.

There are several ways to do this. One way is to implement this accordion functionality in the component itself where we need it.

The benefit of this approach is, it is very easy to implement. The downside is, we cannot reuse this accordion functionality in another component if we need it there. We have to re-implement this same functionality again in that component.

In our next video we will discuss how to extract common accordion functionality into a separate component using content projection, so it can be reused anywhere in the application where we need that accordion type of functionality.