Управление классами с прослушивателями событий в Angular

Question

Я пытаюсь создать приложение поиска github с API GitHub, и у меня есть проблемы с манипуляциями. Мне нужно, чтобы когда пользователь что-то вводил в строке поиска, контейнер div должен быть удален со страницы. Я знаю, как это сделать с html и javascript, но я новичок в Angular. Я прочитал документацию и просмотрел несколько руководств, но не мог понять, как это сделать.

home.component. html:

<input type="text" [(ngModel)]="profile" (keyup)="findProfile()" placeholder="Enter the username..." class="input">
<div style="background-color: lightslategrey;">
  <ng-template [ngIf]="profile !== '' && user">
    <img [src]="user.avatar_url" alt="" class="userAvatar">
    <p>Username: {{user.login}}</p>
    <p>Location: {{user.location}}</p>
    <p>E-mail: {{user.email}}</p>
    <p>Blog Link: {{user.blog}}</p>
    <p>Member Since: {{user.created_at}}</p>
    <button [routerLink]="['', user.login.toLowerCase(), user.id ]" class="viewProfileButton">View Profile</button><br>
    <button (click)="localStorage()" class="viewProfileButton">Add to Favorite</button>
  </ng-template>
</div>

<div style="background-color: red;"  >
  <ng-template [ngIf]="displayData !== undefined && displayData">
      <button (click)="consoleLog()">consoleLog</button>
    <p>Username: {{displayData.login}}</p>
    <p>Location: {{displayData.location}}</p>
    <button (click)="removeLocal()" class="viewProfileButton">Remove Favorite</button>
  </ng-template>
</div>
<button (click)="consoleLog()" class="viewProfileButton">Console Log</button>
<router-outlet></router-outlet>

Answer 1

Попробуйте это

html

<input type="text" [(ngModel)]="profile" (ngModelChange)="detectChange($event)" (keyup)="findProfile()" placeholder="Enter the username..." class="input">


<div *ngIf="closeDiv" style="background-color: red;">
   //your code
</div>

ts

closeDiv: boolean = true;



detectChange(ev: any) {
    if(ev.length > 0){
        this.closeDiv = false;               
    }else {
       this.closeDiv = true;
    }
}