Clear Button as a Directive or a Component in angular 2-8

Question

I want to put a clear icon/button on my all inputs. Is it possible to use the component as an attribute which has clear button HTML as this component will be used on all inputs as an attribute selector

Basically i want to make following code as directive or component as attribute which is reusable

<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value =''"> close

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"
                       />

I believe no need to create a separate component or directive only for clear the field values it should be single method in which you can pass the form control and set value to null on click i.e (click)="clearValues(form.get('fieldName'))" — Kamran Khatti
Thanks for the reply but how would I get X icon on the input field — HAMZA PATEL
Do you need X icon beside input field or inside input field at the right corner? You can create a share component and that component could emit output event on click where you can use emitted event and clear input values. — Kamran Khatti

HAMZA PATEL HAMZA PATEL · Accepted Answer · 2020-08-18T00:26:39

        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>

Clear Button as a Directive or a Component in angular 2-8

1 Answers