nisheed2440 / ng2-amp-dash

An Angular2 typing component

amp-dash is an Angular 4 component that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

amp-dash was inspired by the SapientRazorfish logo and created to be used to follow the brand guidelines.

Demo Page

NOTE: amp-dash has been updated to Angular 4, but can be used with Angular 2 as well, so long as the dependencies are satisfied

---

Installation

To begin start by running

npm install --save amp-dash

Next import into your app module

//app.module.ts

import { AmpDashModule } from 'amp-dash';
//Other imports

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    //Other Modules
    AmpDashModule // <-- amp-dash module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That's it! You are ready to use the amp-dash component.

Usage

Basic usage

<!-- app.component.html -->
<div class="app">
    <h1>
        <amp-dash [typeText]="'Hello World'"></amp-dash>
    </h1>
</div>

String Collections

You can provide string collections by passing an array to the typeText property.

The strings can new lines by providing the \n character.

<!-- app.component.html -->
<div class="app">
    <h1>
        <amp-dash 
            [typeText]="['Hello World','Foo Bar']"
        ></amp-dash>
        <!-- New line in strings -->
        <amp-dash 
            [typeText]="['Hello\nWorld','Foo\nBar']"
        ></amp-dash>
    </h1>
</div>

With type delay

You can provide a type delay i.e. the amount of time before the next character is printed by overriding the typeDelay property.

typeDelay is measured in milliseconds (ms).

<!-- app.component.html -->
<div class="app">
    <h1>
        <!-- Provide a 300ms type delay -->
        <amp-dash 
            [typeText]="'Hello World'"
            [typeDelay]="300"
        ></amp-dash>
    </h1>
</div>

With erase delay

You can provide an erase delay i.e. the amount of time before the displayed string is erased by overriding the eraseDelay property. eraseDelay is used in combination with typeLoop which loops over the collections of strings provided in the typeText.

eraseDelay is measured in milliseconds (ms).

<!-- app.component.html -->
<div class="app">
    <h1>
        <!-- Provide a 3000ms (3 second) erase delay -->
        <amp-dash 
            [typeText]="'Hello World'"
            [eraseDelay]="3000"
            [typeLoop]="true"
        ></amp-dash>
    </h1>
</div>

Updating the cursor

By default amp-dash comes the _ cursor character, which is animated by the class cursor. In order to update the character and to style it differently you can use the cursorChar & cursorClass properties.

<!-- app.component.html -->
<div class="app">
    <h1>
        <!-- Change the cursor character to `|` and class to `blinky-cursor` -->
        <amp-dash 
            [typeText]="'Hello World'"
            [cursorChar]="'|'"
            [cursorClass]="'blinky-cursor'"
        ></amp-dash>
    </h1>
</div>

Handling callbacks

You can handle the events like:

captionTyped triggered when each string has finished being displayed on the screen.

Or

captionErased triggered when each string has finished being erased from the screen.

<!-- app.component.html -->
<div class="app">
    <h1>
        <amp-dash 
            [typeText]="['Hello World','Foo Bar']"
            (captionTyped)="handleTyped($event)" 
            (captionErased)="handleErased($event)" 
        ></amp-dash>
    </h1>
</div>

Component Properties

Property	Type	Default Value	Description
typeText	`string	array`	['']
typeDelay	number	100	Delay in ms before a character is printed
eraseDelay	number	2000	Delay in ms before the displayed string is erased
typeLoop	boolean	false	Loop over the string collection
cursorClass	string	cursor	Class name applied to the cursor character
cursorChar	string	_	The cursor character to be displayed by default
captionTyped	function		Event fired when each string has finished being displayed on the screen
captionErased	function		Event fired when each string has finished being erased from the screen

ng2-amp-dash's Issues

Getting XHR error (404 Not Found) loading http://localhost:3000/amp-dash

Hi,
I'm trying to import amp-dash module in my app.module.ts file.When I inject it in my app.module.ts file like the one below

@NgModule({
    declarations: [AppComponent, HeaderAppComponent, GitUsers, HttpComponent, FooterComponent],
    imports: [BrowserModule, HttpModule, AmpDashModule],
    providers: [],
    bootstrap: [AppComponent, HeaderAppComponent, GitUsers, HttpComponent, FooterComponent]
})

getting an error in console and nothing loads in browser. Please let me know where I'm doing wrong.Code link https://github.com/mailmrmanoj/angular-graphql-integration