Consume a WebAPI in Angular and display the results

Riddhi Valecha

5y1.1kAngular

Dear Team,

I have a web api -

How do I make an Angular Project in Visual Studio 2017, and write the code to display the contents of the Web API?

Please guide on this.

20 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
web api with angularjs
http://www.mukeshkumar.net/articles/angularjs/angularjs-crud-operations-with-web-api
+2
Riddhi Valecha5y ago
Hello Team,

Do anyone has sample code for working with API in MVC and ANgularJS ?

If yes, please provide...
+1
Riddhi Valecha5y ago
Dear TEam,

Please guide - How do I resolve the web service issue ?

ASPX Page -
-------
Console issue -

Please guide
+1
Riddhi Valecha5y ago
Hello Team,
I am getting another error of Angular.js file -

"[$injector:nomod] Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Please suggest, if any solutions for this.

I have already checked the name of controller, and module. They are the same.
+1
Riddhi Valecha5y ago
Hello Team,
I aslo made a view (Using Angular in MVC), but I am not able to run the view.
View Code-
--------------
@model IQueryable

Computer.ComputerType Model.Brand.Name Model.Name
{{ pa.computerComputerType }} {{ pa.modelBrandName }} {{ pa.modelName }}
+1

Computer.ComputerType	Model.Brand.Name	Model.Name
{{ pa.computerComputerType }}	{{ pa.modelBrandName }}	{{ pa.modelName }}

Riddhi Valecha5y ago

Hello Team,

I am sharing my code - of listing the results on .aspx page -

ASPX Design -

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AssetDetailsPending.aspx.cs" Inherits="ENT_CERTIFY_ASSET.AssetsDetails.AssetDetailsPending" %>

Pending Assets

Pending Assets List

Search:

Computer.ComputerType	Model.Brand.Name	Model.Name	Computer.TcpIpHostName	Asset.SerialNo	User.UserName	RIL_Inventoried_User.UserName	Asset.Field1
{{ pa.computerComputerType }}	{{ pa.modelBrandName }}	{{ pa.modelName }}	{{ pa.computerTcpIpHostName }}	{{ pa.assetSerialNo }}	{{ pa.userUserName }}	{{ pa.rIL_Inventoried_UserUserName }}	{{ pa.assetField1 }}	{{ pa.ModelName }}

-------------------

I am getting error - web service not found.

The project folder structure and error details are -

------------------------

Please guide - how do I complete this ?

I am not able to debug the service file (.asmx) file also. THe path is correct.

Rijwan Ansari5y ago
Sample to display list in table:
class="table table-striped table-bordered">


                Name
                Email
                Role



            "let user of users">
                {{user.firstName}} {{user.lastName}}
                {{user.email}}
                {{user.role}}



You can add checkboxes or any control inside ngFor and better grid experiences, implement jquery datatable.
+2
Rijwan Ansari5y ago
Use simple table and display with *ngFor. In table you can display any control like checkbox, textbox, plain text etc.

To use display in table from list sample. Here list is users
class="table table-striped table-bordered">


                Name
                Email
                Role



            "let user of users">
                {{user.firstName}} {{user.lastName}}
                {{user.email}}
                {{user.role}}
+2
Riddhi Valecha5y ago
Hello Team,
I am attaching my work.

I may help to find my mistake and guide me.
+1
Riddhi Valecha5y ago
Hello Team,
I am attached my work. It may help in finding my mistake and guiding me.
-------------
Postman Output-
----

Laptop
HP
ProBook 430 G1
LT0014977
2CE41225N1
Deepak.Kamale

Laptop-HP-ProBook 430 G1-4 GB DDR3-5

Desktop
Lenovo
M73
DT0040142
SPC08WLKS
Deepak.Kamale

CPU-LENOVO-M73-4 GB DDR3-500 GB SATA

Laptop
HP
HP 440 G5
LT0105629
5CD8310MH7
Deepak.Kamale

Laptop-HP-440 G5-8 GB-500 GB-i3

Laptop
Lenovo
L450
LT0032927
PF0BVRKM
Deepak.Kamale

Laptop-LENOVO-L450-4 GB DDR3-500 GB

Laptop
HP
HP 440 G5
LT0105671
5CD8310MB6
Deepak.Kamale

Laptop-HP-440 G5-8 GB-500 GB-i3

Laptop
HP
HP 440 G5
LT0105741
5CD8310MH4
Deepak.Kamale

Laptop-HP-440 G5-8 GB-500 GB-i3

Laptop
Lenovo
L450
LT0032927
PF0BVRKM
Deepak.Kamale
Rahul.Dharmik
Laptop-LENOVO-L450-4 GB DDR3-500 GB

Laptop
HP
HP ProBook 440 G3
LT0062922
5CD6195KGH
Deepak.Kamale
Dhanraj.Kamble
Laptop-HP-ProBook 440 G3-4 GB DDR3-5

+1
Rijwan Ansari5y ago
You can find numerious blogs and vidoes. Try this one.
https://www.c-sharpcorner.com/article/crud-operation-in-angular-7-using-web-api/
+2
Riddhi Valecha5y ago
Hello Team,
Do anyone know -
1. How to use GridView in Angular ?

I am able to convert the XML Output string to .NET Object and get the results in a datatable.

Is there a way to display this datatable in Angular?

If yes, please help.
+1
Riddhi Valecha5y ago
Hello Team,
I am not getting results in asp.net c# Simple code aslo.

I am sharing my code -

public string UATPending()
{
string resulat = "";
string strUrl = "";
try
{
strUrl = "http://";
strUrl = string.Format(strUrl);
if (strUrl != "")
{

String userName = "123";
String passWord = "123";
string credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes(userName + ":" + passWord));
WebRequest requestobjPost = WebRequest.Create(strUrl);
requestobjPost.Method = "GET";
requestobjPost.ContentType = "application/xml";
requestobjPost.Credentials = new NetworkCredential("123", "123");
requestobjPost.Headers[HttpRequestHeader.Authorization] = "BasicAuth"+credentials;
var HttpResponce = requestobjPost.GetResponse();
using (var StreamReader = new StreamReader(HttpResponce.GetResponseStream()))
{
resulat = StreamReader.ReadToEnd();
}
}
else if (strUrl == "")
{
resulat = "Bad Request";
}
}
catch (Exception err) { err.Message.ToString(); return null; }
return resulat;
}
----------------
I have made this method in a controller, with [HttpGet] method.

I am getting the result in XML string.

Now, How do I display this is angular component ?

----------------
I have done the coding in ts file aslo. I am sharing my ts file code - from that I am able to debug the API and is giving correct XML output -
----------------
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import xml2js from 'xml2js';
import { HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-pendingassets.component',
templateUrl: './pendingassets.component.html',
styleUrls: ['./pendingassets.component.css']

})
export class PendingAssetsComponent {
public pendingasset: pendassets[];
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
http.get(baseUrl + 'api/PendingAssetsAPI').subscribe(result => {
this.pendingasset = result;
}, error => console.error(error));
}
}
interface pendassets {
ComputerComputerType: string;
ModelBrandName: string;
ModelName: string;
ComputerTcpIpHostName: string;
AssetSerialNo: string;
UserUserName: string;
RIL_Inventoried_UserUserName: string;
AssetField1: string;
}

+1
Jignesh Kumar5y ago
Hi,

Please refer this link,
https://www.c-sharpcorner.com/article/consuming-asp-net-web-api-in-angular-part-four/
+1
Nikunj Satasiya5y ago
Hi Ridhdhi,

Please read my Angular Article, where I explained each and every step to Create and Consume a WebAPI, Create components in Angular, Create Service in Angular, Display records into Grid by Calling WebAPI as well as also implement searching and sorting on it.

Codingvila: https://www.codingvila.com/2020/12/angular-11-curd-application-web-api-material-design.html

C# Corner: https://www.c-sharpcorner.com/article/angular-11-curd-application-using-web-api-with-material-design/

I hope this helps you.
+1
Riddhi Valecha5y ago
I have Web APIs - whose output I get in XML.
How to Convert XML output to datatable and display data in Angular ?
In .NET, we make classes. But, how to do this in Angular ?

Please guide.
+1
Kiran Mohanty5y ago
Hi,
you can bind api response with html using subscribe method.
this.http.get("url")
          .subscribe((res: Response) => {
              // res :- api response data
              //write logic to load a html table
          });
+1
Sachin Singh5y ago
follow
https://www.c-sharpcorner.com/article/show-data-using-web-api-and-service-in-angular-2/
+1
Riddhi Valecha5y ago
Hello sir,
This link is for making API.
I have the API URL. I have to consume it, display results in gridview with checkboxes and perform insert queries on it.

I need to do it in Angular.
+1
Salman Beg5y ago
Check this link, https://dzone.com/articles/introduction-to-dotnet-core
+2