Skip to content
Angular 4 Typing Animation Directive
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit :) Sep 30, 2017
LICENSE
README.md Update README.md Mar 30, 2018
index.ts Add module files Sep 30, 2017
package.json Fix: wait for text content for initialize "typed" Feb 25, 2018
rollup.config.js Add module files Sep 30, 2017
tsconfig.json Add module files Sep 30, 2017
typed.ts
typing-animation.directive.ts
typing-animation.module.ts

README.md

Angular 4 Typing Animation Directive

Usage

  • Install node_module angular-typing-animation
$ npm install angular-typing-animation --save
  • Import TypingAnimationModule to your AppModule
import { NgModule } from '@angular/core'
import { BrowserModule  } from '@angular/platform-browser'

import { AppComponent } from './app.component';
import { TypingAnimationModule } from 'angular-typing-animation'

@NgModule({
    imports: [
        BrowserModule,
        TypingAnimationModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}
  • Use it in your template
<span typingAnimation [typeSpeed]="20" [startDelay]="2000" (complete)="onComplete()">
</span>

For a full example, please check out this plunker example

Documentation

Properties

/**
 * @property {number} typeSpeed, type speed in milliseconds
 */
typeSpeed: 0,

/**
 * @property {number} startDelay, time before typing starts in milliseconds
 */
startDelay: 0,

/**
 * @property {boolean} condition, required condition for typing begin
 */
condition: true,

/**
 * @property {boolean} hideCursorOnComplete, hide cursor on typing complete
 */
hideCursorOnComplete: false,

/**
 * All typing is complete
 * @event TypingAnimation#complete
 */
complete: () => {},

Remarks

This is an fork from the javascript library Typed.js created for www.mattboldt.com

You can’t perform that action at this time.