Angular 14 Services Example

Angular 14 services; In this tutorial, you will learn how to create and use services in angular 14 apps.

Services in Angular are simply typescript classes with the @injectible decorator. This decorator tells angular that the class is a service and can be injected into components that need that service. They can also inject other services as dependencies.

Angular 14 Services Example Tutorial

Use the following 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

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Then execute the following command on terminal to install angular material:

ng add @angular/material

Step 2 – Import Modules

Visit 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

Create simple html for displaying a list using services in angular apps. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 13 HttpClient for Sending Http Request Example - Tutsmake.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

Visit 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 execute the following command into it to create service for http client request; as follows:

ng g s services/post

Then visit 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

In this step, execute 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 14 services; In this tutorial, you have learn how to create and use services in angular 14 apps.

Recommended Angular Tutorials