[CHALET.TS]

HideListeChalet()
{
  for (let i = 1; i < 6; i++) {
    document.getElementById("c"+i).style.display='none';
  }
}

AfficherListeChalet(categorie)
{
  this.HideListeChalet();
  if(categorie == 'montagne')
  document.getElementById('c1').style.display='flex';
  else if(categorie == 'eau')
  document.getElementById('c2').style.display='flex';
  else if(categorie == 'campagne')
  document.getElementById('c3').style.display='flex';
  else if(categorie == 'ski')
  document.getElementById('c4').style.display='flex';
  else if(categorie == 'detente')
  document.getElementById('c5').style.display='flex';
}

[HTML]

<h1>LISTE DE CHALETS...</h1>

                <div id="pref_slide_show">
                    <div (click)='AfficherListeChalet("montagne")' id="pref_montagne_1" class="pref" ><div>EN MONTAGNE</div></div>
                    <div (click)='AfficherListeChalet("eau")' id="pref_eau_2" class="pref" ><div>AU BORD DE L'EAU</div></div>
                    <div (click)='AfficherListeChalet("campagne")' id="pref_campagne_3" class="pref"><div>EN CAMPAGNE</div></div>
                    <div (click)='AfficherListeChalet("ski")' id="pref_ski_4" class="pref"><div>POUR LE SKI</div></div>
                    <div (click)='AfficherListeChalet("detente")'id="pref_detente_5" class="pref"><div>POUR LA DÉTENTE</div></div>
                    <div style="display: flex;flex-direction: row;">
                        <div id="c1" style="display: flex;flex-direction: column;width: 20%; display:none">
                            <p *ngFor="let item of items | async">Nom : {{item.nom}} <br>Ville : {{item.ville}} <br>Région : {{item.region}} <br>Province : {{item.province}} <br>Pays : {{item.pays}}  <br>Prix : {{item.prixMaxSemaine}}$ <br>Personnes : {{item.personnes}} <br>Salles de bain : {{item.sallesDeBain}} <br> Animaux : {{item.animaux==="true"? 'Oui' : 'Non'}} <br>Chambres : {{item.chambres}} <br>Foyer : {{item.foyer==="true"? 'Oui' : 'Non'}} <br>Internet : {{item.internet==="true"? 'Oui' : 'Non'}} <br>Description : {{item.description}}</p></div>
                        <div id="c2" style="display: flex;flex-direction: column;width: 20%;display:none">
                            <p *ngFor="let item of items2 | async">Nom : {{item.nom}} <br>Ville : {{item.ville}} <br>Région : {{item.region}} <br>Province : {{item.province}} <br>Pays : {{item.pays}}  <br>Prix : {{item.prixMaxSemaine}}$ <br>Personnes : {{item.personnes}} <br>Salles de bain : {{item.sallesDeBain}} <br> Animaux : {{item.animaux==="true"? 'Oui' : 'Non'}} <br>Chambres : {{item.chambres}} <br>Foyer : {{item.foyer==="true"? 'Oui' : 'Non'}} <br>Internet : {{item.internet==="true"? 'Oui' : 'Non'}} <br>Description : {{item.description}}</p></div>
                        <div id="c3" style="display: flex;flex-direction: column;width: 20%;display:none">
                            <p *ngFor="let item of items3 | async">Nom : {{item.nom}} <br>Ville : {{item.ville}} <br>Région : {{item.region}} <br>Province : {{item.province}} <br>Pays : {{item.pays}}  <br>Prix : {{item.prixMaxSemaine}}$ <br>Personnes : {{item.personnes}} <br>Salles de bain : {{item.sallesDeBain}} <br> Animaux : {{item.animaux==="true"? 'Oui' : 'Non'}} <br>Chambres : {{item.chambres}} <br>Foyer : {{item.foyer==="true"? 'Oui' : 'Non'}} <br>Internet : {{item.internet==="true"? 'Oui' : 'Non'}} <br>Description : {{item.description}}</p></div>
                        <div id="c4" style="display: flex;flex-direction: column;width: 20%;display:none">
                            <p *ngFor="let item of items4 | async">Nom : {{item.nom}} <br>Ville : {{item.ville}} <br>Région : {{item.region}} <br>Province : {{item.province}} <br>Pays : {{item.pays}}  <br>Prix : {{item.prixMaxSemaine}}$ <br>Personnes : {{item.personnes}} <br>Salles de bain : {{item.sallesDeBain}} <br> Animaux : {{item.animaux==="true"? 'Oui' : 'Non'}} <br>Chambres : {{item.chambres}} <br>Foyer : {{item.foyer==="true"? 'Oui' : 'Non'}} <br>Internet : {{item.internet==="true"? 'Oui' : 'Non'}} <br>Description : {{item.description}}</p></div>
                        <div id="c5" style="display: flex;flex-direction: column;width: 20%;display:none">
                            <p *ngFor="let item of items5 | async">Nom : {{item.nom}} <br>Ville : {{item.ville}} <br>Région : {{item.region}} <br>Province : {{item.province}} <br>Pays : {{item.pays}}  <br>Prix : {{item.prixMaxSemaine}}$ <br>Personnes : {{item.personnes}} <br>Salles de bain : {{item.sallesDeBain}} <br> Animaux : {{item.animaux==="true"? 'Oui' : 'Non'}} <br>Chambres : {{item.chambres}} <br>Foyer : {{item.foyer==="true"? 'Oui' : 'Non'}} <br>Internet : {{item.internet==="true"? 'Oui' : 'Non'}} <br>Description : {{item.description}}</p></div>
                    </div>
                </div>