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
