Support angular >=18 (#107)

* fix peerDependencies to handle angular >=18
* build(package.json): upgrade angular 18
* refactor(lib): removed renderer2 not used
* docs(readme): add table installation dependencies

.github/workflows/tests.yml

@@ -18,4 +18,4 @@ jobs:
       - uses: actions/checkout@v2
 
       - run: npm install
-      - run: npm run test:headless:singleRun
+      - run: npm run test:headless:singleRun

README.md

@@ -18,11 +18,13 @@ Check out the live demo: [ng2-fittext Demo](https://stackblitz.com/edit/stackbli
 
 ## Installation
 
-Install the library using npm:
+Install the library using npm according to your angular version (see table below):
+
+| Angular | ng2-fittext | command                       |
+|---------|-------------|-------------------------------|
+| <= v17  | 1.4.3       | ```npm i ng2-fittext@1.4.3``` |
+| >= v18  | 2.0.0       | ``` npm i ng2-fittext@1.5.0```|
 
-```bash
-npm install --save ng2-fittext
-```
 
 ### Usage
 

package.json

@@ -5,7 +5,7 @@
     "ng": "./node_modules/.bin/ng",
     "start": "node node_modules/@angular/cli/bin/ng serve",
     "build": "node node_modules/@angular/cli/bin/ng build --configuration production",
-    "test": "node node_modules/@angular/cli/bin/ng test",
+    "test": "node node_modules/@angular/cli/bin/ng test lib",
     "test:headless": "node node_modules/@angular/cli/bin/ng test --browsers=ChromeHeadless",
     "test:headless:singleRun": "node node_modules/@angular/cli/bin/ng test --no-watch --no-progress --browsers=ChromeHeadless lib",
     "release:minor": "cd ./projects/lib/ && npm version minor",
@@ -15,22 +15,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.8",
-    "@angular/common": "^17.0.8",
-    "@angular/compiler": "^17.0.8",
-    "@angular/core": "^17.0.8",
-    "@angular/forms": "^17.0.8",
-    "@angular/platform-browser": "^17.0.8",
-    "@angular/platform-browser-dynamic": "^17.0.8",
-    "@angular/router": "^17.0.8",
+    "@angular/animations": "^18.0.6",
+    "@angular/common": "^18.0.6",
+    "@angular/compiler": "^18.0.6",
+    "@angular/core": "^18.0.6",
+    "@angular/forms": "^18.0.6",
+    "@angular/platform-browser": "^18.0.6",
+    "@angular/platform-browser-dynamic": "^18.0.6",
+    "@angular/router": "^18.0.6",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.8",
-    "@angular/cli": "^17.0.8",
-    "@angular/compiler-cli": "^17.0.8",
+    "@angular-devkit/build-angular": "^18.0.7",
+    "@angular/cli": "^18.0.7",
+    "@angular/compiler-cli": "^18.0.6",
     "@types/jasmine": "~5.1.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^18.18.0",
@@ -40,7 +40,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^17.0.0",
-    "typescript": "5.2.2"
+    "ng-packagr": "^18.0.0",
+    "typescript": "5.4.5"
   }
 }

projects/lib/package.json

@@ -21,6 +21,7 @@
     "angular 15",
     "angular 16",
     "angular 17",
+    "angular 18",
     "fit text",
     "responsive text",
     "responsive font size",
@@ -29,8 +30,8 @@
   "author": "Lorenzo Iovino",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/lib/src/ng2-fittext.directive.spec.ts

@@ -1,15 +1,13 @@
-import { Ng2FittextDirective } from '../../ng2-fittext.directive';
+import { Ng2FittextDirective } from './ng2-fittext.directive';
 import { Renderer2, ElementRef } from '@angular/core';
 
 describe('Class: Ng2FittextDirective', () => {
   let ng2FittextDirective: Ng2FittextDirective;
   let elMock: ElementRef;
-  let rendererMock: Renderer2;
 
   beforeEach(() => {
     elMock = {} as ElementRef;
-    rendererMock = {} as Renderer2;
-    ng2FittextDirective = new Ng2FittextDirective(elMock, rendererMock);
+    ng2FittextDirective = new Ng2FittextDirective(elMock);
   });
 
   describe('Method: setFontSize', () => {

projects/lib/src/ng2-fittext.directive.ts

@@ -9,7 +9,6 @@ import {
   EventEmitter,
   OnChanges,
   OnInit,
-  Renderer2,
 } from '@angular/core';
 
 @Directive({
@@ -35,7 +34,7 @@ export class Ng2FittextDirective
   private speed = 1.05;
   private done = false;
 
-  constructor(public el: ElementRef<HTMLElement>, public renderer: Renderer2) {}
+  constructor(public el: ElementRef<HTMLElement>) {}
 
   setFontSize(fontSize: number): void {
     if (this.isVisible() && !this.isDone()) {