I Have 5 material design cards i want apply border style once i clicked on
one card , now it applying to all the cards.
here is my code
people: any[] = [
{
"category": "Manage one",
"imageUrl":"../../assets/img/icon1.png",
"Id":1
},
{
"category": "Manage Two",
"imageUrl":"../../assets/img/icon2.png",
"Id":2
},
{
"category": "Manage 3",
"imageUrl":"../../assets/img/icon3.png",
"Id":3
},
{
"category": "Manage 4",
"imageUrl":"../../assets/img/icon4.png",
"Id":4
},
{
"category": "Manage 4",
"imageUrl":"../../assets/img/icon2.png",
"Id":5
},
];
HTML code
<div *ngFor="let person of people">
<div class="col-2 colm-5 colt-5">
<div class="category">
<md-card class="z-depth" [ngClass]="{'applyBorder': isClassVisible}" (click
)="bookApt(person)">
<div>
<img class="img-responsive center-block category-image" src=
"{{person.imageUrl}}">
</div>
<div class="productcaption">
<h5 class="stress-categories text-center">{{person.category}}</h5>
</div>
</md-card>
</div>
</div>
</div>
If I click on one card border colour have apply on only one clicked card,
right now if click on one card that style is applying to all the cards
help me with this.
CSS:
.applyBorder{
border:2px solid #33AEFF;
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
