CODEWITHSUNDEEP
angular8ng-zorro-antd
JK Ainz
JK Ainz

Reputation: 35

How to connect/link input with Ng Zorro Table (Create search table)

I wish to create a search feature in my NG ZORRO table by linking/connect nz-input with nz-table. Is is possible to do so? Or is there any other methods to do so? 

<uic-page>
<p>user-details works!</p>
<nz-input-group [nzSuffix]="suffixIconSearch">
  <input type="text" nz-input placeholder="input search text" />
</nz-input-group>
<ng-template #suffixIconSearch>
  <i nz-icon nzType="search"></i>
</ng-template>

<nz-table #basicTable [nzData]="listOfData">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{ data.name }}</td>
      <td>{{ data.age }}</td>
      <td>{{ data.address }}</td>
      <td>
        <a>Action 一 {{ data.name }}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>

enter image description here

Thanks.

Upvotes: 0

Views: 2332

Answers (1)

Suhaib Abu shawesh
Suhaib Abu shawesh

Reputation: 150

This should work fine

Just make an event on the input and change the data based on that also make sure you make copy of the data (if the search is client-side) to avoid lose the data

Upvotes: 2

Related Questions