Chandradev's Blog

Services in the Angular 5 is the reusable entities which are instantiated once and can be used by multiple components.

we can use the service to make the entities as global in entire application.

In this post, we will see
1. how to create service using Angular CLI
2. how to write code in service.
3. How to consume the service method in component.

This is just rearranging the code of my previous post.

Step 1: Go to the Visual Studio Code Terminal and create the emps service like this

Angular Service code will be like this

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

@Injectable()
export class empsService {

  constructor() {

   }

}

Note:@Injectable() is a decorator used with angular services.

Step 2: Create one separate type script class i.e. emps.class.ts to keep the Emp Properties.

export class Emp {
    empId: number;
    emailId: string;
    mobileNum: number;
    address: string;
  
  }

Step 3: Now will add some records in emps.Service.ts file, which will be shared in entire application

import { Injectable } from '@angular/core';
import {Emp} from './emps.class'

@Injectable()
export class EmpsService {
  rowEmps: Emp[] =[ 
    {
    empId: 2000,
    emailId: "Chandradev1@gmail.com",
    mobileNum: 9241503288,
    address: "Bangalore1"
  },
  {
    empId: 2001,
    emailId: "Chandradev2@gmail.com",
    mobileNum: 9241503288,
    address: "Bangalore2"
  },
  {
    empId: 2002,
    emailId: "Chandradev3@gmail.com",
    mobileNum: 9241503288,
    address: "Bangalore"
  },
  {
    empId: 2003,
    emailId: "Chandradev4@gmail.com",
    mobileNum: 9241503288,
    address: "Bangalore3"
  }
]
  constructor() { }

 //Method call the defauls emps
 getEmps():Emp[] {
   return this.rowEmps;
 }

}

Step 4: Now we will consume the service in emp.component.ts file like this

import { Component, OnInit } from '@angular/core';
import {Emp} from '../emps.class';
import { FormsModule } from '@angular/forms';
import {EmpsService} from '../emps.service';



@Component({
  selector: 'app-emp',
  templateUrl: './emp.component.html',
  styleUrls: ['./emp.component.css'],
  providers:[EmpsService]
})

//Initalization of Emp properties
export class EmpComponent implements OnInit {
 
  empId: number;
  emailId: string;
  mobileNum: number;
  address: string;
  emps: Emp[];

// Adding the default value to emp array 
  constructor(private empSer:EmpsService) {
    this.ClearEmpData();
 
  
    // Consuming the getMethod from Service Class
    this.emps=empSer.getEmps();
  }
  ngOnInit() {
  }
  
  //Storing the value in Emp Array
  CreateEmp(){
    let newEmp : Emp= {
      empId:this.empId,
      emailId:this.emailId,
      mobileNum:this.mobileNum,
      address:this.address
    };
    this.emps.push(newEmp);

    this.ClearEmpData();
  }

  // This is for clearing the Emp values 
  private ClearEmpData() { 
    this.empId = null;
    this.emailId = '';
    this.mobileNum = null;
    this.address = '';
  }
}

Step 5: write the custom css class in emp.component.cs file like this

.emp {
    padding: 20px;
    background: #343434;
    color: #e4e4e4;
    border-radius: 10px;
    margin-bottom: 5px;
}

Step 6: Apply this css class in our previously created emp.component.html page like this

<div>
    <fieldset>
        <legend>  <b> Emp Details</b></legend>
       <ul *ngFor="let i of emps" >
           <div class="emp">
          <span> EmpId: {{i.empId}} <br> </span>
          <span>Emp EmailId: {{i.emailId}} <br> </span>
          <span> Emp Mobile Num: {{i.mobileNum}} <br></span>
          <span> Emp Address: {{i.address}} </span>
        </div>
       </ul>
    </fieldset>
 
</div>


<div>
    <fieldset>
        <legend>  <b> Emp Entry Screen with two way data binding demo</b></legend>
        <label> {{ empId }} </label>
<div>
 <b>EmpId:</b>   <input [(ngModel)]="empId" placeholder="enter empId">
</div>
<br>
<label> {{ emailId }} </label>
<div>
    <b>Email Id:</b>   <input [(ngModel)]="emailId" placeholder="enter emp EmailId">
</div>
<br>
<label> {{ mobileNum }} </label>
<div>
    <b>Mobile Number:</b>  <input [(ngModel)]="mobileNum" placeholder="enter mobile Number">
</div>
<br>
<label> {{ address }} </label>
<div>
    <b>Emp Address:</b>   <input [(ngModel)]="address" placeholder="enter address">
</div><br>
<br>
<button class="btn btn-primary" (click)="CreateEmp()"> Save </button>
                      
</fieldset>
 
</div>

Now save and compile the code using ng serve command. You will see the above output.