hide a div when entered value in input field is deleted in angular

Question

I am populating book title after entering book number and clicking outside the field . It is working fine but when the user deletes the already entered value i want to hide that div, on change function doesn't seem to work. And also search button will be enabled only if both input field has value and title is displayed. Can someone help me .

component:

export class AppComponent  {
  searchMoviesCtrl = new FormControl();
  filteredMovies: any;
  isLoading = false;
  errorMsg: string;
  title:string;
  showFlag:boolean = false;

  constructor(
    private http: HttpClient
  ) { }

  getBookDetail(){
 
    this.title ="Harry Poter";
    this.showFlag = true;

  }
}

html

<div>
    <form>
    <mat-form-field>
        <input matInput placeholder="BookNumber" #bookNumber (focusout)=getBookDetail()>
      </mat-form-field>
  
    <div *ngIf= showFlag> book {{title}}</div>
</form>
  
<button mat-raised-button color="primary" [disabled] = "!bookNumber.value || !showFlag">Search Book</button>
  </div>

Answer 1

Actually, there's two ways to achieve your purpose. The two distincts DOM renderings, choose what actually fits your demand.

1. Hide your div (visibility: hidden CSS attribute) but keep the div rendered in the HTML page flow.

component.ts

showFlag = true;

component.html

<div [style.visibility]="!showFlag ? 'hidden' : 'visible'"> book {{title}}</div>

2. Remove your div (display: none CSS attribute) and remove it from your HTML page flow.

component.ts

showFlag = true;

component.html

<div [style.display]="!showFlag ? 'none' : 'block'"> book {{title}}</div>

Enabling and disabling your button:

component.ts

disableSubmitButton = true;
bookNumber: string;

checkSubmitButton() {
  if (this.bookNumber.toString().length > 0 && showFlag === false) {
    this.disableSubmitButton = false;
  } else {
    this.disableSubmitButton = true;
  }
}

component.html

<input matInput placeholder="BookNumber" #bookNumber (focusout)=getBookDetail() [(ngModel)]="buttonNumber" 
(ngModelChange)="checkSubmitButton()">

<button mat-raised-button color="primary" [disabled]="disableSubmitButton">Search Book</button>