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 class="d-flex justify-content-center align-items-center vh-100">
<div class="row col-md-4">
<div class="d-flex justify-content-center mt-n5">
<a href="https://logo.ai/" target="_blank"><img
src="./assets/image/logo.png"></a>
</div>
<div class="input-group d-flex align-items-baseline">
<p class="col-12 mb-0 pb-2">loreum ipsum....<a
href="link" target="_blank">loreum</a> ipsum</p>
<input type="url" class="form-control pt-1" id="validationCustomUsername" placeholder="Enter your Target Url"
[(ngModel)]="domainUrl" aria-describedby="inputGroupPrepend" (change)="inputChanged=true" >
<div class="input-group-prepend m-0">
<button type="submit" class="btn btn-primary " (click)="scanDomain()"
[disabled]="(isLoading || ((!domainUrl || !domainUrl.length) &&
!inputChanged) || (isLoading && !inputChanged)) ">{{submitBtntext}}
<i *ngIf="isLoading" class="fa fa-spinner fa-pulse fa-x"></i>
</button>
</div>
</div>
<span *ngIf="this.result" class="pt-2 mt-2">{{ this.result.result}}</span>
</div>
</div>
Thanks.
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" class="form-control pt-1" 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%2Fapp%2Fapp.component.ts