Skip to content

Commit 467a748

Browse files
SkyZeroZxSkyZeroZx
committed
feat: Add support Angular 21
1 parent 135e825 commit 467a748

14 files changed

Lines changed: 12158 additions & 8224 deletions

File tree

‎README.md‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
# NgxTypedWriter | Angular
22

3-
Angular component for typing text animation . Angular SSR and Universal ( previous Angular 16 ) Friendly.
4-
5-
Zoneless compatibility ( developer preview )
3+
Angular SSR-friendly typing text animation component with zoneless compatibility.
64

75
Based in [Typed.JS](https://github.com/mattboldt/typed.js)
86

9-
Rewriter native for Angular
7+
Rewritten natively for Angular
108

119
# DEMO
1210

1311
See a [live demo](https://skyzerozx.github.io/ngx-typed-writer)
1412

15-
1613
## Versions
1714

1815
Latest version available for each version of Angular
1916

2017
| ngx-typed-writer | Angular |
21-
| ---------------------- | ----------- |
22-
| 1.0.0 - 1.2.0 | 16.xx 17.xx |
23-
| 1.3.0 | 17.x 18.xx |
24-
| 1.4.0 | 18.x 19.xx |
25-
| 1.5.0 | 19.x 20.xx |
18+
| ---------------- | ----------- |
19+
| 1.0.0 - 1.2.0 | 16.xx 17.xx |
20+
| 1.3.0 | 17.x 18.xx |
21+
| 1.4.0 | 18.x 19.xx |
22+
| 1.5.0 | 19.x 20.xx |
23+
| 1.6.0 | 20.x 21.xx |
2624

2725
## Basic Usage
2826

@@ -83,7 +81,7 @@ In the following example emable `smartBackspace`, this would only backspace the
8381

8482
```bash
8583
npm install ngx-typed-writer
86-
```
84+
```
8785

8886
## Import Standalone
8987

@@ -118,30 +116,28 @@ export class AppModule { }
118116

119117
# API
120118

121-
122-
123119
# Inputs
124120

125-
| Input | Type | Description |
126-
|----------------|------------|-----------------------------------------------------------------------------|
127-
| strings | `string[]` | An array of strings to be typed. |
128-
| typeSpeed | `number` | The speed at which the strings are typed, in milliseconds. |
129-
| startDelay | `number` | The delay before the first string is typed, in milliseconds. |
130-
| backSpeed | `number` | The speed at which the strings are back-spaced, in milliseconds. |
131-
| smartBackspace | `boolean` | When use smart backspace, which means that the typing will stop <br> when the next string starts with the same characters as the current string. |
132-
| shuffle | `boolean` | Whether to shuffle the strings before typing them. |
133-
| backDelay | `number` | The delay before the back-spacing starts, in milliseconds. |
134-
| isHTML | `boolean` | Whether the strings contain HTML. |
135-
| fadeOut | `boolean` | Whether the component should fade out after each string is typed. |
136-
| loop | `boolean` | When you activate the loop, the list of strings loops infinitely with the typing animation. |
137-
| showCursor | `boolean` | Whether to show a cursor while the component is typing. |
138-
| cursorChar | `string` | The character to use for the cursor. |
139-
| fadeOutDelay | `number` | The delay before the component starts to fade out, in milliseconds. |
121+
| Input | Type | Description |
122+
| -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
123+
| strings | `string[]` | An array of strings to be typed. |
124+
| typeSpeed | `number` | The speed at which the strings are typed, in milliseconds. |
125+
| startDelay | `number` | The delay before the first string is typed, in milliseconds. |
126+
| backSpeed | `number` | The speed at which the strings are back-spaced, in milliseconds. |
127+
| smartBackspace | `boolean` | When use smart backspace, which means that the typing will stop <br> when the next string starts with the same characters as the current string. |
128+
| shuffle | `boolean` | Whether to shuffle the strings before typing them. |
129+
| backDelay | `number` | The delay before the back-spacing starts, in milliseconds. |
130+
| isHTML | `boolean` | Whether the strings contain HTML. |
131+
| fadeOut | `boolean` | Whether the component should fade out after each string is typed. |
132+
| loop | `boolean` | When you activate the loop, the list of strings loops infinitely with the typing animation. |
133+
| showCursor | `boolean` | Whether to show a cursor while the component is typing. |
134+
| cursorChar | `string` | The character to use for the cursor. |
135+
| fadeOutDelay | `number` | The delay before the component starts to fade out, in milliseconds. |
140136

141137
# Outputs
142138

143139
| Output | Description |
144-
|--------------|--------------------------------------------------------------------------------------|
140+
| ------------ | ------------------------------------------------------------------------------------ |
145141
| destroy | Emitted when the component is destroyed. |
146142
| initTyped | Emitted when the first string is typed. |
147-
| completeLoop | Emitted when the last string is typed and the component loops back to the beginning. |
143+
| completeLoop | Emitted when the last string is typed and the component loops back to the beginning. |

‎apps/angular-typed-writer/project.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"apps/angular-typed-writer/src/assets",
2121
"apps/angular-typed-writer/src/robots.txt"
2222
],
23-
"styles": ["apps/angular-typed-writer/src/styles.scss"],
23+
"styles": ["apps/angular-typed-writer/src/styles.css"],
2424
"scripts": []
2525
},
2626
"configurations": {
@@ -81,7 +81,8 @@
8181
"executor": "@nx/jest:jest",
8282
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
8383
"options": {
84-
"jestConfig": "apps/angular-typed-writer/jest.config.ts"
84+
"jestConfig": "apps/angular-typed-writer/jest.config.ts",
85+
"tsConfig": "apps/angular-typed-writer/tsconfig.spec.json"
8586
}
8687
},
8788
"serve-static": {

‎apps/angular-typed-writer/src/app/components/fade-out/fade-out.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ <h2 class="text-2xl font-extrabold text-gray-900">Fade Out</h2>
1616
Code
1717
<pre>
1818
<code class="hljs">
19+
1920
&lt;ngx-typed-writer
2021
[strings]="['This a Angular Library', 'Angular Universal Friendly']"
2122
[fadeOut]="true"

apps/angular-typed-writer/src/styles.scss renamed to apps/angular-typed-writer/src/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'tailwindcss';
1+
@import 'tailwindcss';
22

33
.type-wrap {
44
margin: 10px auto;

‎apps/angular-typed-writer/src/test-setup.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ globalThis.ngJest = {
55
errorOnUnknownProperties: true,
66
},
77
};
8-
import 'jest-preset-angular/setup-jest';
8+
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
9+
10+
setupZoneTestEnv();

‎apps/angular-typed-writer/tsconfig.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
"noImplicitOverride": true,
88
"noPropertyAccessFromIndexSignature": true,
99
"noImplicitReturns": true,
10-
"noFallthroughCasesInSwitch": true
10+
"noFallthroughCasesInSwitch": true,
11+
"module": "preserve",
12+
"moduleResolution": "bundler",
13+
"lib": ["dom", "es2022"]
1114
},
1215
"files": [],
1316
"include": [],

‎apps/angular-typed-writer/tsconfig.spec.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
"extends": "./tsconfig.json",
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
5-
"module": "commonjs",
5+
"module": "preserve",
66
"target": "es2016",
7-
"types": ["jest", "node"]
7+
"types": ["jest", "node"],
8+
"moduleResolution": "bundler",
9+
"isolatedModules": true
810
},
911
"files": ["src/test-setup.ts"],
1012
"include": [

‎libs/ngx-typed-writer/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-typed-writer",
3-
"description": "A Angular 2+ Typing Animation Library. Angular Universal Friendly",
3+
"description": "A Angular 2+ Typing Animation Library. Angular SSR Friendly",
44
"version": "1.5.1",
55
"license": "MIT",
66
"publishConfig": {
@@ -23,7 +23,8 @@
2323
"Angular 18",
2424
"Angular 19",
2525
"Angular 20",
26-
"ZoneLess Compatibility ( Developer preview )",
26+
"Angular 21",
27+
"ZoneLess Compatibility",
2728
"typed.js",
2829
"angular typing animation library"
2930
],

‎libs/ngx-typed-writer/project.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@
33
"$schema": "../../node_modules/nx/schemas/project-schema.json",
44
"sourceRoot": "libs/ngx-typed-writer/src",
55
"prefix": "typed-writer",
6-
"tags": [],
76
"projectType": "library",
7+
"tags": [],
88
"targets": {
99
"build": {
1010
"executor": "@nx/angular:package",
1111
"outputs": ["{workspaceRoot}/dist/{projectRoot}"],
1212
"options": {
13-
"project": "libs/ngx-typed-writer/ng-package.json"
13+
"project": "libs/ngx-typed-writer/ng-package.json",
14+
"tsConfig": "libs/ngx-typed-writer/tsconfig.lib.json"
1415
},
1516
"configurations": {
1617
"production": {
1718
"tsConfig": "libs/ngx-typed-writer/tsconfig.lib.prod.json"
1819
},
19-
"development": {
20-
"tsConfig": "libs/ngx-typed-writer/tsconfig.lib.json"
21-
}
20+
"development": {}
2221
},
2322
"defaultConfiguration": "production"
2423
},
2524
"test": {
2625
"executor": "@nx/jest:jest",
2726
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
2827
"options": {
29-
"jestConfig": "libs/ngx-typed-writer/jest.config.ts"
28+
"jestConfig": "libs/ngx-typed-writer/jest.config.ts",
29+
"tsConfig": "libs/ngx-typed-writer/tsconfig.spec.json"
3030
}
3131
},
3232
"lint": {

‎libs/ngx-typed-writer/src/test-setup.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ globalThis.ngJest = {
55
errorOnUnknownProperties: true,
66
},
77
};
8-
import 'jest-preset-angular/setup-jest';
8+
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
9+
10+
setupZoneTestEnv();

0 commit comments

Comments
 (0)