class active CSS issue in angular - css

Question

I have separate component of a tile in which i show all the list of data so when i click the tile it should show active class CSS in particular tile but now where ever i click it shows active class in all tiles.
div class="container-fluid" style="margin-top: 12px" *ngIf="!loading">
<div class="container-fluid " *ngIf="!done">
<adm-tile
[heading]='heading'
[orderno]='stock.id'
[time]='stock.created_at'
[category]='stock.request_category.name'
[status_type]='getStatus(stock.status)'
[name]='stock.requester.first_name'
[branch]='stock.to_department.name'
[date]='stock.delivery_date'
[priority]='stock.priority'
[index_no] = 'i'
[data]= 'stock'
[title]="'Requested To'"
[title1] = "'From'"
(selected)="onButton06($event)"
*ngFor="let stock of stock_list ; let i = index" ></adm-tile>
<div class="wrapper-card __list-card --small-card" style="margin-top:-5px" (click)="button01()" [class.active-border-selection]="index_no === selectedIndex1">
<div class="media">
<div class="media-body">
<div class="rowa split" style="position: relative">
<div class="col-6" style="position: relative">
<div >
<div style="height: 19px;overflow: hidden !important;">
<label class=" bold2">{{heading}}</label><span class="bold2">:#{{orderno}} </span>
<span class="bold2 desktop"> - {{your_date | timeAgo}}</span>
</div>
<div style="height: 22px">
<label class="bold3 ">{{category}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
button01() {
this.selectedIndex1 = this.index_no;
}

Answer 1

Based on your question for only one button or card to be active at one time, check below code. You need to set active in the parent component only not in child as all child are independent components.
Parent Component
import { Component } from '#angular/core';
#Component({
selector: 'payroll-search',
template: `
<div *ngFor="let stock of stock_list ; let i = index" >
<hr-files-search
style="position: relative; display:block"
(sendIndex)="getIndex($event)"
[class.active-border-selection]="i == selectedIndex"
[index_no] = 'i'
></hr-files-search>
</div>
`
})
export class PayrollSearchComponent {
stock_list = [1,2,3,4,4,5];
public selectedIndex: number;
public getIndex(event) {
this.selectedIndex = event;
}
}
Child component
import { Component, Input , OnInit, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'hr-files-search',
template: `
<div class="card" (click)="button01(index_no)">
<div class="card-content">
<h6>hello</h6>
</div>
</div>
`
})
export class HrFilesSearchComponent implements OnInit {
#Input() index_no: any;
#Output() sendIndex = new EventEmitter();
ngOnInit() {
}
selectedIndex1;
button01(index) {
this.sendIndex.emit(index);
}
}
Here is the stackblitz solution.