Angular 16 Service Tutorial with Example

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.

Angular 16 Service Tutorial with Example