Angular Simple Typewriter

A simple angular standalone component for adding a nice typewriter effect to your project.

Install

npm

npm i ngx-simple-typewriter

Yarn

yarn add ngx-simple-typewriter

Usage

You can use the standalone Typewriter component in your project.

1. Component

import { Component } from '@angular/core';
import { Typewriter } from 'ngx-simple-typewriter';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Typewriter],
  template: `
    <ngx-typewriter />
  `,
  styles: []
})
export class AppComponent {
}

Component Input Properties

| Prop | Type | Options | Description | Default | | ---------------- | :---------------: | -------- | ------------------------------------------------------------------------------------------ | :----------------: | | words | array | Required | Array of strings holding the words | ['Hello', '...'] | | typeSpeed | number | Optional | Character typing speed in Milliseconds | 80 | | deleteSpeed | number | Optional | Character deleting speed in Milliseconds | 50 | | panelClass | string | Optional | CSS classes to be applied for the typewriter text (should be in global stylesheet) | '' |

Usage Example

import { Component } from '@angular/core';
import { Typewriter } from 'ngx-simple-typewriter';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Typewriter],
  template: `
    <div class="">
      Hello there, I am
      <ngx-typewriter
        [words]="words"
        [typeSpeed]="1000"
        [deleteSpeed]="100"
        [panelClass]="'text-color'"
      />
    </div>
  `,
})
export class AppComponent {
  words = ['Abdullah Mansoor', 'a Software Engineer', 'a Cricket Player'];
}

// global stylesheet (styles.scss)
.text-color {
    color: red;
}

[Demo] - Not yet

License

MIT © iabu94