-1

How can I remove the duplicates from this ngFor? I'd like to do that on the HTML, not on the component?

<mat-option *ngFor="let primer of dataService.data" [value]="primer.type" id="primer">{{primer.type}}</mat-option>
David Cibin
  • 21
  • 8
  • 1
    Does this answer your question? [In Angular2 \*ngFor iteration, how do I output only unique values from the array?](https://stackoverflow.com/questions/41867448/in-angular2-ngfor-iteration-how-do-i-output-only-unique-values-from-the-array) – Nitheesh Sep 22 '21 at 04:29

1 Answers1

0

Why dont you want to implement the fitering logic in the component? I think it would be the cleanest way to go. For an examle look here: Angular Pipe to Hide Duplicates from Array The solutions is not quite perfect, but it sould give you an idea.

But if you must do it in template, you could create a pipe that filters and just apply it to the data you are iterating over.

WorkingAccount
  • 111
  • 9
  • Yes I could and actually it's how I have at the moment. However the data comes from another component and sometimes I got "undefined" as the data takes a while to populate. For that reason I'd like to know how to do that(if possible) in the ngFor, even if its not the cleanest way. Thanks – David Cibin Sep 22 '21 at 05:25
  • Using an observable you could get rid of the undefined and notify the component about the availiable data. Then you could use the pipe()-Method to filter the duplicates. Using the async pipe you can display the Observable in the template accoridingly. – WorkingAccount Sep 22 '21 at 05:33