How To Call Function Every X Seconds In Angular Js ?

Today now in this article, i will cover about how to implement angular call function in every x seconds. Now this article i will give you a simple example of angular call api in every minute. if we have a question about the angular call function in every 10 seconds then here I will give a simple example with a solution. So in this article, i will implement an angular execute function every 10 second.

We can also use this example with the angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13 version.

Here, i will create one service to get the posts from API. Then i will use a timer() to call API every 10 seconds. so let’s start and follow the below step to make it done this example.

Step 1: Create New App

We can easily create our angular application by using bellow command:

ng new my-new-app
Step 2: Import HttpClientModule

Now in this step, we have to import the HttpClientModule to app.module.ts file. So let’s import it as like as bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Step 3: Create Service for API

Here, i have to create the service for http client request. I will create the service file and write client http request code. So in this service i will use in our component file. So let’s create the service and then put bellow code:

ng g s services/post

Now let’s add code as like as bellow:

src/app/services/post.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  
@Injectable({
  providedIn: 'root'
})
export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';
   
  constructor(private httpClient: HttpClient) { }
  
  getPosts(){
    return this.httpClient.get(this.url);
  }
  
}
Step 4: Use Service to Component

Now we need to use this services to our app component. So let’s updated code as like as bellow:

src/app/app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PostService } from './services/post.service';
import { Subscription, timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  posts:any;
  subscription !: Subscription;
    
  constructor(private service:PostService) {}
  
  ngOnInit() {
      this.subscription = timer(0, 5000).pipe(
        switchMap(() => this.service.getPosts())
      ).subscribe(result => 
        console.log(result)
      );
  }
  
  ngOnDestroy() {
      this.subscription.unsubscribe();
  }
  
}
Run Angular App:

That’s good all the required steps have been done, now we have to type the given below command and hit enter to run the Angular appliction:

ng serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →