Angular Series #6: Services in Angular

import { Injectable } from ‘@angular/core’;import {Iproduct} from ‘./product’;@Injectable()export class ProductService{getProducts():Iproduct[]{return [{pid:’1',pname:’TestProduct1',pstatus:’Sold’},{pid:’2',pname:’TestProduct2',pstatus:’Unsold’},{pid:’3',pname:’TestProduct3',pstatus:’Sold’}];}}
import { Component, OnInit } from ‘@angular/core’;import {Iproduct} from ‘./product’;import {ProductService} from ‘./product.service’;@Component({selector: ‘app-prod-details’,templateUrl: ‘./prod-details.component.html’,styleUrls: [‘./prod-details.component.css’],providers:[ProductService]})export class ProdDetailsComponent implements OnInit {products:Iproduct[];selectedradioval:string=’Total’;//With Constructorconstructor(private _productService:ProductService) {this.products=this._productService.getProducts();}ngOnInit() {}//With ngOnInitconstructor(private _productService:ProductService) {}ngOnInit() {this.products=this._productService.getProducts();}gettotalproductcount():number{return this.products.length;}getsoldproductcount():number{return this.products.filter(p=>p.pstatus===’Sold’).length;}getunsoldproductcount():number{return this.products.filter(p=>p.pstatus===’Unsold’).length;}Onproductradiobuttonchnage(selectedval:string):void{this.selectedradioval=selectedval;}}
<app-prod-count[all]=”gettotalproductcount()”[sold]=”getsoldproductcount()”[unsold]=”getunsoldproductcount()”(countradiobuttonselectionchange)=”Onproductradiobuttonchnage($event)”></app-prod-count><table><thead><tr><th>Product ID</th><th>Product Name</th><th>Product Status</th></tr></thead><tbody><ng-container *ngFor=”let product of products;”><tr *ngIf=”selectedradioval==’Total’ || selectedradioval==product.pstatus “><! — <tr *ngFor=”let product of products;” *ngIf=”selectedradioval==’Total’ || selectedradioval==product.pstatus “> →<td>{{product.pid}}</td><td>{{product.pname}}</td><td>{{product.pstatus}}</td></tr></ng-container></tbody></table><br/>

--

--

--

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Big O ,performance , heaps, sparse arrays in javaScript and how they peeked my interest

Cypress Tip: In-Spec Functions

Salesforce lighting component

Javascript Functions: Higher-order Functions

Application Frameworks Project

Five awesome React packages to check out

How To Develop and Build Vue.js App With NodeJS Backend — Typescript Version

Should I use a frontend framework to develop SPA?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vaibhav Bhapkar

Vaibhav Bhapkar

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

More from Medium

Lazy loading with Angular

Angular: Pipe testing with Jasmine & Karma

Import and export data in CSV in Angular.

How to fix “ng: command not found” in angular

How to fix