MatSelectCase

This was forked from NgxMatSelect by alireza-sohrabi with some modifications

SearchBox, infinite Scroll and Mobile View are embedded into Angular Material Select Component.

This library was generated for Angular Material to improve select component (mat-select). In this library, I defined a

directive for which generate Search box and Mobile View.

Extra Features, after use this directive:

• Searchable (Client Side And Server Side)

• Mobile View in two ways ('FullScreen' | 'BottomSheet')

RLT support (use dir='rtl' in html tag)

Compatible with Angular SSR (Universal)

See demo in

stackblitz

Installation Guide

The first step is adding mat-select-case.styles in angular.json

"styles": [

"./node_modules/mat-select-case/src/lib/styles/mat-select-case.styles.css"

],

The second step is adding MatSelectCaseModule into your Module

import {MatSelectModule} from "@angular/material/select";

import {MatSelectCaseModule} from "mat-select-case";

...

@NgModule({

    imports: [

    ...

    MatSelectModule,

    MatSelectCaseModule

    ...

    ]

})

you can define global default configs for root:

MatSelectCaseModule.forRoot({

    maxWidthForMobileView: 600,

    inFirstLoadCallSearcher: true,

    inFirstLoadSearcherValue: '',

    emptyLabel: 'no entry found',

    noMoreResultLabel: 'no more found',

    useInfiniteScroll: false,

    searchBoxPlaceholder: 'please search',

    maximumResultForShow: 40,

    useMobileView: false,

    valueMember: 'key',

    displayMember: 'value',

    mobileViewType: 'FullScreen'

})

or using token (MAT_SELECT_CASE_CONFIGS) in providers:

providers: [

{provide: MAT_SELECT_CASE_CONFIGS, useValue: matSelectCaseConfigs}

],

Samples

Client Side Search (BottomSheet View In Mobile)

Template:

<mat-form-field>

    <mat-select

        matSelectCase

        [hasSearchBox]="true"

        [useMobileView]="true"

        mobileViewType="BottomSheet"

        [(ngModel)]="bankValue"

        [multiple]="false"

        name="bank"

        [required]="true"

        [source]="source"

        [displayMember]="'value'"

        [valueMember]="'key'"

        #sf="matSelectCase"

    >

        <mat-option [value]="option" \*ngFor="let option of sf.filteredSource">

            {{option.value}}

        </mat-option>

    </mat-select>

</mat-form-field>

component.ts:

export class MyComponent implements OnInit {

    bankValue = {key: 50, value: 'Bank_50'};

    source: any[] = [];

    ngOnInit(): void {

        for (let i = 0; i < 100; i++) {
            this.source.push({value: 'Bank_' + i, key: i})
        }

    }

}

Client Side Search ( FullScreen View In Mobile)

Template:

<mat-form-field>

    <mat-select

        matSelectCase

        [hasSearchBox]="true"

        [useMobileView]="true"

        mobileViewType="FullScreen"

        [(ngModel)]="bankValue"

        [multiple]="true"

        name="bank"

        [required]="true"

        [source]="source"

        [displayMember]="'value'"

        [valueMember]="'key'"

        #sf="matSelectCase"

    >

        <mat-option [value]="option" \*ngFor="let option of sf.filteredSource">

            {{option.value}}

        </mat-option>

    </mat-select>

</mat-form-field>

component.ts:

export class MyComponent implements OnInit {

    bankValue = [{key: 10, value: 'Bank_10'},{key: 75, value: 'Bank_75'}];

    source: any[] = [];

    ngOnInit(): void {

        for (let i = 0; i < 100; i++) {

         this.source.push({value: 'Bank\_' + i, key: i})

        }

    }
}

Server Side Search

Template:

<mat-form-field>

    <mat-select

        matSelectCase

        [lazyLoad]="true"

        [searcher]="bankSearcher.bind(this)"

        [hasSearchBox]="true"

        [useMobileView]="true"

        mobileViewType="FullScreen"

        [(ngModel)]="bankValue"

        [multiple]="true"

        name="bank"

        [required]="true"

        [source]="source"

        [displayMember]="'value'"

        [valueMember]="'key'"

        #sf="matSelectCase"
    >

        <mat-option [value]="option" \*ngFor="let option of sf.filteredSource">

         {{option.value}}

        </mat-option>

    </mat-select>

</mat-form-field>

component.ts:

import {Observable} from "rxjs";

import {of} from 'rxjs';

export class MyComponent implements OnInit {

    bankValue = [{key: 10, value: 'Bank_10'},{key: 75, value: 'Bank_75'}];

    source: any[] = [];

    ngOnInit(): void {

        for (let i = 0; i < 100; i++) {

         this.source.push({value: 'Bank\_' + i, key: i})

        }

    }

    // server side mock search by 'of Observable'
    bankSearcher = (search: string, pageNumber: number, pageSize: number): Observable<any[]> => {

        return of(this.source.filter(w => w.value.includes(search)));

    }

}

Input Properties

For better performance (especially in mobile), you must set

maximum record for showing the records

less than value of maxWidthForMobileView,

'mat-select' Will be displayed in 'FullScreen' or

'Bottom Sheet'