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.

Answer 1

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.