Create Timer in Angular 15 Application Working Demo

Hello to all, welcome to therichpost.com. In this post, I will tell you, Create Timer in Angular 15 Application Working Demo.

Working Live Demo

Angular15 came and if you are new then you must check below link:

Angular 15 Tutorials

Here is the code snippet for Create Timer in Angular 15 Application Working Demo and please use carefully:

1. Very first guys, here are common basics steps to add angular 15 application on your machine and also we must have latest nodejs version(14.17.0) installed for angular 15:

npm install -g @angular/cli

ng new angulardemo // Set Angular 15 Application on your pc

cd angulardemo // Go inside project folder

2. Now guys we will add below code into our angulardemo/src/app/app.component.html:

{{counter}} seconds left

3. Now we will add below code into our angulardemo/src/app/app.component.tsfile:

...
import {timer} from 'rxjs';
import {takeWhile, tap} from 'rxjs/operators';

..

export class AppComponent {
...

counter = 10;
constructor(){
 

    
    timer(1000, 1000) //Initial delay 1 seconds and interval countdown also 1 second
      .pipe(
        takeWhile( () => this.counter > 0 ),
        tap(() => this.counter--)
      )
      .subscribe( () => {
        //add you more code
      } );
}


}

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Tags:Angular 15