ngx-simple-typewriter v0.0.6

Angular Simple Typewriter

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

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

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