Welcome to Qi-U Community for programmer and developer-Open, Learning and Share

Categories

0 votes
502 views
in Technique[技术] by (31.9m points)

sass - Place icon inside search field as a button in Angular

I am trying to place the "search_icon" magnifying glass inside of the search field and code it as a button. This is what I have: enter image description here

This is what I am going for, but I need to make the icon clickable, and this is if it is written inside of the scss file.

enter image description here

Here is my HTML:

      <input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
      #filterTextInput
      id="filter-text-input"
      class="search-box"
      type="text"
      [value]="itemFilterText$ | async"
      autocomplete="off"
      placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
      attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
      (keyup.enter)="searchForValue(searchString.value)" />
      <mat-icon svgIcon="search_icon"></mat-icon>

Any suggestions?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (31.9m points)

you can do that with some custom CSS styles for the click event, you can simply use the (click) event: HTML

<input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
      #filterTextInput
      id="filter-text-input"
      class="search-box"
      type="text"
      [value]="itemFilterText$ | async"
      autocomplete="off"
      placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
      attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
      (keyup.enter)="searchForValue(searchString.value)" />
      <mat-icon (click)="doSomething()" svgIcon="search_icon" class="search-icon"></mat-icon>

CSS

.search-icon {
  position: relative;
  right: 32px;
  top:8px;
  width: 24px;
  height:24px;
  font-size: 24px;
  cursor: pointer;
}

Inside your componenet

doSomething() {
    console.log("I am doing something!");
  }

See this working demo

But that's the ugly way of doing it, since you are already using angular material, it is better to stick to the material design guidelines. In your case you are using forms so it would be better to use something like this to align your inputs/icons

<mat-form-field>
  <mat-icon matPrefix (click)="doSomething()">search</mat-icon>
  <input matInput type="search" 
   *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
   #filterTextInput
   id="filter-text-input"
   class="search-input"
   [value]="itemFilterText$ | async"
   autocomplete="off"
   placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
   attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
   (keyup.enter)="searchForValue(searchString.value)"
  >
</mat-form-field>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Qi-U Community for programmer and developer-Open, Learning and Share

755k questions

547k answers

4 comments

86.4k users

...