Restrict the display of a table on angular 4

Question

please can someone help me to control the display of my table? I explain myself... here is my code:

    <div class="table-responsive">
            <table class="table table-hover" id="customers">
                <thead>
                    <tr>
                        <th>Client N°</th>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>Adresse</th>
                        <th>Date de Naissance</th>
                        <th>Téléphone</th>
                        <th>Ajoute Par</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let c of clients" class="table-active" style="cursor: pointer;">
                        <td>{{c.id}}</td>
                        <td>{{c.nom}}</td>
                        <td>{{c.prenom}}</td>
                        <td>{{c.adresse}}</td>
                        <td>{{c.date_naissance}}</td>
                        <td>{{c.portable}}</td>
                        <td>{{c.user_id}}</td>
...

this code allows me to display all my clients from the database. But i want to display now every clients whose user_id equals 1 for example.

Hoping i have made myself clear, can someone please tell if it is possible in angular 4 HTML? if it is, please can you tell me how? i think i'm gonna use like NgIf but i'm not sure.

Thanks in advance.

Possible duplicate of [How to apply filters to \*ngFor](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) — CornelC, May 14 '18 at 11:21

Anshuman Jaiswal · Accepted Answer · 2018-05-14T11:29:55.880

0

in HTML

<tbody>
    <tr *ngFor="let c of filteredClients" class="table-active" style="cursor: pointer;">

...

in TS

filteredClients: any[];
clients: any[];

getClients() {
    this.service.getCLients().subscribe(res => {
        this.clients = res;
        this.filteredClients = clients.filter(client => client.id == 1);    
        // this could be used for further filtering, suppose you have an input to filter other things as well.
    });
}

You can also use *ngIf as you mentioned but better to control data from TS.

edited May 14 '18 at 11:29

answered May 14 '18 at 11:23

Anshuman Jaiswal

5,352
1
29
46

@BaNRoOt glad to hear that :) – Anshuman Jaiswal May 14 '18 at 15:58

score 0 · Answer 2 · answered May 14 '18 at 11:26

Try this:

     <tbody>
        <ng-template *ngFor="let c of clients">
            <tr class="table-active" style="cursor: pointer;" *ngIf="c.user_id==1">
                <td>{{c.id}}</td>
                <td>{{c.nom}}</td>
                <td>{{c.prenom}}</td>
                <td>{{c.adresse}}</td>
                <td>{{c.date_naissance}}</td>
                <td>{{c.portable}}</td>
                <td>{{c.user_id}}</td>
            </tr>
        </ng-template>
    </tbody>

score 0 · Answer 3 · answered May 14 '18 at 11:35

Hey I think you can simplify your code using ng-repeat

<tr  ng-repeat="c in clients|filter:{c.id:1}" class="table-active" style="cursor: pointer;">
                        <td>{{c.id}}</td>
                        <td>{{c.nom}}</td>
                        <td>{{c.prenom}}</td>
                        <td>{{c.adresse}}</td>
                        <td>{{c.date_naissance}}</td>
                        <td>{{c.portable}}</td>
                        <td>{{c.user_id}}</td>
</tr

Restrict the display of a table on angular 4

3 Answers3