Angular 15 compatibility with new and legacy components

[Brachacz]

Hi,

currently this library blocks update to Angular 15 because it expects old version of MatSelectModule.

I'd like to request support for:

• MatLegacySelectModule - changes and effort required to migrate whole styled app to new components would be massive, it's preferable to ease this transition by being able to stay on legacy components for now
• new MatSelectModule - obvious

Cheers!

[fgehmlich]

Hello everyone,

I ran into same issue when I was upgrading to Angular 15. Due to some dependencies I have to use MatLegacySelectModule too. Do you have any updates regarding this issue? Thanks!

[AgustinTommasi]

Installing a temporary Angular CLI versioned 15.1.4 to perform the update. ✔ Packages successfully installed. Using package manager: npm Collecting installed dependencies... Found 45 dependencies. Fetching dependency metadata from registry... Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=4.6.2 <4.9", would install "4.9.5"). Package "ng-mat-select-infinite-scroll" has an incompatible peer dependency to "@angular/material" (requires ">=6.0.0 <15.0.0", would install "15.1.2").

[naciriii]

seems like ng-mat-select-infinite-scroll v 4 doesn't support angular 15 yet npm WARN [email protected] requires a peer of @angular/core@>=6.0.0 <15.0.0 but none is installed. You must install peer dependencies yourself.

[fgehmlich]

I think the issue that @Brachacz reported could be solved by providing a legacy directive for MatLegacySelect. This adjusted directive must import MatLegacySelect instead of MatSelect.

import { AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, takeUntil, tap } from 'rxjs/operators';

/** The height of the select items in `em` units. */
const SELECT_ITEM_HEIGHT_EM = 3;

@Directive({
  selector: '[msLegacyInfiniteScroll]'
})
export class MatLegacySelectInfiniteScrollDirective implements OnInit, OnDestroy, AfterViewInit {...}