Having trouble consuming data from a service in Angular 6?

Question

Having trouble consuming data from a service in Angular 6?

I'm in the process of creating a basic cache service in Angular; a service that includes a simple setter/getter function for different components to access data from.

Unfortunately, when attempting to subscribe to this service to retrieve the data, the subscribe callback is never triggered and the data remains unretrievable.

catch-service.service.js


import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CacheService {

  cacheData: Observable<any>;

  constructor() { }

  setCacheData(data) {
    this.cacheData = new Observable(data);
  }

  getCacheData(): Observable<any> {
    return from(this.cacheData);
  }
}

component.component.js


...
export class SomeComponent {

  constructor(private cacheService: CacheService) { }

  data = null;

  ngOnInit() {
    this.cacheService.getCacheData().subscribe(resp => {
      console.log(resp);
      this.data = resp;
    });
  }
...

The service has been injected into the module class without any compilation errors. However, the expected data does not get assigned to the component.

angular typescript rxjs angular6 observable

Answer 1

Answer №1

If you want to implement caching in Angular, you can follow this code snippet:

export class CacheService {

     // Define a method to set and get the cache 
     cacheData: Observable<any>
     setCache: (cachedata: any) {
          var newObservable = new Observable(observer => {
            observer.next(cachedata);
            observer.complete();
          });
          this.cacheData = newObservable;

    }
    
    getCacheData(): Observable<any>{
        return this.cacheData;
    }

In your component, you can subscribe to the cached data like this:

service.getCacheData().subscribe((data) => {
    // You will receive the cached data here
});

For further understanding of how Observables work in Angular, you can refer to this Stack Overflow answer:

How create observable with parameters in Angular 6?

Answer 2

If you want to implement caching in Angular, you can follow this code snippet:

export class CacheService {

     // Define a method to set and get the cache 
     cacheData: Observable<any>
     setCache: (cachedata: any) {
          var newObservable = new Observable(observer => {
            observer.next(cachedata);
            observer.complete();
          });
          this.cacheData = newObservable;

    }
    
    getCacheData(): Observable<any>{
        return this.cacheData;
    }

In your component, you can subscribe to the cached data like this:

service.getCacheData().subscribe((data) => {
    // You will receive the cached data here
});

For further understanding of how Observables work in Angular, you can refer to this Stack Overflow answer:

How create observable with parameters in Angular 6?

Answer 3

Answer №2

To successfully execute this code snippet, make sure you have data stored in the cacheData.

Here's an illustration:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  cacheData: Observable<any> = new Observable(observer => {
    observer.next(1)
    observer.next(2)
    observer.next(3)
    observer.next(4)
  })

  ngOnInit() {
    this.cacheData.subscribe(
      (data) => {
        console.log(data)
      }
    )
  }
}

Within this code block, a new Observable is created using the ngrx library integrated into Angular.

You then proceed to define and assign values that will be consumed (via observer.next()) when subscribing to the cacheData property.

observer.next() supports various arguments such as:

Boolean
Number
String
Function
Object
Array
null
undefined

For further insights, visit .

Answer 4

To successfully execute this code snippet, make sure you have data stored in the cacheData.

Here's an illustration:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  cacheData: Observable<any> = new Observable(observer => {
    observer.next(1)
    observer.next(2)
    observer.next(3)
    observer.next(4)
  })

  ngOnInit() {
    this.cacheData.subscribe(
      (data) => {
        console.log(data)
      }
    )
  }
}

Within this code block, a new Observable is created using the ngrx library integrated into Angular.

You then proceed to define and assign values that will be consumed (via observer.next()) when subscribing to the cacheData property.

observer.next() supports various arguments such as:

Boolean
Number
String
Function
Object
Array
null
undefined

For further insights, visit .

Having trouble consuming data from a service in Angular 6?

Answer №1

Answer №2

Similar questions

What is the most effective method for identifying duplicate values in a multidimensional array using typescript or javascript?

Exploring the process of authentication and authorization at individual route levels within Angular 4 using Keycloak

An issue with the Pipe searchByType is resulting in an error stating that the property 'type' is not found on the type 'unknown'

The request.files property in express-fileupload is consistently coming back as undefined

The application was not functioning properly due to an issue with the getSelectors() function while utilizing @ngrx/entity to

Struggling to assign the correct data type to a property in Typescript

Concealing forms within an Angular 5 application

Properties cannot be accessed using the standard method in the controller; however, they function correctly when using an arrow

Exploring the functionalities of React Native with react-hook-form and implementing them with TypeScript

What could be the reason for the discrepancy between my get_token() function and the value obtained from request.META.get("CSRF_COOKIE")?

Angular universal triggers an "Error at XMLHttpRequest.send" issue

Angular 6 form input value displays incorrectly after dynamically closing a tab

How does Typescript's dynamic tuple typing tool display all available options in Autocompletion/Intellisense?

angular2 variable turns null during post request, synchronization breakdown

Replicating an array of typed objects in Angular2

What is the process for choosing nested colors from a theme in Material UI?

Tips for implementing a reusable instance of a class in (SSR) React (comparable to a @Bean in Spring)

Tips for circumventing debounceTime in Angular

Issues arise when attempting to store data into an array with the assistance of FileReader

Concealing the BottomNavigation bar in Nativescript