Angular API Tutorial
Angular is a TypeScript based open-source web application framework which is used for building mobile and desktop web applications. In this tutorial, we are going to build a simple angular application that would fetch and display the details of a particular post office in a region.
Project Setup
First of all, let’s create a new angular application using the following command:
ng new angular-api-tutorial
Open the project in your favourite text editor.
Now, let’s create a model to support the retrieval of post office details.
Next, Let’s create a service by the name ‘postoffice.service.ts’ and write a method called ‘getPostOfficeDetails()’ and perform an HTTP GET request.
ng g s postoffice
Next, head over to app.component.html and create a basic form as shown below:
As it is evident from the above code that when the user clicks on the ‘Search’ button, the onSearch() method is called. Now, let’s define that method in the app.component.ts file. Also, we need to inject the service (postoffice.service.ts), that we created, into this component.
Now, to build the application (in dev mode) and open it in a live server, execute the following command:
ng serve — open
The application is completed successfully 🥳. Screenshots of the different scenarios is as shown below.
We come to the end of this tutorial. The code is available on GitHub. Thanks for reading! Happy Coding!
If you have any queries please post in the comment section below. Connect with me on LinkedIn. Also, if you want to look at my amazing collection of apps developed, don’t forget to check Google Play Store.
Know more about me here.
