show table only when using search engine Angular 13

Question

I have implemented a search engine that searches a JSON file. My problem is how do i hide the table until someone actually searches for something?

https://i.stack.imgur.com/poZrt.png

    <div class="container-mt-5">
  <div class="form-group">
    <input
      type="text"
      class="form-control"
      placeholder="Search..."
      [(ngModel)]="filterTerm"
    />
  </div>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Namn</th>
        <th scope="col">Dokument</th>
      </tr>
    </thead>
    <tbody id="t">
      <tr *ngFor="let user of docs | filter: filterTerm">
        <td id="t">{{ user.name }}</td>
        <td id="t">{{ user.subjects.name }}</td>
      </tr>
    </tbody>
  </table>
  
</div>

Bonus question: How do i show the subject object in the second column

{
   "name":"Huvudrubrik 1",
   "isExpanded":false,
   "subjects":[
      {
         "name":"Bio",
         "grade":"A"
      },
      {
         "name":"Chemistry",
         "grade":"A"
      },
      {
         "name":"Physics",
         "grade":"A"
      }
   ]
}

I have tried using ng-if="filterTerm" but i cant seem to get it to work..

Answer 1

Have you tried using *ngIf="filterTerm.lenght > 0"?

<table *ngIf="filterTerm.lenght > 0" class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Namn</th>
        <th scope="col">Dokument</th>
      </tr>
    </thead>
    <tbody id="t">
      <tr *ngFor="let user of docs | filter: filterTerm">
        <td id="t">{{ user.name }}</td>
        <td id="t">{{ user.subjects.name }}</td>
      </tr>
    </tbody>
  </table>