After looking at ways to reduce my code I recently came across some articles and videos on declarative programming or how to retrieve data using HttpClient in a more declarative way.
As recommended best practice I will place the http data access code into a Service and then inject that Service into my component to retrieve the returned Observable. The data can then be accessed using an Async Pipe.
Importing the HttpClientModule
To use the HttpClient we will need to add the HttpClientModule to the imports array of our module.
Import the HttpClientModule from @angular/common/http and add HttpClientModule to the imports array.
Create a Service
We will be using Angular CLI to create our Service and components; firstly, open your terminal from within your project; I use MS Code's terminal.
To generate a Service type ng g s [path and name of Service]
I added the --dry-run flag so I can check the result before committing to any changes. When I'm happy I'll remove this and run again.
Angular CLI generates a basic Service as below
Add data Model
It is good practice to add a Model or Interface to tell Typescript the shape or type of data it should expect.
When generating an Interface we can add an optional flag --type=[type] to add the type to the file name (post.model.ts)
To generate the Interface, we run ng g i [path and name of Interface] --type=[type]
As before I've added the --dry-run flag to check before continuing.
Once the Interface has been created, we can add our data properties.
Using HttpClient within our Service
To use HttpClient within our Service we will need to import the HttpClient from @angular/common/http and inject this into our constructor to assign this to a private variable (_http).
With later Angular versions we can use the inject() function however I prefer the use the constructor.
Create a variable and assign the returned Obserable of the http get function making sure to add our Interface.
Accessing the data from a Component
Create a new Component in the usual way to display the resulting data.
ng g c [path and name of Component]
Once the Component has been created, import the posts-data service and inject this into the constructor assigning it to a private variable.
Create a variable (posts$) and assign to the returned Obserable from the PostDataService created earlier.
Displaying data using the Async Pipe
Now we have a Observable we will need to subscribe to access the data, that's where we can use the Async Pipe, the benefit of the Async Pipe is that it will both subscribe and unsubscribe to the Obserable.
We can also assign a variable to the result of the subscribed observable using the 'async as' syntax, this enables you to use the variable within the element it is assigned including child elements. This can be used within the '*ngIf', so the data will only be available when the data is available.
<div *ngIf="posts$ | async as posts">
…
</div>
Once we have access to the array of data we can iterate over this using an 'ngFor'
<div *ngFor="let post of posts">
{{ post | json }}
</div>
Add the component to where you want to see your data displayed.
Then run your application using ng serve.
And you should see the data displayed. This can be tidied up within your template later using Bootstrap.
A straightforward way of accessing and displaying data using the Angular HttpClient. Obviously we will need to add some error handling and we can also manipulate the data using RXJS. But that's for another day.
Cover photo by mterraza on Freeimages.com