Angular 13 Service Tutorial with Example

Angular 13 services; In this tutorial, i am going to show you how to create and use services in angular 13 apps.

Angular 13 Service Tutorial with Example

Follow the below given steps to create and use services using external APIs with angular 13 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 13 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 13 services; In this tutorial, you have learn how to create and use services in angular 13 apps.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *