Angular Simple Typewriter
A simple angular standalone component for adding a nice typewriter effect to your project.
Install
npm
npm i ngx-simple-typewriterYarn
yarn add ngx-simple-typewriterUsage
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