use inject

Author: ssuperczynski

.eslintrc.json

@@ -64,7 +64,6 @@
         "eol-last": "off",
         "no-duplicate-string": "off",
         "arrow-body-style": "off",
-        "id-blacklist": "error",
         "import/no-extraneous-dependencies": "off",
         "import/no-internal-modules": "off",
         "import/order": "off",

projects/ngx-easy-table/src/lib/effects/table.effects.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { take, tap } from 'rxjs/operators';
@@ -9,6 +9,10 @@ import { EventService } from '../services/event.service';
 
 @Injectable()
 export class TableEffects {
+  private actions$ = inject(Actions);
+  private store = inject<Store<AppState>>(Store);
+  private eventService = inject(EventService);
+
   setFilters$ = createEffect(
     () =>
       this.actions$.pipe(
@@ -34,10 +38,4 @@ export class TableEffects {
       ),
     { dispatch: false }
   );
-
-  constructor(
-    private actions$: Actions,
-    private store: Store<AppState>,
-    private eventService: EventService
-  ) {}
 }

projects/ngx-easy-table/src/lib/facade/table.facade.ts

@@ -1,12 +1,12 @@
 import * as Actions from '../actions/table.actions';
 import { Store } from '@ngrx/store';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { CellClass, CellStyle, RowClass, RowStyle } from '../model/api';
 import { Columns } from '../model/columns';
 
 @Injectable()
 export class Facade {
-  constructor(private store: Store) {}
+  private store = inject(Store);
 
   setPagination(page: number, itemsPerPage: number): void {
     this.store.dispatch(

projects/ngx-easy-table/src/lib/services/config-service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Config, STYLE, THEME } from '../model/config';
 
-// eslint-disable-next-line, no-underscore-dangle, id-blacklist, id-match
+// eslint-disable-next-line
 export const DefaultConfig: Config = {
   searchEnabled: false,
   headerEnabled: true,

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { environment } from '../environments/environment';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subject } from 'rxjs';
@@ -17,7 +17,7 @@ export interface Link {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit, OnDestroy {
-  constructor(private router: Router) {}
+  private router = inject(Router);
 
   private ngUnsubscribe: Subject<void> = new Subject<void>();
   public readonly version = environment.VERSION;

src/app/demo/infinite-scroll-server-template/infinite-scroll-server-template.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
 import { takeUntil } from 'rxjs/operators';
@@ -18,6 +19,9 @@ import { Subject } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InfiniteScrollServerTemplateComponent implements OnInit, OnDestroy {
+  private cdr = inject(ChangeDetectorRef);
+  private readonly companyService = inject(CompanyService);
+
   public configuration: Config;
   public columns: Columns[];
   public data: Company[] = [];
@@ -26,8 +30,6 @@ export class InfiniteScrollServerTemplateComponent implements OnInit, OnDestroy
   private offset = 1;
   public selected: number | null = null;
 
-  constructor(private cdr: ChangeDetectorRef, private readonly companyService: CompanyService) {}
-
   ngOnDestroy(): void {
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();

src/app/demo/infinite-scroll-server/infinite-scroll-server.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
 import { takeUntil } from 'rxjs/operators';
@@ -18,15 +19,16 @@ import { Subject } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InfiniteScrollServerComponent implements OnInit, OnDestroy {
+  private cdr = inject(ChangeDetectorRef);
+  private readonly companyService = inject(CompanyService);
+
   public configuration: Config;
   public columns: Columns[];
   public data: Company[] = [];
   public totalLength = 0;
   private ngUnsubscribe: Subject<void> = new Subject<void>();
   private offset = 1;
 
-  constructor(private cdr: ChangeDetectorRef, private readonly companyService: CompanyService) {}
-
   ngOnDestroy(): void {
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();

src/app/demo/infinite-scroll/infinite-scroll.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+  inject,
+} from '@angular/core';
 import { Company, data } from '../../../assets/data';
 import { Columns, Config, DefaultConfig, Event } from 'ngx-easy-table';
 
@@ -9,12 +15,12 @@ import { Columns, Config, DefaultConfig, Event } from 'ngx-easy-table';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InfiniteScrollComponent implements OnInit {
+  private cdr = inject(ChangeDetectorRef);
+
   public configuration: Config;
   public columns: Columns[];
   public data: Company[] = [];
 
-  constructor(private cdr: ChangeDetectorRef) {}
-
   ngOnInit(): void {
     this.columns = [
       { key: 'phone', title: 'Phone' },

src/app/demo/live-update/live-update.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import { interval, Subject, tap } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -24,6 +25,8 @@ interface Data {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LiveUpdateComponent implements OnInit, OnDestroy {
+  private cdr = inject(ChangeDetectorRef);
+
   data: Data[] = [
     { status: 'ACTIVE', amount: 1, company: 'Foo', limit: 1000, balance: 2000 },
     { status: 'INACTIVE', amount: 2, company: 'Bar', limit: 1000, balance: 900 },
@@ -47,8 +50,6 @@ export class LiveUpdateComponent implements OnInit, OnDestroy {
     return Math.floor(min + Math.random() * (max - min + 1));
   }
 
-  constructor(private cdr: ChangeDetectorRef) {}
-
   ngOnInit(): void {
     this.configuration = { ...DefaultConfig };
     interval(600)

src/app/demo/persist-state-router/persist-state-router.component.ts

@@ -5,6 +5,7 @@ import {
   OnDestroy,
   OnInit,
   ViewChild,
+  inject,
 } from '@angular/core';
 import { Company, data } from '../../../assets/data';
 import { API, APIDefinition, Columns, Config, DefaultConfig } from 'ngx-easy-table';
@@ -19,6 +20,8 @@ import { Subject } from 'rxjs';
   styles: [],
 })
 export class PersistStateRouterComponent implements OnInit, OnDestroy, AfterViewInit {
+  private route = inject(ActivatedRoute);
+
   @ViewChild('table') table: APIDefinition;
   private unsubscribe = new Subject<void>();
   public columns: Columns[] = [
@@ -33,8 +36,6 @@ export class PersistStateRouterComponent implements OnInit, OnDestroy, AfterView
   public sortColumn: string;
   public sortOrder: 'asc' | 'desc';
 
-  constructor(private route: ActivatedRoute) {}
-
   ngOnInit(): void {
     this.configuration = { ...DefaultConfig };
     this.data = data;

src/app/demo/server-pagination/server-pagination.component.ts

@@ -5,6 +5,7 @@ import {
   OnDestroy,
   OnInit,
   ViewChild,
+  inject,
 } from '@angular/core';
 import { CompanyService } from '../../services/company.service';
 import { APIDefinition, Columns, Config, DefaultConfig } from 'ngx-easy-table';
@@ -27,6 +28,9 @@ interface EventObject {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ServerPaginationComponent implements OnInit, OnDestroy {
+  private readonly companyService = inject(CompanyService);
+  private readonly cdr = inject(ChangeDetectorRef);
+
   @ViewChild('table') table: APIDefinition;
   public columns: Columns[] = [
     { key: 'phone', title: 'Phone' },
@@ -44,11 +48,6 @@ export class ServerPaginationComponent implements OnInit, OnDestroy {
   };
   private ngUnsubscribe: Subject<void> = new Subject<void>();
 
-  constructor(
-    private readonly companyService: CompanyService,
-    private readonly cdr: ChangeDetectorRef
-  ) {}
-
   ngOnInit(): void {
     this.configuration = { ...DefaultConfig };
     this.getData('');

src/app/demo/server-sort/server-sort.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import { CompanyService } from '../../services/company.service';
 import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
@@ -28,6 +29,9 @@ interface EventObject {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ServerSortComponent implements OnInit, OnDestroy {
+  private readonly companyService = inject(CompanyService);
+  private readonly cdr = inject(ChangeDetectorRef);
+
   public columns: Columns[] = [
     { key: 'phone', title: 'Phone' },
     { key: 'age', title: 'Age' },
@@ -46,11 +50,6 @@ export class ServerSortComponent implements OnInit, OnDestroy {
     order: '',
   };
 
-  constructor(
-    private readonly companyService: CompanyService,
-    private readonly cdr: ChangeDetectorRef
-  ) {}
-
   ngOnInit(): void {
     this.configuration = { ...DefaultConfig };
     this.configuration.serverPagination = true;

src/app/services/company.service.ts

@@ -1,14 +1,14 @@
 import { HttpClient, HttpResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Injectable()
 export class CompanyService {
+  private http = inject(HttpClient);
+
   private readonly BACKEND_URL =
     'https://my-json-server.typicode.com/ssuperczynski/ngx-easy-table/company?';
 
-  constructor(private http: HttpClient) {}
-
   getCompanies(params = '', observe = true): Observable<HttpResponse<Company[]>> {
     return this.http.get<Company[]>(`${this.BACKEND_URL}${params}`, {
       observe: observe ? 'response' : null,

src/assets/data.ts

@@ -1,6 +1,4 @@
-import { Columns } from 'ngx-easy-table';
-
-/* eslint-disable max-lines, id-blacklist */
+/* eslint-disable max-lines */
 export interface Company {
   phone: string;
   age: number;
@@ -13,7 +11,7 @@ export interface Company {
   imgUrl?: string;
 }
 
-export const columns: Columns[] = [
+export const columns = [
   { key: 'phone', title: 'Phone' },
   { key: 'age', title: 'Age' },
   { key: 'company', title: 'Company' },