In this lesson, we learn how to create an angular service or import service such as relying on the global module and component model. Later we will see how the Angular service is used.


Why use Angular service

Sometimes we have to use a specific code in our project more often, as we use an API call in our project instead of using an Angular service we used in the Angular service Write our code and you can apply that code anywhere through the components. , gives it to us easily, so we use Angular Service. We see examples below.


Create Angular Service

To create a service, we need to make use of the command line then open your command prompt. The command for the same is −

ng g service myservice


Following are the files created at the bottom - myservice.service.specs.ts and myservice.service.ts.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor() { }
}


In this service, the injection module is imported from @ angular / core. Contains an @Injectable method and a class called MyserviceService. We are learning the angular service We will create our service function in this class.


Before we can create a new angular service, we need to install the service created in the main parent app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import { MyserviceService } from './myservice.service';  //  <--------------Import service ---------------

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule, 
    MatButtonModule 
  ],
  providers: [MyserviceService],  //  <------------ add service -------------------
  bootstrap: [AppComponent]
})
export class AppModule { }

We have imported the Service with the class name and the same class is used in the providers in the app.module.ts file. Let us now create a service function.

In the service class, we will create a function that will display today’s date and time. We can use the same function in the use component app.component.ts. How to use it in components.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor() { }

  showTodayDate() {
    let newdate = new Date();
    return newdate;
 }
}

In the above service file, we have created a function showTodayDate. Now we will return the new Date() created. How we can access this function in the component class.

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service'; // <-------------- import service---------

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myfirstproject';

  todaydate: any;

  constructor(private myservice: MyserviceService) {}
  ngOnInit() {
     this.todaydate = this.myservice.showTodayDate();
     console.log(this.todaydate);
     
  }
}

We saw above that the ngOnInit write function gets called by default in any component created and To fetch more details of the angular service, we need to first import the service in the component ts file.

We will display the date and time in the .html file as shown below −

<h1 class="text-center mt-5">How To Implement Angular Service With Example - rathorji.in</h1>
<h2 class="text-center">{{todaydate}}</h2>

I hope it can help you...