feat: update using signal API -> input, computed, output, viewChild (ng-select#2584)

* feat(signals-migration): Ran migration command for input output and inject

* feat(signals-migration): Assignment issues are addressed

* feat(signals-migration): Unit tests are update to modify properties

* chore(signals-migration): Remove unwanted constructors

* test(signals-migration): Fixed unit test cases

* test(signals-migration): fix more ng-select component tests

* test(signals-migration): fixed 4 more tests

* test(signals-migration): fixed 1 more test

* test(signals-migration): added conditional evaluation of signal value

* test(signals-migration): generic value evaluation function

* test(signals-migration): solved the ng-option component test issue

* test(signals-migration): solved 2 more tests

* test(signals-migration): fixed one more tests

* test(signals-migration): migrate view queries

* test(signals-migration): moved clearSearchOnAdd from Input to input signal

* test(signals-migration): converted compareWith to input signal

* test(signals-migration): created deselectOnClickValue computed value

* test(signals-migration): _disabled to signal to remove cd manual run

* test(signals-migration): composition start tests addressed

* test(signals-migration): remaining test address

* test(signals-migration): convert items @input to use input signal

* chore(signals-migration): migration of ContentChildren with contentChildren signal

* test(signals-migration): NgOptionHighlightDirective test resolved

* chore(signals-migration): small chore work

* chore(signals-migration): toString inside a brackets

* chore(signals-migration): update 1st update after label update

* Update src/ng-select/lib/items-list.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/ng-select/lib/ng-dropdown-panel.component.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore(signals-migration): updated code based on copilot suggestions

* Update src/ng-select/lib/ng-select.component.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore(signals-migration): read compareWith() input

* chore(signals-migration): used direct signal reference instead of using extra variable

* test(signals-migration): declare event object which wasn't defined

---------

Co-authored-by: Pavan Kumar Jadda <17564080+pavankjadda@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

package.json

@@ -1,6 +1,7 @@
 {
   "repository": "ng-select/ng-select",
   "scripts": {
+    "ng": "ng",
     "build": "ng build ng-select && ng build ng-option-highlight && yarn build:themes && yarn copy-sass",
     "build:demo": "ng build demo --configuration production && yarn copy-examples",
     "build:themes": "sass --style=compressed src/ng-select/themes/:dist/ng-select/themes",

src/demo/app/app.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { filter, map, mergeMap } from 'rxjs/operators';
@@ -13,19 +13,19 @@ import { LayoutSidenavComponent } from './layout/sidenav-component';
 	changeDetection: ChangeDetectionStrategy.Default,
 	imports: [LayoutHeaderComponent, LayoutSidenavComponent, RouterOutlet],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+	private router = inject(Router);
+	private activatedRoute = inject(ActivatedRoute);
+	private titleService = inject(Title);
+	private config = inject(NgSelectConfig);
+
 	title: string;
 	version: string = window['ngSelectVersion'];
 	exampleSourceUrl: string;
 	dir: 'ltr' | 'rtl' = 'ltr';
 	theme: 'default' | 'ant' | 'material' = 'default';
 
-	constructor(
-		private router: Router,
-		private activatedRoute: ActivatedRoute,
-		private titleService: Title,
-		private config: NgSelectConfig,
-	) {
+	constructor() {
 		this.config.placeholder = 'Select item';
 		// This could be useful if you want to use appendTo in entire application without explicitly defining it. (eg: appendTo = 'body')
 		this.config.appendTo = null;

src/demo/app/examples/append-to-example/append-to-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { DataService } from '../data.service';
 import { FormsModule } from '@angular/forms';
 import { AsyncPipe } from '@angular/common';
@@ -11,13 +11,13 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 	imports: [NgSelectComponent, FormsModule, AsyncPipe],
 })
 export class AppendToExampleComponent implements OnInit {
+	private dataService = inject(DataService);
+
 	people: any = [];
 	selected: any;
 	selected2: any;
 	selected3: any;
 
-	constructor(private dataService: DataService) {}
-
 	ngOnInit() {
 		this.people = this.dataService.getPeople();
 	}

src/demo/app/examples/data-source-array-example/data-source-array-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { DataService, Person } from '../data.service';
 import { FormsModule } from '@angular/forms';
 import { NgSelectComponent } from '@ng-select/ng-select';
@@ -10,14 +10,14 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 	imports: [NgSelectComponent, FormsModule],
 })
 export class DataSourceArrayExampleComponent implements OnInit {
+	private dataService = inject(DataService);
+
 	people: Person[] = [];
 	selectedPersonId = '5a15b13c36e7a7f00cf0d7cb';
 
 	selectedSimpleItem = 'Two';
 	simpleItems = [];
 
-	constructor(private dataService: DataService) {}
-
 	ngOnInit() {
 		this.dataService.getPeople().subscribe((items) => (this.people = items));
 		this.simpleItems = [true, 'Two', 3];

src/demo/app/examples/data-source-backend-example/data-source-backend-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { DataService, Person } from '../data.service';
 import { Observable } from 'rxjs';
 import { FormsModule } from '@angular/forms';
@@ -12,11 +12,11 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 	imports: [NgSelectComponent, FormsModule, AsyncPipe],
 })
 export class DataSourceBackendExampleComponent implements OnInit {
+	private dataService = inject(DataService);
+
 	people$: Observable<Person[]>;
 	selectedPersonId = '5a15b13c36e7a7f00cf0d7cb';
 
-	constructor(private dataService: DataService) {}
-
 	ngOnInit() {
 		this.people$ = this.dataService.getPeople();
 	}

src/demo/app/examples/data.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { delay, map, tap } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
@@ -19,9 +19,9 @@ export interface Person {
 	providedIn: 'root',
 })
 export class DataService {
-	private _gitHubAccountsCache = new Map<string, []>();
+	private http = inject(HttpClient);
 
-	constructor(private http: HttpClient) {}
+	private _gitHubAccountsCache = new Map<string, []>();
 
 	getGithubAccounts(term: string = null) {
 		if (this._gitHubAccountsCache.has(term)) {

src/demo/app/examples/forms-async-data-example/forms-async-data-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgOptionTemplateDirective, NgSelectComponent, NgSelectComponent as NgSelectComponent_1 } from '@ng-select/ng-select';
 import { delay } from 'rxjs/operators';
@@ -12,15 +12,13 @@ import { NgOptionHighlightDirective } from '@ng-select/ng-option-highlight';
 	imports: [FormsModule, ReactiveFormsModule, NgSelectComponent_1, NgOptionTemplateDirective, NgOptionHighlightDirective],
 })
 export class FormsAsyncDataExampleComponent implements OnInit {
+	private fb = inject(FormBuilder);
+	private dataService = inject(DataService);
+
 	heroForm: FormGroup;
 	albums = [];
 	allAlbums = [];
 
-	constructor(
-		private fb: FormBuilder,
-		private dataService: DataService,
-	) {}
-
 	ngOnInit() {
 		this.loadAlbums();
 		this.heroForm = this.fb.group({

src/demo/app/examples/forms-custom-template-example/forms-custom-template-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DataService } from '../data.service';
@@ -19,15 +19,13 @@ import { NgOptionHighlightDirective } from '@ng-select/ng-option-highlight';
 	],
 })
 export class FormsCustomTemplateExampleComponent implements OnInit {
+	private fb = inject(FormBuilder);
+	private modalService = inject(NgbModal);
+	private dataService = inject(DataService);
+
 	heroForm: FormGroup;
 	photos = [];
 
-	constructor(
-		private fb: FormBuilder,
-		private modalService: NgbModal,
-		private dataService: DataService,
-	) {}
-
 	ngOnInit() {
 		this.loadPhotos();
 

src/demo/app/examples/forms-multi-select-example/forms-multi-select-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectComponent } from '@ng-select/ng-select';
 
@@ -9,6 +9,8 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 	imports: [FormsModule, ReactiveFormsModule, NgSelectComponent],
 })
 export class FormsMultiSelectExampleComponent implements OnInit {
+	private fb = inject(FormBuilder);
+
 	heroForm: FormGroup;
 	isCitiesControlVisible = true;
 	cities: any[] = [
@@ -18,8 +20,6 @@ export class FormsMultiSelectExampleComponent implements OnInit {
 		{ id: 4, name: 'Pabradė' },
 	];
 
-	constructor(private fb: FormBuilder) {}
-
 	ngOnInit() {
 		this.heroForm = this.fb.group({
 			selectedCitiesIds: [],

src/demo/app/examples/forms-single-select-example/forms-single-select-example.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectComponent } from '@ng-select/ng-select';
@@ -10,18 +10,16 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 	imports: [FormsModule, ReactiveFormsModule, NgSelectComponent],
 })
 export class FormsSingleSelectExampleComponent implements OnInit {
+	private fb = inject(FormBuilder);
+	private modalService = inject(NgbModal);
+
 	heroForm: FormGroup;
 	ages: any[] = [
 		{ value: '<18', label: 'Under 18' },
 		{ value: '18', label: '18' },
 		{ value: '>18', label: 'More than 18' },
 	];
 
-	constructor(
-		private fb: FormBuilder,
-		private modalService: NgbModal,
-	) {}
-
 	ngOnInit() {
 		this.heroForm = this.fb.group({
 			age: [null, Validators.required],