I need to clear the result data in Angular-CodePudding

In this i am showing the result below the input field after clicking the scan button. Now i need to clear the result when i clear the domainUrl(which is in input field).

app.component.html:

 <div >

  <div >
  <div >
  <a href="https://logo.ai/" target="_blank"><img 
   src="./assets/image/logo.png"></a>
  </div>
  <div >
  <p >loreum ipsum....<a 
   href="link" target="_blank">loreum</a> ipsum</p>

  <input type="url"  id="validationCustomUsername" placeholder="Enter your Target Url"
       [(ngModel)]="domainUrl"  aria-describedby="inputGroupPrepend" (change)="inputChanged=true" >
<div >
  <button type="submit"  (click)="scanDomain()"
          [disabled]="(isLoading || ((!domainUrl || !domainUrl.length) && 
   !inputChanged) || (isLoading && !inputChanged)) ">{{submitBtntext}}
     <i *ngIf="isLoading"  ></i>

  </button>
   </div>
  </div>

  <span *ngIf="this.result" >{{ this.result.result}}</span>
 </div>

  </div>

Thanks.

CodePudding user response：

You can introduce a new onChange method that is invoked on keyup event and clears the this.result variable when the this.domainUrl is empty or null.

Your markup would look as follows:

  <input type="url"  id="validationCustomUsername" placeholder="Enter your Target Url"
       [(ngModel)]="domainUrl"  aria-describedby="inputGroupPrepend" (change)="onChange()" (keyup)="onChange()" >

Typescript addition:

  onChange(): void {
    this.inputChanged = true;
    if (!this.domainUrl) {
      this.result = {};
    }
  }

Working example: https://stackblitz.com/edit/angular-ivy-v2qsr5?file=src/app/app.component.ts