Making service call in Angular

Hi  everyone .

This article is about handling network calls in angular , how to get get response and how to handle error.

If you don't have angular cli installed , you can create an angular project using code sand box.

To handle any service call , you have to import HttpClientModule.



Before making an service call , we should have an api ready . In this article we will be using a public api that gives us questions for quiz.

" https://opentdb.com/api.php?amount=10&type=multiple "

we will be using this api link to make service call.


understanding api call

Now that we are ready with httpModule and api link , we should inject http in our component file.

constructor(private http: HttpClient) {
}



Now we can make a get request on this api , that will give us quiz data

ngOnInit() {
this.http
.get(`https://opentdb.com/api.php?amount=10&type=multiple`)
.subscribe(
res => {
console.log("data:", res);
},
err => {
console.log("error:", err);
}
);
}


http returns an observable that can be subscribe to get response from api.

Subscribe has two parameters ,
  -> first one is for response from api call , which in this case is written as res.
  -> second parameter is for error , if any error occurs while making a service call , it can be handled here.















Comments

Post a Comment

Popular posts from this blog

Implement something like *ngFor of angular using Vanilla js .

Image
Hi everyone . If you have used Angular you must be familiar with *ngFor tag and how easy it makes to render ui elements dynamically. In this article we will see how we can achieve similar thing in vanilla js . For this tutorial I will be using  CodeSandBox  for creating vanilla js and angular project. Angular approach first we will create an array it will contain elements which we will be rendered in the html. As you can see i have an array with five elements . Now I will use *ngFor to run a loop on this to render elements . here we are running a loop in html file and creating button elements with value as that of the array. It gives us 5 buttons . Now we will try to make something very similar in vanilla js. to achieve this dynamic behaviour we will write html in string format and bind it to innerHtml of desired DOM element . we have two variables here one contains array elements like we did in angular. second variable will be used to store html in string format. this is our ...
Read more

How to Git ? Make you first push ?

Image
In this article we will be uploading our project files to  Github using Git commands. Before we start using git , we have to have it installed. Visit  Here  to download git and install it in your machine. It's an GUI based installation. Now that we have our Git installed, we will start using it to upload our code to github. 1. Initialize project folder with git. for this article I have created a folder that contains my project files. and I have only one file in it. Now somehow we have to tell git to start monitoring any changes in this folder. For that we have to open git bash in this folder and write git command "git init". after running this command it should say "Initialized empty Git repository". Now , you have initialized you project folder and any changes from now on will be tracked by git . To check this , write "git status" in git bash and see what appears. it says untracked files , becuase it was there before we told git to monitor this projec...
Read more