1. I have 3 categories: ALL, Images, and Videos.
- When I select ALL, I want both videos and images to display in two separate cards.
- If I choose either Image or Video, only that specific type of content should be displayed.
https://i.sstatic.net/4ezDw.png
Under the All category, there are a total of 5 items - 3 images and 2 videos. I expect the 3 image items to be shown in the image section and the 2 video items in the video section. Currently, all 5 items are displayed in both sections when selecting All.
Here is how it currently appears for the All category:
Now, if I click on Images, I want only the image section to be displayed in full page rather than split into 2 cards.
HTML:
<div class="row">
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0px 20px 30px;">
<md-card style="margin:10px -14px;float:left;padding-top:0px!important;padding-bottom:20px!important;" class="border-top-3px col-lg-6 col-md-6 col-sm-6 col-xs-12 taskDiv width49">
<md-card-title style="margin-bottom: 25px;">
<h3 class="color-primary" style="margin: 2px 0px 2px 5px;letter-spacing: 0.6px;font-size:20px;color: #55595c;">Images</h3>
</md-card-title>
...
</md-card>
<md-card style="margin:10px 0;float:right;padding-top:0px!important;padding-bottom:20px!important;" class="border-top-3px col-lg-6 col-md-6 col-sm-6 col-xs-12 taskDiv width49">
<md-card-title style="margin-bottom: 25px;">
<h3 class="color-primary" style="margin: 2px 0px 2px 5px;letter-spacing:0.6px;font-size: 20px;color: #55595c;">Videos</h3>
</md-card-title>
...
</md-card>
</div>
</div>
Ts:
this.guideImage = [
{label:"All",value:"all"},
{ label:"Images",value: "img" },
{ label:"Video", value: "video" },
];
this.selectedImage="all";