how change style value of previous element - html

Question

i have elements and when click down with the mouse the color of text changing from black to red
my problem is that i want when i click an another element so this elemnt changing to red and the previous element return to be black
#Directive({
selector: '[appSelect]'
})
export class SelectDirective implements OnInit {
constructor(private elRef: ElementRef, private renderer: Renderer2) {
}
ngOnInit() {
}
#HostListener('mousedown') onmousedown() {
if (this.elRef.nativeElement.style.color !== 'red') {
this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');
} else {
this.renderer.setStyle(this.elRef.nativeElement, 'color', 'black');
}

Answer 1

Using a directive to change style is using a sledgehammer to crack a nut. But you can do adding a Output to your directive.
In general -without directive- we can do some like
<div *ngFor="let item of [0,1,2,3,4];let i=index"
[style.color]="selectedIndex==i?'red':'black'"
(click)="selectedIndex=i" >
click me
</div>
when we has defined a variable like
selectedIndex:number=-1;
If you want use a directive we can do some similar. We defined a variable like
control:any={}
And we write some like
<div *ngFor="let item of [0,1,2,3,4]"
[appSelect]="control"
(onSelect)="control=$event" >
click me
</div>
Where our directive is
export class SelectDirective implements AfterViewChecked {
#Input('appSelect') control;
#Output() onSelect:EventEmitter<any> = new EventEmitter<any>();
constructor(private elRef: ElementRef, private renderer: Renderer2) {
}
ngAfterViewChecked() {
if (this.elRef.nativeElement==this.control)
this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');
else
this.renderer.setStyle(this.elRef.nativeElement, 'color', 'black');
}
#HostListener('mousedown') onmousedown() {
this.onSelect.emit(this.elRef.nativeElement);
}
}
See that we change the color in the event AfterViewChecked. You can see the result of both solutions in the stackblitz