# ngx-text-animation

> Text visualization library for Angular.

Latest version **1.0.2** (published 2022-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-text-animation
pnpm add ngx-text-animation
yarn add ngx-text-animation
bun add ngx-text-animation
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-09-18 |
| First published | 2022-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 99.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Astrit Demiri |
| Maintainers | astritdemiri11 |
| Keywords | text, display, typing, read, scroll, angular |

## Links

- npm: https://www.npmjs.com/package/ngx-text-animation
- Repository: https://github.com/astritdemiri11/ngx-text-animation
- Homepage: https://astritdemiri.com/ng-library/ngx-text-animation
- Issues: https://github.com/astritdemiri11/ngx-text-animation/issues
- npm.io page: https://npm.io/package/ngx-text-animation

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [csv-to-markdown-table](https://npm.io/package/csv-to-markdown-table.md) — 47.0K weekly downloads
- [@sapphire/ratelimits](https://npm.io/package/@sapphire/ratelimits.md) — 4.4K weekly downloads
- [js-csvparser](https://npm.io/package/js-csvparser.md) — 2.0K weekly downloads
- [@adadapted/js-sdk](https://npm.io/package/@adadapted/js-sdk.md) — 251 weekly downloads
- [@grapecity/spread-sheets-sparklines](https://npm.io/package/@grapecity/spread-sheets-sparklines.md) — 103 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-09-18
- 1.0.1 — 2022-09-17
- 0.0.1 — 2022-09-13

## README

# ngx-text-animation

Text visualization library for Angular.

Official documentation: https://astritdemiri.com/ng-library/ngx-text-animation

Simple example using ngx-text-animation: https://stackblitz.com/github/astritdemiri11/ngx-text-animation-example

Get the complete changelog here: https://github.com/astritdemiri11/ngx-text-animation/releases

## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
  * [Import the TextAnimationModule](#1-import-the-textanimationmodule)
    * [SharedModule](#sharedmodule)
  * [Use the directive or the component](#use-the-directive-or-the-component)

## Installation

First you need to install the npm module:

```sh
npm install ngx-text-animation --save
```

Choose the version corresponding to your Angular version:

 Angular       | ngx-text-animation
 ------------- | ---------------
 14 (ivy only) | 1.x+           


## Usage

#### 1. Import the `TextAnimationModule`:

Finally, you can use ngx-text-animation in your Angular project. You have to import `TextAnimationModule` in the root NgModule of your application.

```ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TextAnimationModule} from 'ngx-text-animation';

@NgModule({
    imports: [
        BrowserModule,
        TextAnimationModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

##### SharedModule

If you use a [`SharedModule`](https://angular.io/guide/sharing-ngmodules) that you import in multiple other feature modules,
you can export the `TextAnimationModule` to make sure you don't have to import it in every module.

```ts
@NgModule({
    exports: [
        CommonModule,
        TextAnimationModule
    ]
})
export class SharedModule { }
```

> Note: Module services are provided in root `@Injectable({ providedIn: 'root' })`, see [`Dependency Injection`](https://angular.io/guide/dependency-injection).

#### Use the directive or the component:

You can either use the `TextDisplayComponent` or the `TextReadComponent` exported by library

This is how you use the **component** for text display:

```html
<text-display>
  <span text>
    <span>This text will scroll on hover, if overflows parent</span>
  </span>
</text-display>
```

This is how you use the **component** for text read:

```html
<text-read #textRead [relativeTo]="textContainer">
</text-read>
<p #textContainer>This text will be typed when textRead.start() is invoked</p>
```

---
_Source: https://npm.io/package/ngx-text-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._