CODEWITHSUNDEEP
angularngfor
jozofe
jozofe

Reputation: 79

How to filter options in ngfor

I'm creating an app in Angular2+. I have a page where a person can give a person a quality (see picture below). I'm doing a ngFor on a list of competences to create a compentence and a select menu where you can select a team member for a compentence.

And then for each competence I'm doing a ngFor in options to get each team member.

Here is my code:

HTML:

<div class="row" *ngFor="let competence of competences_list">
    <div class="col-7">
        <div class="competence">{{competence}}</div>
    </div>
    <div class="col-5">
        <!-- Form control -->
        <select class="form-control select-competence" #name (change)="changeList($event , name.value, name.id)" id="{{competence}}">
            <option value="" selected disabled hidden></option>
            <option *ngFor="let member of team_list2" value="{{member.name}}">{{member.name}}</option>
            <option value=""></option>
        </select>
    </div>
</div>

Typescript:

    this.competences_list = ['Zelfstandigheid', 'Creativiteit', 'Flexibiliteit',
        'Dominantie', 'Prestatiegerichtheid', 'Netwerken', 'Durf initiatief te nemen',
        'Reflecteren', 'Zelfkennis'];

    this.team_list2 = [
        { name: 'user1', chosen: false },
        { name: 'user2', chosen: false },
        { name: 'user3', chosen: false }
    ];

The problem is that I want to filter these values based on previous selection. So if I choose for the first competence "user1", "user1" must not be shown in the option list of second competence. The problem here is the two-way binding. I've tried to use a pipe, but it updates all the options fields.

So, if chosen == true --> don't show it in the options field. But using *ngIf will update all the options fields.

How can I achieve this?

Upvotes: 1

Views: 1646

Answers (1)

dquijada
dquijada

Reputation: 1699

I would say the solution is using *ngIf.

As can be seen on the Angular documentation you can use ng-container:

<ng-container *ngFor="let h of heroes">
  <ng-container *ngIf="showSad || h.emotion !== 'sad'">
    <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
  </ng-container>
</ng-container>

To adapt this to your code:

<select class="form-control select-competence" #name (change)="changeList($event , name.value, name.id)" id="{{competence}}">
    <option value="" selected disabled hidden></option>
    <ng-container *ngFor="let member of team_list2">
        <ng-container *ngIf="!member.chosen">
            <option value="{{member.name}}">{{member.name}}</option>
        </ng-container>
    </ng-container>
    <option value=""></option>
</select>

However, this has one issue: it will delete your option from the competence where you selected it. How can this be soled? Easy: check if it's chosen AND if it's chosen for the current competency.

(since I haven't seen all your code, I will imagine a function that returns the competency assigned to your member, you can most likely easily adapt it)

<select class="form-control select-competence" #name (change)="changeList($event , name.value, name.id)" id="{{competence}}">
    <option value="" selected disabled hidden></option>
    <ng-container *ngFor="let member of team_list2">
        <ng-container *ngIf="!member.chosen || member.name === getAssignedMember(competency)">
            <option value="{{member.name}}">{{member.name}}</option>
        </ng-container>
    </ng-container>
    <option value=""></option>
</select>

Any further questions: don't hesitate to add them in comments.

Upvotes: 1

Related Questions