Как изменить цвет границы, используя hostlistener и hostbinding?

Question

У меня 3 тега div, и для одного из них я назначил событие click. Мое требование заключается в том, что, когда я нажимаю на элемент div, цвет фона и границы должен измениться на красный.

Прямо сейчас, когда я нажимаю на тег div, цвет границы меняется, но не цвета div элемент но входного элемента, определенного на той же странице. Как это исправить? мой код:

image. html

<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img  id="blah" [src]="url" alt="your image" cdkDrag/>



<div class="box1" (click)="changeColor()" >
    hi
</div>

<div class="box2" >
    hi
</div>
<div class="box3" >
    hi
</div>

и image.ts

@HostBinding('style.border') border: string;
  @HostListener('click')resetColor(){
    this.border=' 5px solid red'
  }

Answer 1

в html:

<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<div [ngStyle]="{ 'border' : (isclicked == true) ? '5px solid red' : 'none' }"
>
  <img  id="blah" [src]="'https://pluralsight2.imgix.net/paths/images/angular-14a0f6532f.png'" alt="your image" cdkDrag/>
  </div>

<div class="box1" (click)="changeColor()" >
    hi
</div>

<div class="box2" >
    hi
</div>
<div class="box3" >
    hi
</div>

в тс:

export class AppComponent {
  name = "Angular 4";
  isclicked = false;
  changeColor() {
    this.isclicked = !this.isclicked;
    console.log(this.isclicked);
  }
}

Вы ожидаете такого поведения?