Ways to utilize and display data in a *ngFor loop

I have created a simple service for accessing an HTTP service. Can anyone help me with how to bind this service information in *ngFor?

    import { Component } from '@angular/core';
     import {Http } from '@angular/http';
import { Injectable } from '@angular/core';
    @Injectable()
    export class EmployeeService {
        constructor(private http: Http) { }
    GetStudentData() {

        this.http.get('api/Employee').subscribe(response => {

            this.student = response.json();
                })
    }
    }

In the Student.component.ts file:

 GetStudentData() {
        var studentser = this.EmpServ.GetStudentData();
                     //How can I bind here?

    }

How can I save data in one variable and use it later?

Answer №1

To display the fetched data on your component, remember to retrieve it from the service and then bind it within the component.

FetchEmployeeDetails() {
       this.http.get('api/Employee').subscribe(response => {
       this.employeeData = response.json();
       })
  return this.employeeData;
}

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

custom form control component combined with an issue

Trying to develop a custom MatFormFieldControl with ControlValueAccessor implementation. Starting off with a familiar scenario: password form. The objective is to design a form field that takes a single string input, but contains its own internal form fo ...

A step-by-step guide on making a web API request to propublica.org using an Angular service

Currently, I am attempting to extract data from propublica.org's congress api using an Angular 8 service. Despite being new to making Http calls to an external web api, I am facing challenges in comprehending the documentation available at this link: ...

Warnings when compiling Angular with declarations of Angular Material components

Recently, I've been encountering numerous warnings during compilation after installing Angular Material. The warnings persist whether I install it directly from npm or through ng add @angular/material, regardless of whether I opt to use animations or ...

What is the best way to extract accurate information from an observable?

I'm having trouble retrieving the correct data from an observable in my project. Here is the code for my API call: getLastxScans(amount: number): Observable<Scan[]> { return this.http.get<Scan[]>(`${this.ROOT_URL}/Scan/amount/${amo ...

Angular 2 - retrieve the most recent 5 entries from the database

Is there a way to retrieve the last 5 records from a database? logs.component.html <table class="table table-striped table-bordered"> <thead> <tr> <th>Date</th> <th>Logging ...

What is the best way to execute a function while utilizing its default options?

I am working on a project that involves a drop down box and an input box. Here is the HTML code for the drop-down box: <select #select id="id" class="class" (change)="onChange($event)"> <option value="1"> 1 </option> <option v ...

Troubleshooting problems with styling in Angular Material's mat-select component

In my project, I am using Angular 8.0.0 along with Angular Material and the Fuse Theme as an admin panel. The issue I am facing is that every time I change the style of a mat-select component, it initially gets applied but after one or two refreshes, Angul ...

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

As part of a project, I am tasked with creating a custom thermostat app. While I initially wanted to use Ionic for this task, I encountered some difficulty in integrating the provided API into my project. The API.js file contains all the necessary function ...

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

Issue with obtaining access token in Angular 8 authentication flow with Code Flow

As I work on implementing SSO login in my code, I encounter a recurring issue. Within my app.module.ts, there is an auth.service provided inside an app initializer. Upon hitting the necessary service and capturing the code from the URL, I proceed to send a ...

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Currently, I have been working on constructing a complex view that requires multiple functionalities. To ensure proper organization, I have divided it into various custom components. I don't want to go into great detail, but I have managed to make it ...

Preventing going back to a previous step or disabling a step within the CDK Stepper functionality

In my Angular application, there is a CdkStepper with 4 steps that functions as expected. Each step must be completed in order, but users can always go back to the previous step if needed. For more information on CdkStepper: https://material.angular.io/cd ...

The function named updateContact is not defined, even though it has been declared

Presented below is Angular code snippet: @Component({ selector: 'app-detail-view', templateUrl: './detail-view.component.html', styleUrls: ['./detail-view.component.css'] }) export class DetailViewComponent implements O ...

Leveraging Angular CLI in conjunction with the newest AspNetCore Angular 4 Single Page Application template

I'm currently experimenting with using Angular CLI alongside the latest JavaScriptServices AspNetCore Angular Spa template. In the past, I would simply copy and paste a .angular-cli.json file into my project's root directory, change "root" to "C ...

Confirm that the input field in Angular 5 has a default value before proceeding with validation

My form contains an input field with a default value. I am looking to add validation to ensure that the field has exactly 5 characters. <td> <input type="text" maxlength="5" ngModel #number="ngModel" name="number" value="{{data.number}}" ...

Issue encountered during production build in Angular 6 due to NGRX

Trying to create and test the production build, I used the following command: ng build --prod --configuration=production ng serve --prod --configuration=production The build process completed successfully, however, upon opening the site on browsers, an ...

npm - Configuring the maximum memory usage in npm

I encountered an error message while trying to build my Angular project, The error states: "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" I read somewhere that adjusting the max-old-space-size in npm could resolve this issue. How ...

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

I am trying to access a value saved in a service in Angular 8 component and use it in other services. Can anyone help

Setting a value through a component export class UniqueComponent { constructor(service:UniqueService){ } count =0 ; onRefresh(){ this.service.count = 1; } } Using the value in the service UniqueService{ count:any; doSomething(){ //using count ...

When attempting to incorporate a third-party library into Angular2 using the CLI, the process did not go as smoothly as anticipated

Trying to integrate a third party JavaScript library sockJS into my Angular2 project... system.config.ts: /** Mapping relative paths to URLs. */ const map: any = { 'sockjs-client': 'vendor/sockjs-client/' }; /** Configuration for use ...