Exploring the Power of PrimeNG and Observables in Angular 4 with RxJS

After configuring my Angular 4 project with a service like this:

const usersURL = 'http://my.super.url.php';


@Injectable()
export class UserService {



  users: Observable<User[]>

    constructor (public http:Http)

 let tick$ = Observable.timer(100, 60000);


          this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior(<User[]>[]).refCount();

I came across the PrimeNg library which predominantly uses promises by default as shown here:

 @Injectable()
export class CarService {

    constructor(private http: Http) {}

    getCarsSmall() {
        return this.http.get('/showcase/resources/data/cars-small.json')
                    .toPromise()
                    .then(res => <Car[]> res.json().data)
                    .then(data => { return data; });
    }
}

I am wondering about the best approach to quickly integrate this library. Should I modify my service to work with promises or should I adjust the code from the PrimeNG documentation? This is my first time working with PrimeNg so any guidance on how to handle this considering that a lot of my existing code relies on Observables would be appreciated. Thank you in advance. You can find more information in the PrimeNg docs here.

Here is an example of my JSON data:

 {"status":"OK","data":{"apps":{"weather_icon":"storm","running":    {"current":6,"total":12,"sensitive":{"current":1,"total":6},"non_sensitive":{"current":5,"total":6}},"non_running":{"current":6,"sensitive":{"current":5,"unseen":2,"acknowledged":0,"assigned":3},"non_sensitive":{"current":1,"unseen":0,"acknowledged":0,"assigned":1}},"availability": {"current":8,"trend":-6.6},"details":[{"id":1,"label":"Gestion administrative des patients (ORBISAdm)","state":"Critique","state_id":2,"weather_icon":"storm","since":"2h37mn","availability":{"current":68,"trend":"-"},"acknowledged":1,"assigned":1,"assignee":{"id":1,"name":"Thomas Z."}},{"id":2,"label":"Cha\u00eene de messagerie (mail)","state":"Correct","state_id":0,"weather_icon":"sun","since":">6j5h","availability":{"current":100,"trend":"="},"acknowledged":0,"assigned":0},{"id":3,"label":"CRM (CRM)","state":"Correct","state_id":0,"weather_icon":"sun","since":">35j","availability":{"current":100,"trend":"="},"acknowledged":0,"assigned":0}]},

Answer №1

Recently started exploring the capabilities of the PrimeNG library and came across the implementation of Promises.

I decided to modify a tutorial to use observables instead, but encountered an error in the process. Here is how I resolved it:

Both HTTP calls were made, with the second one returning an Observable of any type (not TreeNode[]).

getFiles()  {
  return this.http.get<any>('assets/files.json')
  .toPromise()
  .then(res => res.data as TreeNode[]);
}

getFiles2(): Observable<any> {
  return this.http.get<any>('assets/files.json');
}

When outputting from both methods, the issue becomes apparent:

https://i.stack.imgur.com/s7nB0.png

The observable outputs an object containing an array of data called "data", while the promise simply outputs the array.

The solution is to append the data object and ensure that you cast the returned object to TreeNode[]:

 this.dataSvc.getFiles2().subscribe({
    next: files => {
      this.files2 = files.data as TreeNode[];
    }
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there intellisense support for Angular 2 templates in Visual Studio?

Is it possible for Visual Studio to provide autocomplete suggestions for properties of a Typescript component within a separate HTML view template? ...

Compile Node.js applications for multiple projects using Grunt

I am looking for an efficient way to build a multi-project application. Currently, my project structure looks like this: Each app is a nodejs application - parent folder (git root) |- app1 |-- app1-backend |-- app1-frontend |- app2 |- app3 Right now, I ...

Angular 4: preventing button click until form validation is successful

I am facing a situation where I have a form with required fields and 2 buttons: one button is for submitting the form, and the other button is for downloading a file. When the form is not valid, the submit button is disabled until the form becomes valid: ...

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

I am facing the challenge of calling a simple websocket closure API when the browser is closed in my project. I attempted to utilize HostListener, but unfortunately it did not work as expected. You can find the code snippet below: https://stackblitz.com/ ...

While the AWS CodePipeline is executing the script, an error is appearing in the log. Please address this issue and resolve it

This is the content of buildspec.yml: version: 0.2 phases: install: commands: - npm install -g typescript pre_build: commands: - echo Installing source NPM dependencies... - npm install build: commands: - echo Bui ...

What is the method for determining the type of a TypeScript class member that is associated with a commonly used symbol such as Symbol.toStringTag?

Does anyone know the correct TS syntax for extracting the type of a class method indexed with a well-known Symbol? Here are two incorrect methods: type T = String[Symbol.toStringTag]; // 'Symbol' only refers to a type, but is being used as a name ...

What is the best way to limit input to only numbers and special characters?

Here is the code snippet I am working with: <input style="text-align: right;font-size: 12px;" class='input' (keyup.enter)="sumTotal($event)" type="text" [ngModel]="field.value" (focusin)="focusin()" (focusout)="format()" (keyup.ente ...

Is there a way to automatically validate v-forms inside a v-data-table when the page loads?

In my data entry form, I have utilized a v-data-table with each column containing a v-form and v-text-field for direct value updates. My goal is to validate all fields upon page load to identify any incorrect data inputs. However, I am facing challenges in ...

Angular 8 experiencing unexpected collision issues

Currently, I am utilizing Angular 8 with "typescript": "~3.5.3". My objective is to handle the undefined collision in my code. const { testLocation } = this.ngr.getState(); this.step2 = testLocation && testLocation.step2 ? testLocat ...

Utilizing MakeStyles from Material UI to add styling to a nested element

I was pondering the possibility of applying a style specifically to a child element using MakesStyles. For instance, in a typical HTML/CSS project: <div className="parent"> <h1>Title!</h1> </div> .parent h1 { color: # ...

What is the best method to terminate an Electron application using TypeScript?

I have been searching for the proper method to close an Electron app. My app uses React and TypeScript. After coming across this helpful post, I discovered a working solution: const remote = require('electron').remote; let w = remote.getCurrentW ...

Having trouble implementing types with typescript in Vue-toastification for vuejs 3

Having trouble incorporating vue-toast-notification into my vue 3 project. The issue seems to be with vue Augmenting Types. I've tried other solutions without success, encountering the following error: TS2339: Property '$toast' does not exis ...

Managing copious amounts of data in an Angular project using a Restful API

After developing my own Restful API within a Laravel project, I am faced with the challenge of efficiently managing large amounts of data returned by the API in order to display it on an Angular front-end project. For instance, when using the GET method t ...

I'm looking for a way to modify the Turkish characters and spaces in the names of JSON data objects. I plan to do this using WebApi

I am facing an issue with fetching data through an API. The JSON data format contains Turkish characters and spaces, causing problems when trying to display the data in a datatable. I have attempted to use the replace and parse functions, but so far, I hav ...

Exploring Angular 2's Internationalization Feature

After exploring the Angular 2 github repository, it's clear that numerous i18n features have been implemented. However, I'm struggling to find resources on how to actually use them. Is there any documentation or sample projects available that de ...

What exactly does "tsc" stand for when I compile TypeScript using the command "(tsc greeter.ts)"?

What does tsc stand for when compiling TypeScript code? (tsc greeter.ts) tsc I'm curious about the meaning of tsc in this context. ...

Using TypeScript generics to define function parameters

I'm currently working on opening a typescript method that utilizes generics. The scenario involves an object with different methods, each with specified types for function parameters. const emailTypes = { confirmEmail: generateConfirmEmailOptions, / ...

The continuous rerendering of my component occurs when I use a path parameter

In my project, I am working on utilizing a path parameter as an ID to fetch data for a specific entity. To accomplish this, I have developed a custom data fetching hook that triggers whenever there is a change in the passed parameters. For obtaining the bo ...

Incorporating an Angular 2 Directive within the body tag of an

My goal is to create a custom directive that can dynamically add or remove a class from the body element in HTML. The directive needs to be controlled by a service, as I want to manage the visibility of the class from various components. Question: How ca ...

Guide to implementing validation in an angular 2 dropdown using the Model-driven Approach

When the user clicks the submit button, the dropdown validation does not occur. I want the form to be validated if the user does not select any value, and in that case, the form state should be invalid. In my scenario, I have disabled the submit button whe ...