Angular Material Filter

Şirket Adı, Vergi Numarası, Şehir kolonları olan bir list grid için Angular MatTableDataSource kullanarak filtreleme yapma örneğini aşağıdaki adımlardan takip edebilirsiniz.

TANIMLAMALAR

→ Sorguyla gelecek listemizin MatTableDataSource tipinde bir değişkenin datasına eşitlenmesi gerekmektedir. Filtreleme işlemlerinde bu tipin özelliği kullanılacak.

→ gosterilecekKolonlar değişkeni ile html'deki container'larımıza adres veriyoruz.

→ filtreleme için ise ayrı formlar (veya bunu tek bir formGroup kullanarak da yapabiliriz) tutuyoruz. selectBox kullanılacak durumlarda FormGroup ve FormControl bir arada kullanılmaktadır.

→ filterObj objesi filtrelemede köprü görevi gören elemandır.

// ornek-liste.component.ts
@Component({
	selector: 'm-ornek-liste',
	templateUrl: './ornek-liste.component.html',
	styleUrls: ['./ornek-liste.component.scss']
})
export class OrnekListeComponent implements OnInit {
	list: MatTableDataSource<MODEL_ADI> = new MatTableDataSource();
	gosterilecekKolonlar = ['sirket_adi', 'vergi_no', 'sehir'];

	// for filter - start
	filterObj = new MODEL_ADI();

	sirketAdiForm: FormGroup;
	vergiNoForm: FormGroup;
	sehirForm: FormGroup;
	selectSehir = new FormControl();
	// for filter - end
}

FORM OLUŞTURMA

Tanımladığımız formlara filtreleme için bir obje tanımlamalıyız.

// ornek-liste.component.ts
private buildForm() {
		this.sirketAdiForm = this.formBuilder.group({
			sirketAdiFilter: [null]
		});
		this.vergiNoForm = this.formBuilder.group({
			vergiNoFilter: [null]
		});
		this.sehirForm = this.formBuilder.group({
			sehirFilter: [null]
		});
}

NESNEYE ATAMA

Filtreleme için tanımladığımız objeyi aşağıdaki metod içerisinde dolduruyoruz. Devamında listenin bu filtrelemeyi yapması için objeyi JSON'a convert ediyoruz.

// ornek-liste.component.ts
applyFilter(value: any, type: string) {
		switch (type) {
			case 'sirketAdi':
				this.filterObj.sirketAdi = value;
				break;
			case 'vergiNo':
				this.filterObj.vergiNo= value;
				break;
			case 'sehir':
				this.filterObj.sehir= value;
				break;
			default:
				break;
		}
		this.list.filter = JSON.stringify(this.filterObj);
	}

ngOnInit YAPILANDIRMASI

Form'umuzun build edilmesi ve ilk filtreleme konfigürasyonu burada listeye tanımlanıyor. If içerisinde null kontrolleri ve eşitlik kontrolleri string, int ve date tiplerine göre ayrı ayrı yapılabilir.

// ornek-liste.component.ts

ngInInit(){
	// for filter start
		this.buildForm();
		this.list.filterPredicate = (myObject, filter) => {
			let filterObj: MODEL_ADI= JSON.parse(filter);
			if (
				((filterObj.sirketAdi && filterObj.sirketAdi != '')
				 ? myObject.sirketAdi.toLocaleLowerCase().includes(
						filterObj.sirketAdi.toLocaleLowerCase())
				 : true) &&
				((filterObj.vergiNo && filterObj.vergiNo.toString() != '') 
				? myObject.vergiNo.toString().toLocaleLowerCase().includes(
						filterObj.vergiNo.toString().toLocaleLowerCase())
				: true) &&
				((filterObj.sehir && filterObj.sehir != null) 
				? myObject.sehir == filterObj.sehir ) 
				: true)
			) {
				return true;
			} else {
				return false;
			}
		}
		// for filter end
}

HTML Ekleme

Artık oluşturduğumuz metodları çağırmak kaldı. Tüm alanları kullanarak anlık değişime bağlı filtreleme ve temizleme için ng-container kullanarak listeleme yapıp ilgili textbox veya selectbox'ları da buraya eklememiz gerekiyor. Örnek kod aşağıdadır.

// ornek-liste.component.html

<ng-container matColumnDef="sirket_adi">
	<mat-header-cell *matHeaderCellDef>
		<div class="row">
			<div class="col-lg-12" style="text-align: left;">
				Şirket/ <br /> Adı
			</div>
			<div class="col-lg-12">
				<small>
					<form [formGroup]="sirketAdiForm">
						<mat-form-field [style.width.px]="inputWidth">
							<mat-label>Ara</mat-label>
							<input matInput (keyup)="applyFilter($event.target.value, 'sirketAdi')"
								#input formControlName="sirketAdiFilter">
							<button *ngIf="vergiNoForm.dirty" mat-button matSuffix mat-icon-button
								aria-label="Temizle" type="reset" value="Reset"
								(click)="applyFilter('', 'sirketAdi')" name="filter">
								<mat-icon>close</mat-icon>
							</button>
						</mat-form-field>
					</form>
				</small>
			</div>
		</div>
	</mat-header-cell>
	<mat-cell *matCellDef="let element"> {{element.sirketAdi}}</mat-cell>
</ng-container>

<ng-container matColumnDef="vergi_no">
	<mat-header-cell *matHeaderCellDef>
		<div class="row">
			<div class="col-lg-12" style="text-align: left;">
				Vergi / <br /> No
			</div>
			<div class="col-lg-12">
				<small>
					<form [formGroup]="vergiNoForm">
						<mat-form-field [style.width.px]="inputWidth">
							<mat-label>Ara</mat-label>
							<input matInput (keyup)="applyFilter($event.target.value, 'vergiNo')"
								#input formControlName="vergiNoFilter">
							<button *ngIf="vergiNoForm.dirty" mat-button matSuffix mat-icon-button
								aria-label="Temizle" type="reset" value="Reset"
								(click)="applyFilter('', 'vergiNo')" name="filter">
								<mat-icon>close</mat-icon>
							</button>
						</mat-form-field>
					</form>
				</small>
			</div>
		</div>
	</mat-header-cell>
	<mat-cell *matCellDef="let element"> {{element.vergiNo}}</mat-cell>
</ng-container>

<ng-container matColumnDef="sehir">
	<mat-header-cell *matHeaderCellDef>
		<div class="row">
			<div class="col-lg-12" style="text-align: left;">
				Şehir
			</div>
			<div class="col-lg-12">
				<small>
					<form [formGroup]="sehirForm">
						<mat-form-field>
							<mat-label>Ara</mat-label>
							<mat-select formControlName="sehirFilter">
								<mat-option selected value="" (click)="applyFilter('', 'sehir')">
									-
								</mat-option>
								<mat-option value="1" (click)="applyFilter(1, 'sehir')">
									ANKARA
								</mat-option>
								<mat-option value="2" (click)="applyFilter(2, 'sehir')">
									İSTANBUL
								</mat-option>
								<mat-option value="3" (click)="applyFilter(3, 'sehir')">
									İZMİR
								</mat-option>
							</mat-select>
						</mat-form-field>
					</form>
				</small>
			</div>
		</div>
	</mat-header-cell>
	<mat-cell *matCellDef="let element">
		{{sehirler.DisplayNames.get(element.sehir.ad)}}
	</mat-cell>
</ng-container>