Angular 6 services | Nitesh Thapa

Today i will show you how to create a service but first let’s talk about what is service. For example we want to use data in multiple component we will write logic in service to fetch data from server or API. We don’t have to write a different logic to fetch data from multiple time.

In this example iam using records.service.ts as a service and injected in app.module.ts file in provider and using this in two component with different data employeelist.component.ts and departmentlist.component.ts see the files below for more description.
Demo

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule,routingComponents } from './app-routing.module';
import { RecordsService } from './records.service'
@NgModule({
  declarations: [
    AppComponent,
   routingComponents
  ],
  imports: [
    BrowserModule,FormsModule,AppRoutingModule
  ],
  providers: [RecordsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

departmentlist.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap} from '@angular/router';
import { RecordsService } from '../records.service'

@Component({
  selector: 'app-departmentlist',
  templateUrl: './departmentlist.component.html',
  styleUrls: ['./departmentlist.component.css']
})
export class DepartmentlistComponent implements OnInit {
results = {}
  constructor(private serviceData: RecordsService) { }

  ngOnInit() {
    this.results = this.serviceData.getResult();
  }

}

departmentlist.component.html

 <h3>
      Getting data from the same service
    </h3>
    <ul class="list-group">
  <li *ngFor="let result of results" class="list-group-item"> {{result.color}}</li>
  
</ul>

employeelist.component.ts

import { Component, OnInit } from '@angular/core';
import { RecordsService } from '../records.service'

@Component({
  selector: 'app-employeelist',
  templateUrl: './employeelist.component.html',
  styleUrls: ['./employeelist.component.css']
})
export class EmployeelistComponent implements OnInit {

  results = {}
  constructor(private serviceData: RecordsService) { }

  ngOnInit() {
    this.results = this.serviceData.getResult();
  }

}

employeelist.component.html

   <h3>
      Getting data from the same service
    </h3>
    <ul class="list-group">
  <li *ngFor="let result of results" class="list-group-item"> {{result.value}}</li>
  
</ul>

records.service.ts

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

@Injectable()
export class RecordsService {

  constructor() { }
  getResult(){
    return [
      {
		color: "red",
		value: "#f00"
	},
	{
		color: "green",
		value: "#0f0"
	},
	{
		color: "blue",
		value: "#00f"
	},
	{
		color: "cyan",
		value: "#0ff"
	},
	{
		color: "magenta",
		value: "#f0f"
	},
	{
		color: "yellow",
		value: "#ff0"
	},
	{
		color: "black",
		value: "#000"
	}
    ]
  }
}

Angular6 services

43 thoughts on “Angular6 services”

Leave a Reply Cancel reply