Как изменить значок поиска, когда пользователь начинает вводить Angular - PullRequest
Новая
       19

Как изменить значок поиска, когда пользователь начинает вводить Angular

0 голосов
/ 09 апреля 2020

У меня есть 2 SVG-иконки в папке с активами, и у меня есть поле ввода пользователя в HTML. Я хочу, чтобы первый значок отображался по умолчанию, но когда пользователь начинает вводить текстовое поле, я хочу, чтобы отображался второй значок. Я с трудом пытаюсь это реализовать.

Есть такой же значок поиска, но первый значок просто белый, а второй значок чирок.

Значок по умолчанию = search-magnifying-glass-icon.

Измените это, когда пользователь начнет печатать = search-magnifying-glass-teal-icon.

Я не уверен, что нет изменить цвет обводки значка SVG напрямую, вместо двух значков в папке ресурсов, но это код на данный момент.

HTML 

        <mat-form-field appearance="fill" style="width: 380px;" >
           <input matInput [formControl]="inputCtrl" [(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)"
            placeholder="Search" class="input">
           <div class="icon"><img src="../../assets//images/icons/search-magnifying-glass-icon.svg"></div>
        </mat-form-field>

Некоторые TS 

  ngOnInit(): void {
    this._filterTags();

    this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this._filterTags(value);
        this.updateQuery(value);
        if(value == ''){
          this.showColumn = false;

        }else{
          this.showColumn = true;
        }
      });

enter image description here

1 Ответ

1 голос
/ 09 апреля 2020

В html u измените элемент значка на параметр 

 <div class="icon"><img [src]="icon"></div>

, затем в компоненте создайте переменную значка 

icon="../../assets/images/icons/search-magnifying-glass-icon.svg"

, затем в своем коде 

 this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this._filterTags(value);
        this.updateQuery(value);
        if(value == ''){
          this.showColumn = false;
          this.icon="../../assets/images/icons/search-magnifying-glass-icon.svg"
        }else{
          this.showColumn = true;
          this.icon="../../assets/images/icons/search-magnifying-glass-teal-icon"
        }
      });
...