Angular Simple Directive ngIf

Question

I do not know how to write my condition in angular and I can not find an equate example.

How i can listen to my material selection ?

How I write a ngIf condition ?

{{referentielToDisplay.speSS}} have a equal value of one of my toppingList, i want to write :

if ReferentielToDisplay. speSS is equal to an item selected in the material selection so: display this card

*ngIf="referentielToDisplay.speSS === topping"

Component.html

<mat-form-field style="width:100%" appearance="outline">
  <mat-label>Sélectionner une spécialité</mat-label>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple="true" >
    <mat-option *ngFor="let topping of toppingList" [value]="topping" >{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

<div  *ngFor="let referentielToDisplay  of referentielsToDisplay | async" >
<mat-card *ngIf="referentielToDisplay.speSS === topping">
{{referentielToDisplay.nomSS}}
</mat-card>
</div>

Component.ts

toppings = new FormControl( );
toppingList: string[] = ['Multi-spécialité','Hématologie', 'Neurologie', 'Urologie', 'Digestif', 'Endocrinologie',  'Pneumologie', 'ORL','Dermatologie', 'Sein-Gynecologie'];

Unclear. what is "my data"? What is "my table"? Where is `topping`defined? Are you asking how to test if toppingList contains referentielToDisplay.speSS? Look at the documentation of array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array — JB Nizet, Jul 19 '18 at 13:42
Aren't "topping" in and
where you are comparing out of scope? Check visibility of "topping" — shrinathM, Jul 19 '18 at 13:50

Julien METRAL · Answer 1 · 2018-07-19T14:28:19.130

0

You can try a indexOf condition :

<mat-card *ngIf="toppingList.indexOf(referentielToDisplay.speSS) > -1">
  {{referentielToDisplay.nomSS}}
</mat-card>

Or

<mat-card *ngIf="toppingList.includes(referentielToDisplay.speSS)">
  {{referentielToDisplay.nomSS}}
</mat-card>

Ìt checks if the list contains your value referentielToDisplay.speSS

edited Jul 19 '18 at 14:28

answered Jul 19 '18 at 13:52

Julien METRAL

1,894
13
30

Thanks i reformulated my question beacause i want *ngIf="{{referentielToDisplay.nomSS}}.indexOf(topping) > -1" but if doesn't work – Newbiiiie Jul 19 '18 at 13:58
Remove those double curly braces. Note that there is an includes method in array: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/includes – JB Nizet Jul 19 '18 at 14:13
it s the same. I think my probleme is the listenning of mat selection – Newbiiiie Jul 19 '18 at 14:15
Your problem is that your question is extremely unclear, and you're not answering questions, nor making it clearer. So it's basically impossible to help you. – JB Nizet Jul 19 '18 at 14:22
Oops sorry that was `toppingList.indexOf(referentielToDisplay.speSS)` – Julien METRAL Jul 19 '18 at 14:27
`toppingList.indexOf(referentielToDisplay.speSS) > 1` checks if toppingList contains `referentielToDisplay.speSS` do you mind ? – Julien METRAL Jul 19 '18 at 14:29
Very strange. With that i have juste only one card displaying and the selected values on form do nothing – Newbiiiie Jul 19 '18 at 14:33
Ah ok, you want to check if `referentielToDisplay.speSS` is equal to the current value of your form control ? – Julien METRAL Jul 19 '18 at 14:46

score 0 · Accepted Answer · answered Jul 19 '18 at 14:44

0

*ngIf="toppings.value.includes(referentielToDisplay.speSS)"

It's not totaly the solution but it is the way !!

answered Jul 19 '18 at 14:44

Newbiiiie

1,401
3
14
33

it's directly `toppings.value && toppings.value === referentielToDisplay.speSS` – Julien METRAL Jul 19 '18 at 14:48
Thank you Julien !! – Newbiiiie Jul 19 '18 at 14:55
Pas de soucis ! ;) – Julien METRAL Jul 19 '18 at 15:00
@JulienMetral Tu es développeur sur angular ? pourrion nous discuter sur le chat ? – Newbiiiie Jul 20 '18 at 09:11

Angular Simple Directive ngIf

2 Answers2