Read Data from Asp.net Core to Angular 7

asp.net core angular 8
user registration with asp.net core web api and angular 7
asp.net core web api and angular 7 crud
asp.net core angular 7
angular 7 with asp.net mvc
angular 7 project with asp.net core apis
asp.net core angular authentication
asp.net core angular 6

Good day,

I've been doing some self study in Angular 7 and Asp.net core web api.

And now i want to read the result from asp.net core and show in in Angular 7.

This is the code from Asp.net Core

[HttpPost("DataCorrection")]
        public  IActionResult DataCorrection([FromBody] DataCorrectionDto data)
        {
            try
            {
                var request =  Request;
                var values =   _dataCorrection.GetDateRange(data.StartDate, data.EndDate);

                return Ok(values);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                Console.WriteLine(ex.StackTrace);
                throw ex;
            }
        }

The method GetDateRange returns a List of DataCorrection Model

And this is my angular code

     import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,  } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data-correction',
  templateUrl: './data-correction.component.html',
  styleUrls: ['./data-correction.component.css']
})
export class DataCorrectionComponent implements OnInit {
  list: any[];
  selectedDate = new Date();
  form = new FormGroup({
    StartDate: new FormControl(),
    EndDate: new FormControl()
  });

  constructor(private http: HttpClient) { }
  ngOnInit() {
  }

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      this.list = res as any[];
      console.log('Called');
      });
  }

}

And this is the Html Code

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <!-- <input formControlName="first" [(ngModel)]="value"> -->
    <mat-form-field>
      <input matInput formControlName="StartDate"  [matDatepicker]="StartDate" placeholder="Start date">
      <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
      <mat-datepicker #StartDate  ></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
        <input matInput formControlName="EndDate"   [matDatepicker]="EndDate" placeholder="End date">
        <mat-datepicker-toggle matSuffix [for]="EndDate"></mat-datepicker-toggle>
        <mat-datepicker #EndDate  ></mat-datepicker>
      </mat-form-field>
    <div class="form-group">
      <button class="btn btn-primary">Submit</button>
  </div>
  </form>

  <tr *ngFor="let pd of list">
      <td >{{pd.ActualLogin}}</td>
      <td >{{pd.ActualLogout}}</td>
      <td >{{pd.ShiftLogin}}</td>
      <td>
        <i class="far fa-trash-alt fa-lg text-danger" ></i>
      </td>
    </tr>

And now how can i read it properly so that i can load it in a table.

With the code above. It doesn't even populate the table. But it calls the console.log

I tried searching for a solution for hours now. But i'm lost. I don't understand the tutorials and i can't make it work.

This is the response from my web api. I read it from the response tab in the chrome web browser

{"emp_Id":963,"actualLogin":"05:00:11","actualLogout":"05:01:00","shiftLogin":"05:00:00","shiftLogout":"13:00:00","date":"2019-04-03T00:00:00Z"}

This data is what i want to be populated in the table

Thank you.

I don't think this was the problem,

there is spell mistake in your template, pd.ActualLogin but actually in JSON response it is spelled as actualLogin. Change your template to

   <tr *ngFor="let pd of list">
      <td >{{pd.actualLogin}}</td>
      <td >{{pd.actualLogout}}</td>
      <td >{{pd.shiftLogin}}</td>
      <td>
        <i class="far fa-trash-alt fa-lg text-danger" ></i>
      </td>
    </tr>

Build a CRUD App with ASP.NET Core and Angular, This database context provides a way for your C# code to access your database. Add a Workout Controller. In the Controllers folder Visual Studio� Read blob data that comes from asp.net core to Angular 7 (asp.net core) This is the code for my controller Browse other questions tagged c# angular asp.net

Save the result in some variable

example

this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      result = res;
      console.log('Res ' + res);
    });

And try displaying in UI

example

<div>{{result|json}}</div>

This will display result in json format

Note: use ngFor to display result in table based of your output format

Full-stack Tutorial: Angular 5 and ASP.NET Core, Cookies are primarily for reading server-side, whereas localStorage can only be read client-side. So the question is, in your app, who needs this data---the client or� There’s still some configuration data that might make sense to have shared between both Angular and your ASP.NET Core application. Examples of things that might make sense to share both server and client-side are things like public keys, or non-sensitive tokens, or, in a multi-tenant application, information about the current tenant.

You are doing a cross domain request because your api and Angular app are being served on different ports. You can either add a cors header to accept all domains on your api (not recommended) or you can setup a proxy.config.json file so that your api calls are redirected to the same port as your Angular app.

{
  "/api/*": {
    "target": "http://localhost:5000/api/",
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  }
}

And in your Angular use /api/DataCorrection/DataCorrection instead of http://localhost:5000/api/DataCorrection/DataCorrection

Then serve with

ng serve --proxy-config proxy.config.json

ASP Net Core, SQL Server, and Angular 7: Web App Authentication, NET Core Web API, Microsoft SQL Server, and Angular 7. So, the token should be store in Angular 7 app and all access to book API securely and seamlessly We will create a Database for this web application with User and Book tables. Angular 7 has just arrived. In this post, a dev gives a step-by-step guide to creating an Angular 7 app using ASP.NET Core SPA templates in Visual Studio 2017.

Building Web App using ASP.NET Web API Angular 7 and SQL Server, NET Core Web API and Angular 7 CRUD Web Application. The following tools If you get a notification like below just click Yes button. Next, open Next, we have to configure connections to Microsoft SQL Server Database. First, open and � .NET Core 3.0 Preview 3 was released last month, and it includes a bunch of new updates to ASP.NET Core. There are a couple of updates related to Angular.In this new update, the default Angular template is updated to Angular 7 and the option to add authentication while creating an Angular or React application.

Angular 7 Project With ASP.NET CORE APIs (Gym Project), In this project, I have used Entity Framework Core and Dapper ORM to access the database. Added ASP.NET MVC Core Web Project. WebGYM. This tutorial will guide you and help you through getting started with Angular 7 and ASP.NET Core 2.1. In this tutorial, we use Angular 7 Web Application (.NET Core) Template in an ASP.NET Core MVC Application. We will also learn how to work with two new features added to Angular 7, i.e., Virtual Scrolling and Drag and Drop Items.

Use the Angular project template with ASP.NET Core, The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. The Angular app, residing in the� The project template creates an ASP.NET Core app and an Angular app. The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. The Angular app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns. Add pages, images, styles, modules, etc.

Comments
  • The AngularJs tag is for Angular 1.X
  • add the response json you are getting from backend so that it is easy to understand your requirement properly.
  • @ganesh045 hello. I updated the question. I don't understand the json response. So what i did is i pasted the response im getting from the web api. I read the response using the Chrome web browser
  • He will be getting a cors error because the api is on a different port than the Angular app. This wont help him at all.
  • The cors is enabled in my application. I updated the question. Kindly please assist me. Thank you
  • @AdrianBrand when I answered the question, he didn't mentioned about CORS
  • The cors is enabled in my application. But how do i read the data that comes from my asp.net core? I updated my question. Thank you