What is the best way to anticipate a formal announcement?

Hey there! I'm trying to set options for my Datatable and add a new field in my objects, but I need to await the completion of these dtOptions. How can I achieve this in the ngOnInit lifecycle hook?

export class MyDashboardComponent implements OnInit {
  grades: any = [];
  dtOptions: DataTables.Settings = {};
  buffer: any = "";

  constructor(private apiService: ApiService, private _auth: AuthService, private http: HttpClient) {
  }

  async ngOnInit(): Promise<void> {
    this.dtOptions = {
      order: [[0, "desc"]],
      responsive: true,
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        this.http
          .post<DataTablesResponse>('http://localhost:4000/grade/readByStudentId', {
            login: this._auth.getUserData().login,
            dataTablesParameters
          }).subscribe(resp => {
          this.grades = resp.data;
          callback({
            recordsTotal: resp.recordsTotal,
            recordsFiltered: resp.recordsFiltered,
            data: []
          });
        });
      },
      columns: [{data: 'id'}, {data: 'firstName'}, {data: 'lastName'}]
    };

    await this.grades.forEach(grade => {
      this.getTpName(grade.tp_id)
        .pipe(take(1))
        .subscribe(tpName => {
          grade.push({tpName : tpName});
        });
    });
  }

Answer №1

To incorporate the desired functionality after the post functions, place it within the subscribe() method of the post function.

Ensure that the code below is relocated inside the subscription block following the line where you assign the grades value:

this.grades.forEach(grade => { this.getTpName(grade.tp_id) .pipe(take(1)) .subscribe(tpName => { grade.push({tpName : tpName}); }); });

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

Encountering issues with managing CometD channels within Angular 2

After dabbling in Angular2 and Typescript, I decided to challenge myself by creating an application using plain javascript with the CometD library. The goal of this app was to retrieve data from a CometD channel and present it to the user in some way. So, ...

Using a jQuery plugin within an Angular 2 component: A step-by-step guide

Looking to implement an image slider plugin called Vegas only on the home page within my Angular 2 application. The Vegas jQuery plugin has been added via npm and is located under the /node_module directory. The following code snippet shows my home page c ...

Converting UK DateTime to GMT time using Angular

I am currently working on an angular project that involves displaying the start and end times of office hours in a table. For instance, the office operates from 8:30 AM to 5:30 PM. This particular office has branches located in the UK and India. Since u ...

Is it possible to create a TypeScript class that contains various custom functions?

Exploring TypeScript is a fresh yet exciting journey for me! In the world of JavaScript, checking if an object has a function and then calling it can be achieved with code like this: if(this['my_func']) { this['my_func'](); } Howeve ...

Angular error TS2531: Object may be null

Within my Component.html file, I have an input field set up like this: <input type="text" (change) = "setNewUserName($event.target.value)"/> The code within the component.ts file looks like this: import { Component } from "@ ...

Debugging in Next.js and Sanity.io: "Client Components do not support async/await yet, only Server Components."

I am a beginner working on creating a website and e-commerce store using React, Next 14, Typescript, and Sanity as the CMS. I have been following a tutorial available at https://www.youtube.com/watch?v=g2sE034SGjw&t. Encountering the following error: ...

Steps for utilizing a function from the parent component to initialize TinyMCE

I have implemented an uploading function in my parent component. As I set up tinymce, I connected the [init] property of my component to the loadConfig() function. <editor [(ngModel)]="data" [init]="loadConfig()"></editor> The loadConfig func ...

Update the CSS variables in Angular Material version 15 to reflect new changes

Angular Material 15 introduces some significant changes to colors and spacing. As a result, I find myself needing to override the default CSS variable values in my styles.scss file. :root { --mdc-typography-button-letter-spacing: 'normal'; ...

Using NGXS in combination with Firestore or Firebase Authentication

As a newcomer to the topic, I recently discovered that the NGXS state manager for Angular has been released. I am interested in understanding how to connect the Firestore or Firebase Auth to NGXS, but because it is relatively new, I have struggled to fin ...

Setting up Mailgun with TypeScript on Firebase Cloud Functions

Currently, I am working on a Cloud Function within Firebase to integrate with Mailgun for sending emails, following the guidelines provided in the Mailgun documentation. My challenge lies in implementing this functionality using TypeScript, as I have been ...

Personalizing Dialog Title in material-ui

While delving into the world of React and Material-UI, I encountered a challenge in updating the font color in the DialogTitle component. After browsing through various resources, I came across a helpful link that suggested overriding the dialog root class ...

What is the best way to bundle a TypeScript package along with its dependencies for seamless integration with various Next.js projects on a local environment

Currently, I am immersed in a project with the following arrangement: / # repository root /core # A local, unpublished npm package used by both projectA and projectB /projectA # A Next.js app /projectB # Another Next.js app In my setup, I gene ...

A guide on implementing isomorphic types in TypeScript

Consider the following scenario with two files, file.ts: let a: Message = "foo" let b: Message = "bar" let c: Message = "baz" Now let's introduce a second file, file2.ts type Message = string function fun(abc: Message): void { } When using functi ...

Exploring Angular RxJS: the art of filtering Observable arrays

Is there a way to effectively filter an array Observable in Angular? I am working with an observable Array: announcementList$: Observable<Announcement[]> = this.announcementService.getAnnouncement(0,0).pipe(filter(Boolean),shareReplay(), map(({data} ...

The functionality of MaterializeCSS modals seems to be experiencing issues within an Angular2 (webpack) application

My goal is to display modals with a modal-trigger without it automatically popping up during application initialization. However, every time I start my application, the modal pops up instantly. Below is the code snippet from my component .ts file: import ...

Using a custom TypeScript wrapper for Next.js GetServerSideProps

I developed a wrapper for the SSR function GetServerSideProps to minimize redundancy. However, I am facing challenges in correctly typing it with TypeScript. Here is the wrapper: type WithSessionType = <T extends {}>( callback: GetServerSideProps&l ...

How can I restrict the highest possible date selection in reactjs?

I am working on a project that requires users to select dates using datetime-local, but I want to limit the selection to only three months ahead of the current date. Unfortunately, my current implementation is not working as expected. Any assistance woul ...

The code for filtering an array in Angular 9 seems to be failing to display the expected filtered items

Here is the JSON data: [ { "products": [ { "id": "1", "name": "Apple", "price": "free", "category": "Fruits" }, { And so on And this : [{ "categories": [ ...

Angular is having trouble with the toggle menu button in the Bootstrap template

I recently integrated this template into my Angular project, which you can view at [. I copied the entire template code into my home.component.html file; everything seems to be working fine as the CSS is loading correctly and the layout matches the origina ...

Tips for dynamically altering the data type of an object in Angular depending on a certain condition

I'm currently in the process of developing an online store and facing challenges with integrating a dynamic form system that can adapt based on the type of product being added to the store. For instance, if I select the 'Clothing' category, ...