{"id":13808188,"url":"https://github.com/SkyZeroZx/ngx-typed-writer","last_synced_at":"2025-05-14T02:31:25.572Z","repository":{"id":184113422,"uuid":"671325666","full_name":"SkyZeroZx/ngx-typed-writer","owner":"SkyZeroZx","description":"A Native Angular 2+ Typing Animation Library , Angular Universal Friendly","archived":false,"fork":false,"pushed_at":"2023-12-06T02:30:43.000Z","size":1019,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-07T12:21:01.683Z","etag":null,"topics":["angular","angular-universal","angular-universal-friendly","based-typedjs","ngx","ngx-typed-writer","nx","typejs-angular","typescript","typping-animation"],"latest_commit_sha":null,"homepage":"https://skyzerozx.github.io/ngx-typed-writer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SkyZeroZx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-27T04:21:01.000Z","updated_at":"2024-06-23T22:16:27.964Z","dependencies_parsed_at":"2024-06-23T22:26:35.408Z","dependency_job_id":null,"html_url":"https://github.com/SkyZeroZx/ngx-typed-writer","commit_stats":null,"previous_names":["skyzerozx/ngx-typed-writer"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fngx-typed-writer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fngx-typed-writer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fngx-typed-writer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fngx-typed-writer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SkyZeroZx","download_url":"https://codeload.github.com/SkyZeroZx/ngx-typed-writer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273224,"owners_count":17448071,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-universal","angular-universal-friendly","based-typedjs","ngx","ngx-typed-writer","nx","typejs-angular","typescript","typping-animation"],"created_at":"2024-08-04T01:01:36.994Z","updated_at":"2024-11-19T00:30:36.606Z","avatar_url":"https://github.com/SkyZeroZx.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Animations"],"readme":"# NgxTypedWriter | Angular\n\nAngular component for typing text animation . Angular SSR and Universal ( previous Angular 16 ) Friendly.\n\nBased in [Typed.JS](https://github.com/mattboldt/typed.js)\n\nRewriter native for Angular\n\n# DEMO\n\nSee a [live demo](https://skyzerozx.github.io/ngx-typed-writer)\n\n\n## Versions\n\nLatest version available for each version of Angular\n\n| ngx-facebook-messenger | Angular     |\n| ---------------------- | ----------- |\n| 1.0.0 - 1.2.0          | 16.xx 17.xx |\n| 1.3.0                  | 17.x  18.xx |\n\n\n## Basic Usage\n\nTyping a list of strings with tipping text efect\n\n```html\n\u003cngx-typed-writer [strings]=\"['This a Angular Library', 'Angular Universal Friendly']\" [cursorChar]=\"'_'\" [showCursor]=\"true\" [backSpeed]=\"30\" [typeSpeed]=\"30\"\u003e \u003c/ngx-typed-writer\u003e\n```\n\n## Fade Out Effect\n\nTyping a list of strings with fade out effect enable `fadeOut` and configure `fadeOutDelay`\n\n```html\n\u003cngx-typed-writer [strings]=\"['This a Angular Library', 'Angular Universal Friendly']\" [fadeOut]=\"true\" [fadeOutDelay]=\"200\" [showCursor]=\"false\" [backSpeed]=\"30\" [typeSpeed]=\"30\"\u003e \u003c/ngx-typed-writer\u003e\n```\n\n## Shuffled\n\nRandomized typing list of string with enable `shuffle`\n\n```html\n\u003cngx-typed-writer\n  [strings]=\"[\n        '1 Some \u003ci\u003estrings\u003c/i\u003e with',\n        '2 Some \u003cstrong\u003eHTML\u003c/strong\u003e',\n        '3 Chars \u0026times; \u0026copy;'\n      ]\"\n  [shuffle]=\"true\"\n  [isHTML]=\"true\"\n  [backSpeed]=\"20\"\n  [typeSpeed]=\"30\"\n\u003e\n\u003c/ngx-typed-writer\u003e\n```\n\n## Smart BackSpace\n\nIn the following example emable `smartBackspace`, this would only backspace the words after \"My List of strings :\"\n\n```html\n\u003cngx-typed-writer\n  [strings]=\"[\n        'My List of strings : Angular',\n        'My List of strings : Universal',\n        'My List of strings : \u003cstrong\u003eHTML\u003c/strong\u003e'\n      ]\"\n  [isHTML]=\"true\"\n  [smartBackspace]=\"true\"\n  [backSpeed]=\"20\"\n  [typeSpeed]=\"30\"\n\u003e\u003c/ngx-typed-writer\u003e\n```\n\n# Usage\n\n## Install\n\n`npm install ngx-typed-writer`\n\n## Import into Module\n\n```typescript\nimport { NgxTypedWriterModule } from 'ngx-typed-writer';\n\n@NgModule({\n  imports: [\n    ...,\n    NgxTypedWriterModule\n  ],\n  declarations: [...],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n# API\n\n \n\n# Inputs\n\n| Input          | Type       | Description                                                                 |\n|----------------|------------|-----------------------------------------------------------------------------|\n| strings        | `string[]` | An array of strings to be typed.                                            |\n| typeSpeed      | `number`   | The speed at which the strings are typed, in milliseconds.                  |\n| startDelay     | `number`   | The delay before the first string is typed, in milliseconds.                |\n| backSpeed      | `number`   | The speed at which the strings are back-spaced, in milliseconds.            |\n| smartBackspace | `boolean`  | When use smart backspace, which means that the typing will stop  \u003cbr\u003e when the next string starts with the same characters as the current string.          |\n| shuffle        | `boolean`  | Whether to shuffle the strings before typing them.                          |\n| backDelay      | `number`   | The delay before the back-spacing starts, in milliseconds.                  |\n| isHTML         | `boolean`  | Whether the strings contain HTML.                                           |\n| fadeOut        | `boolean`  | Whether the component should fade out after each string is typed.           |\n| loop           | `boolean`  | When you activate the loop, the list of strings loops infinitely with the typing animation. |\n| showCursor     | `boolean`  | Whether to show a cursor while the component is typing.                     |\n| cursorChar     | `string`   | The character to use for the cursor.                                        |\n| fadeOutDelay   | `number`   | The delay before the component starts to fade out, in milliseconds.         |\n\n# Outputs\n\n| Output       | Description                                                                          |\n|--------------|--------------------------------------------------------------------------------------|\n| destroy      | Emitted when the component is destroyed.                                             |\n| initTyped    | Emitted when the first string is typed.                                              |\n| completeLoop | Emitted when the last string is typed and the component loops back to the beginning. |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSkyZeroZx%2Fngx-typed-writer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSkyZeroZx%2Fngx-typed-writer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSkyZeroZx%2Fngx-typed-writer/lists"}