Angular 16 services; In this tutorial, i am going to show you how to create and use services in Angular 16 apps.
Angular 16 Service Tutorial with Example
Follow the below given steps to create and use services using external APIs with Angular 16 apps.
- Step 1 – Create New Angular App
- Step 2 – Import Modules
- Step 3 – Create List Html in View File
- Step 4 – Update Component ts File
- Step 5 – Create Services
- Step 6 – Start Angular App
Step 1 – Create New Angular App
Run the following command on terminal to install angular app:
ng new my-new-app
Then run the following command on terminal to install angular material:
ng add @angular/material
Step 2 – Import Modules
Go to src/app directory and open app.module.ts file. Then import modules into it; as follows:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 3 – Create List Html in View File
Go to src/app/app.component.html and update the following code into it:
<h1>Angular 16 HttpClient for Sending Http Request Example - Laratutorials.com</h1> <ul class="list-group"> <li *ngFor="let post of posts" class="list-group-item"> {{ post.title }} </li> </ul>
Step 4 – Update Component ts File
Go to the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component, OnInit } from '@angular/core'; import { PostService } from './services/post.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { posts:any; constructor(private service:PostService) {} ngOnInit() { this.service.getPosts() .subscribe(response => { this.posts = response; }); } }
Step 5 – Create Service
Open a terminal and run the following command into it to create service for http client request; as follows:
ng g s services/post
Then go to the src/app/ directory and open post.service.ts. Then add the following code into post.service.ts file:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class PostService { private url = 'http://jsonplaceholder.typicode.com/posts'; constructor(private httpClient: HttpClient) { } getPosts(){ return this.httpClient.get(this.url); } }
Step 6 – Start Angular App
Run the following commands on terminal to start angular app:
ng serve
Open your web browser, type the given URL into it: as follows:
http://localhost:4200
Conclusion
Angular 16 services; In this tutorial, you have learn how to create and use services in Angular 16 apps.