How do stop adding duplicate chips in an autocomplete component?

How can I stop adding duplicate values in the list using Angular Material chips? So, for example, I want to add Apple only one in the fruits list, and when I add Lemon also I want to add only one. Now I can add multiple times. And when I close the chip I would like to be able to add it again. I would appreciate any help. Thanks!

import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

/**
* @title Chips Autocomplete
*/
@Component({
selector: 'chips-autocomplete-example',
templateUrl: 'chips-autocomplete-example.html',
styleUrls: ['chips-autocomplete-example.css']
})
export class ChipsAutocompleteExample {
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = false;

separatorKeysCodes = [ENTER, COMMA];

fruitCtrl = new FormControl();

filteredFruits: Observable<any[]>;

fruits = [
'Lemon',
];

allFruits = [
'Apple',
'Lemon',
'Lime',
'Orange',
'Strawberry'
];

@ViewChild('fruitInput') fruitInput: ElementRef;

constructor() {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this.filter(fruit) : this.allFruits.slice()));
}

add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;

// Add our fruit
if ((value || '').trim()) {
this.fruits.push(value.trim());
}

// Reset the input value
if (input) {
input.value = '';
}

this.fruitCtrl.setValue(null);
}

remove(fruit: any): void {
const index = this.fruits.indexOf(fruit);

if (index >= 0) {
this.fruits.splice(index, 1);
}
}

filter(name: string) {
return this.allFruits.filter(fruit =>
fruit.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}
}


/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */


<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
/>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{ fruit }}
</mat-option>
</mat-autocomplete>
</mat-form-field>

<!-- Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->

Continue reading...