Angular #7 Service

Service:

Service once written and injected to all components in an app.

Service in Angular is a normal class with properties and reusable functions. These functions are called angular components, directives, and other services.

• Easily share data between multiple components

Method 1 - Angular Service 

Exercise 12

Step 1: 

ng new service-demo

Choose y and css.   

Step 2:

Create service by

ng g s employee

Step 3:

open app.module.ts and add the following

import {EmployeeService} from './employee.service';

Step 4:

Create a file called as products.ts under app directory

export class Product {

 

    constructor(productID:number,    name: string ,   price:number) {

        this.productID=productID;

        this.name=name;

        this.price=price;

    }

 

    productID:number ;

    name: string ;

    price:number;

 

}

Step 5

Create a file product.service.ts

import {Product} from './product'

 

export class ProductService{

 

    public  getProducts() {

 

        let products:Product[];

 

        products=[

            new Product(1,'Tesla Phone',500),

            new Product(2,'iPhone',750),

            new Product(3,'Samsung TV',100)

        ]

 

        return products;              

    }

}

 

Step 6 :

Modify app.component.ts as follows

add  imports for product and product service and modify class AppComponent as below 

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

import { ProductService } from './product.service';

import { Product } from './product';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

})

export class AppComponent {

  products!: Product[];

  productService;

  constructor() {

    this.productService = new ProductService();

  }

  getProducts() {

    this.products = this.productService.getProducts();

  }

}

Note products! assertion here.

Step 7

Modify app.component.html with the following

<div class="container">

    <h1 class="heading"><strong>Services </strong>Demo</h1>

    <button type="button" (click)="getProducts()">Get Products</button>

    <div class='table-responsive'>

    <div>

      <table class='table'>

        <thead>

          <tr>

            <th>ID</th>

            <th>Name</th>

            <th>Price</th>

          </tr>

        </thead>

        <tbody>

          <tr *ngFor="let product of products;">

            <td>{{product.productID}}</td>

            <td>{{product.name}}</td>

            <td>{{product.price}}</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

Step 8: In Terminal Prompt, Install Bootstrap 4

npm install bootstrap@4  

Modify styles section in angular.json file

 "styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",

              "src/styles.css"

       

Step 9:

Run in terminal 

ng serve

open localhost:4200 in browser and click getProducts Button

to check the similar output in browser window

Method 2 - Angular Service[DI].... 

Create a angular project in stackblitz

https://stackblitz.com/edit/angular

create services folder under app

create a file data.service.ts under services directory. Add the following contents:

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

@Injectable()

export class DataService {

  count=0;

}

app.component.ts

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

import { DataService } from './services/data.service';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  constructor(private dataService: DataService){}

}

app.module.ts

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

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

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

import {DataService} from './services/data.service'

@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent, HelloComponent ],

  bootstrap:    [ AppComponent ],

  providers: [DataService]

})

export class AppModule { }

app.component.html 

<hello name="{{ name }}"></hello>

<p>

  Start editing to see some magic happen :)

</p>

{{dataService.count}}

Check 0 appears in browser window

hello.component.ts

import { Component, Input } from '@angular/core';

import { DataService } from './services/data.service';

@Component({

  selector: 'hello',

  template: `<h1>Hello {{name}}!{{dataService.count}}</h1>`,

  styles: [`h1 { font-family: Lato; }`]

})

export class HelloComponent  {

  @Input() name: string;

  constructor(private dataService: DataService){}

}

Modify app.component.ts with incrementCount, decrementCount functions.

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

import { DataService } from './services/data.service';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  constructor(private dataService: DataService){}

  incrementCount(){

    this.dataService.count++;

  }

  decrementCount(){

    this.dataService.count--;

  }

}

modify app.component.html as follows

<hello name="{{ name }}"></hello>

<p>

  Start editing to see some magic happen :)

</p>

{{dataService.count}}

<button >Increment</button>

<button>Subtract</decrement>

You can check in the browser (||r as shown below)

Hello Angular!50

Start editing to see some magic happen :)

50