PrimeNG with Angular Signals

compontent.ts

type FilterData = {
    dateRange: [DateTime, DateTime];
    paymentType: PaymentTypes;
}

@Component({
    selector: 'app-root',
    template: `
        <form>
            <p-floatlabel variant="on">
                <p-datepicker
                    selectionMode="range"
                    [formField]="$any(filterForm.dateRange)"
                    [showIcon]="true"
                    [showButtonBar]="true"
                    luxonForm
                ></p-datepicker>
                <label>Date Range</label>
            </p-floatlabel>
            <p-floatlabel>
                <p-select
                    [formField]="$any(filterForm.paymentType)"
                    [options]="paymentTypes"
                />
                <label for="paymentType">Payment Type</label>
            </p-floatlabel>    
        </form>
        `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [
        FormField,
        FloatLabelModule,
        DatePickerModule,
        LuxonFormDirective,
        SelectModule,
    ],
})
export class App {

    $filterModel = signal<FilterData>({
        dateRange: [DateTime.now().minus({ weeks: 2 }), DateTime.now()],
        paymentType: 'All',
    });
    filterForm = form(this.$filterModel);
}