This project was generated with Angular CLI version 9.1.0.
https://ahsanayaz.github.io/ngx-read-time/demo
https://ahsanayaz.github.io/ngx-read-time
To install this library, run:
npm install ngx-read-time --save
In your component where you want to use:
import { Component } from '@angular/core';
import { ReadTimeConfig, TimeUnit } from 'ngx-read-time';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo';
readTime: string;
rtConfig: ReadTimeConfig = {
wordsPerMinute: 250,
timeUnit: TimeUnit.MINUTES
}
}
In your HTML file:
<article nrtReadTime [options]="rtConfig" (timeCalculated)="readTime = $event.minutes">
<h1>Understanding Discriminated Unions in Typescript
<span>
<a href="https://dev.to/ahsanayaz/understanding-discriminated-unions-in-typescript-5cd">
(Source)
</a>
</span>
</h1>
// Here will the description of the article
</article>
Also add NgxReadTimeModule
Module in your AppModule or the Module in which you are using this library.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxReadTimeModule } from 'ngx-read-time';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxReadTimeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.