在 angular 中清除按钮作为指令或组件 2-8

Question

我想在我的所有输入中添加一个明确的 icon/button。是否可以将该组件用作具有清除按钮 HTML 的属性，因为该组件将在所有输入上用作属性选择器

基本上我想将以下代码作为指令或组件作为可重用的属性

关

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[appClearInput]',
  templateUrl: './clear-input.component.html',
  styleUrls: ['./clear-input.component.scss'],
})
export class ClearInputComponent implements OnInit {
  @Input() appClearInput: any;
  @Input() inputs: any;
  constructor() {
    // console.log(this.inputs);
  }

  ngOnInit(): void {}

  ngAfterViewInit() {
    setTimeout(() => {
      console.log(this.inputs);
    });
  }

  clearValue() {
    this.inputs.value = '';
  }
}`

//ClearInputComponent HTML
<button 
  mat-button
  matSuffix
  mat-icon-button
  aria-label="Clear"
  (click)="clearValue()"
>
  <mat-icon style="font-size: 18px;">close</mat-icon>
</button>
//Using component as attribute

 <mat-form-field fxFlex [ngClass.gt-xs]="'min-ctrl'">
            <input
              matInput
              type="text"
              placeholder="Invoice No"
              formControlName="invoiceNo"
              #inputpurchaseInvoiceNo
              maxlength="80"
              [appHighlight]="'yellow'"
              [appClearInput]="inputpurchaseInvoiceNo"
                       />

Answer 1

        import {
      Component,
      OnInit,
      Input,
      ElementRef,
      Renderer2,
      ViewChild,
      AfterViewInit,
      HostListener,
    } from '@angular/core';
    
    @Component({
      selector: 'input[type="text"],input[type="password"],input[type="number"],input[type="text"][ngModel]',
      templateUrl: './clear-input.component.html',
      styleUrls: ['./clear-input.component.scss'],
    })
    export class ClearInputComponent implements AfterViewInit {
      constructor(private el: ElementRef, private renderer: Renderer2) {}
    
      ngAfterViewInit() {
        const clearInputBtn = document.getElementById(
          'food-name-val'
        ) as HTMLInputElement;
        this.renderer.appendChild(
          this.el.nativeElement.parentElement,
          clearInputBtn
        );
        this.renderer.listen(clearInputBtn, 'click', () => {
          this.el.nativeElement.value = '';
        });
      }
    
      @HostListener('focus') onFocus() {
        this.el.nativeElement.select();
      }  
    }

<button
      #clearInputBtn
      id="food-name-val"
      mat-button
      matSuffix
      mat-icon-button
      aria-label="Clear"
      class="icon-close"
    >
      <mat-icon style="font-size: 18px;">close</mat-icon>
    </button>