🕛

Multiple Select Filter

TechnologyAngular
Editor of the PageLatif Bahadır ALTUN
aySecici(hepsiMi, ay?) {
		if(hepsiMi){
			this.ayHepsiSelected = !this.ayHepsiSelected;
			if(this.ayHepsiSelected){
				this.aramaKriterGrup.controls.Month.patchValue([...this.aylar.values().map(item => this.aylar.enumName(item)), 0]);
			} else {
				this.aramaKriterGrup.controls.Month.patchValue([]);
			}
		}
		else{
			if(this.ayHepsiSelected){
				this.ayHepsiSelected = false;

				let ar: any[] = [];
				this.aylar.values().forEach(x => {
					if(x != ay && x != this.aylar.enumName(this.aylar.Hepsi)){
						ar.push(this.aylar.enumName(x));
					}
				});

				this.aramaKriterGrup.controls.Month.patchValue(ar);
			} else {
				if(this.aramaKriterGrup.controls.Month.value.length == 12){
					this.aramaKriterGrup.controls.Month.patchValue([...this.aylar.values().map(item => this.aylar.enumName(item)), 0]);
					this.ayHepsiSelected = true;
				}
			}
		}
		this.filtrele();
	}
<mat-form-field class="example-full-width">
	<mat-select
		[formControl]="aramaKriterGrup.controls['Month']" placeholder="Ay" multiple >
		<mat-option *ngFor="let ay of aylar.values()" [value]="aylar.enumName(ay)" (click)="(ay === aylar.enumName(aylar.Hepsi)) ? aySecici(true) : aySecici(false, ay)">
			{{aylar.DisplayNames.get(aylar.enumName(ay))}}
		</mat-option>
	</mat-select>
</mat-form-field>