File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
filterChanged
|
Type : EventEmitter
|
|
|
Methods
|
generateForm
|
generateForm()
|
|
|
|
|
|
inputChange
|
inputChange()
|
|
|
|
|
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
import * as _ from "lodash-es";
@Component({
selector: "app-pd-filters",
templateUrl: "./pd-filters.component.html",
styleUrls:["./pd-filters.component.scss"]
})
export class PdFiltersComponent implements OnInit {
@Input() pdFilter: any;
@Output() filterChanged = new EventEmitter();
pdFiltersFormGroup: UntypedFormGroup;
constructor(public fb: UntypedFormBuilder) {}
ngOnInit(): void {
this.generateForm();
}
generateForm() {
this.pdFiltersFormGroup = this.fb.group({});
this.pdFiltersFormGroup.addControl(
_.get(this.pdFilter, "reference"),
this.fb.control(this.pdFilter?.defaultValue ? this.pdFilter.defaultValue:"")
);
}
inputChange() {
const dataToBeEmitted = {
data:this.pdFiltersFormGroup.value,
controlType:this.pdFilter.controlType
}
this.filterChanged.emit(dataToBeEmitted);
}
}
<form class="d-flex flex-dr" [formGroup]="pdFiltersFormGroup">
<div class="d-flex flex-dc">
<label>{{ pdFilter.label }}</label>
<ng-container *ngIf="pdFilter.controlType === 'number'">
<mat-form-field
appearance="fill"
class="sb-mat__dropdown custom_mat_dd"
>
<input
matInput
type="number"
[formControlName]="pdFilter.reference"
(input)="inputChange()"
/>
</mat-form-field>
</ng-container>
<ng-container *ngIf="pdFilter.controlType === 'multi-select'">
<mat-form-field
appearance="fill"
class="sb-mat__dropdown"
>
<mat-select (selectionChange)="inputChange()" multiple [formControlName]="pdFilter.reference" [placeholder]="pdFilter.placeholder" >
<mat-option class="mat-dropdown__options" role="option" *ngFor="let option of pdFilter.options" [value]="option"
attr.aria-label="{{option}}" class="custom_mat_multi">{{option | lowercase | titlecase}}</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</form>
::ng-deep{
.custom_mat_multi.mat-option{
display: flex !important;
}
}
Legend
Html element with directive