Gagri Global IT services is having a team of executives who have good experience in developing applications on various platforms like SharePoint 2013/2010, Silverlight, net Framework 4.5 and Mobile tools.

Creating a resolver in angular for video data

Published on October 18, 2023 by Manohar & Upendra


In this tutorial, we will walk you through the process of creating a resolver in an Angular application to fetch video data from a public API. Resolvers are an essential part of Angular's route handling, ensuring data is available before rendering a component.

Step 1: Create a Resolver in Services

First, let's create a resolver in your Angular project. Open your terminal and use the Angular CLI to generate a resolver.

ng g resolver resolverName

This command will generate a new resolver file for you.

Step 2: Declare the URL in the Resolver Method

In the newly created resolver file, you need to declare the URL to fetch data from using Angular's HTTP module. For example:

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { HttpClient } from '@angular/common/http';

export class ResolverName implements Resolve {
  constructor(private http: HttpClient) {}

  resolve() {
    const apiUrl = ''; // Replace with your API URL
    return this.http.get(apiUrl);

Make sure to replace with the actual API URL you intend to use.

Step 3: Declare in app.routing.ts

Now, you need to integrate the resolver into your application's routing. Open your app.routing.ts and declare the resolver for the specific route. For example:

import { ResolverName } from './path-to-resolver';

const routes: Routes = [
    path: 'video',
    component: ResloverComponentName, // Replace with your component name
    resolve: {
      videoData: ResolverName, // Use the resolver you created
  // Other routes...

Replace 'video', ResloverComponentName, and ResolverName with your specific route path, component name, and resolver name.

Step 4: Declare in app.module.ts

Finally, you need to include the resolver in your app.module.ts file. Import the resolver and add it to the providers array.

import { ResolverName } from './path-to-resolver';

  declarations: [AppComponent],
  imports: [AppRoutingModule],
  providers: [ResolverName], // Add your resolver to the providers array
  bootstrap: [AppComponent],

And that's it! You've successfully created and integrated a resolver in your Angular application to fetch video data. Now, when you navigate to the specified route, the data will be resolved and available for your component to use.


In this tutorial, we've covered the process of creating a resolver in Angular for fetching video data, making your application more efficient and user-friendly. Resolvers are a powerful tool to ensure data is available before rendering a component, improving the overall user experience in your Angular application.


All design and content Copyright © 2012-2018 Gagri Global IT Services Pvt.Ltd. All rights reserved