diff --git a/src/app/angular-services/angular-services.component.html b/src/app/angular-services/angular-services.component.html index 6cba903..6d3ed80 100644 --- a/src/app/angular-services/angular-services.component.html +++ b/src/app/angular-services/angular-services.component.html @@ -1,4 +1,4 @@ - + Current Value : {{value}} OtherValue : {{otherValue}}
diff --git a/src/app/angular-services/angular-services.component.ts b/src/app/angular-services/angular-services.component.ts index 20a1f61..c05c301 100644 --- a/src/app/angular-services/angular-services.component.ts +++ b/src/app/angular-services/angular-services.component.ts @@ -1,5 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; +import {ValueStoreService} from "./value-store.service"; @Component({ selector: 'app-angular-services', @@ -7,15 +8,23 @@ import {ActivatedRoute, Router} from "@angular/router"; styleUrls: ['./angular-services.component.css'] }) export class AngularServicesComponent implements OnInit { + value: Number = 0; + otherValue: Number = 0; - constructor(private router: Router, private activatedRoute: ActivatedRoute) { + constructor(private router: Router, private activatedRoute: ActivatedRoute, private valueStore: ValueStoreService) { } ngOnInit() { + this.valueStore.getValue().subscribe(nextVal => { + this.value = nextVal; + }); + this.valueStore.getOtherValueAsObservable().subscribe(next => { + this.otherValue = next; + }) } loadDemo(i: any) { - this.router.navigate(['demo'+i], {relativeTo: this.activatedRoute}); + this.router.navigate(['demo' + i], {relativeTo: this.activatedRoute}); } } diff --git a/src/app/angular-services/demo1/demo1.component.html b/src/app/angular-services/demo1/demo1.component.html index 130e95d..9448405 100644 --- a/src/app/angular-services/demo1/demo1.component.html +++ b/src/app/angular-services/demo1/demo1.component.html @@ -1,8 +1,18 @@

Demo 1

+Value +

Current Value {{value}}
+
+Other Value +
+ +
+Current Value {{otherValue}} +
+ diff --git a/src/app/angular-services/demo1/demo1.component.ts b/src/app/angular-services/demo1/demo1.component.ts index 5162338..ef2a4d1 100644 --- a/src/app/angular-services/demo1/demo1.component.ts +++ b/src/app/angular-services/demo1/demo1.component.ts @@ -8,19 +8,27 @@ import {ValueStoreService} from "../value-store.service"; }) export class Demo1Component implements OnInit { value: Number = 0; + otherValue: Number = 0; constructor(private valueService: ValueStoreService) { } ngOnInit() { - this.load(); + this.valueService.getValue().subscribe(next => { + this.value = next; + }); } save(value: any) { this.valueService.setValue(value); } + saveOther(value: any) { + this.valueService.setOtherValue(value); + } + load() { - this.value = this.valueService.getValue(); + this.otherValue = this.valueService.getOtherValue(); } + } diff --git a/src/app/angular-services/demo2/demo2.component.html b/src/app/angular-services/demo2/demo2.component.html index d05554a..4bd55c1 100644 --- a/src/app/angular-services/demo2/demo2.component.html +++ b/src/app/angular-services/demo2/demo2.component.html @@ -1,7 +1,17 @@

Demo 2

+Value +

Current Value {{value}}
+
+Other Value +
+ +
+Current Value {{otherValue}} +
+ diff --git a/src/app/angular-services/demo2/demo2.component.ts b/src/app/angular-services/demo2/demo2.component.ts index d2cfd67..6d5b6ac 100644 --- a/src/app/angular-services/demo2/demo2.component.ts +++ b/src/app/angular-services/demo2/demo2.component.ts @@ -8,20 +8,27 @@ import {ValueStoreService} from "../value-store.service"; }) export class Demo2Component implements OnInit { value: Number = 0; + otherValue: Number = 0; constructor(private valueService: ValueStoreService) { } ngOnInit() { - this.load(); + this.valueService.getValue().subscribe(next => { + this.value = next; + }); } save(value: any) { this.valueService.setValue(value); } + saveOther(value: any) { + this.valueService.setOtherValue(value); + } + load() { - this.value = this.valueService.getValue(); + this.otherValue = this.valueService.getOtherValue(); } } diff --git a/src/app/angular-services/value-store.service.ts b/src/app/angular-services/value-store.service.ts index e04c212..deab55b 100644 --- a/src/app/angular-services/value-store.service.ts +++ b/src/app/angular-services/value-store.service.ts @@ -1,18 +1,35 @@ import {Injectable} from '@angular/core'; +import {Subject} from "rxjs/Subject"; +import {Observable} from "rxjs/Observable"; +import {BehaviorSubject} from "rxjs/BehaviorSubject"; @Injectable() export class ValueStoreService { - value: Number = 0; + private value = new Subject(); + + private otherValue = new BehaviorSubject(0); constructor() { } - getValue(): Number { - return this.value; + getValue(): Observable { + return this.value.asObservable(); } setValue(value: Number) { - this.value = value; + this.value.next(value); + } + + getOtherValue(): Number { + return this.otherValue.getValue(); + } + + getOtherValueAsObservable(): Observable { + return this.otherValue.asObservable(); + } + + setOtherValue(value: any) { + this.otherValue.next(value); } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 109e680..6e1bfaf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,9 @@ Directive Form Angular Service + Http + Pipe + Event diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a5cf300..fdd0f85 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,12 @@ import {AngularServicesComponent} from './angular-services/angular-services.comp import {Demo1Component} from './angular-services/demo1/demo1.component'; import {Demo2Component} from './angular-services/demo2/demo2.component'; import {ValueStoreService} from "./angular-services/value-store.service"; +import {HttpComponent} from './http/http.component'; +import {HttpClient, HttpClientModule} from "@angular/common/http"; +import {PipeComponent} from './pipe/pipe.component'; +import {FilterPipePipe} from './pipe/filter-pipe.pipe'; +import { CommunicateBetweenComponentsComponent } from './communicate-between-components/communicate-between-components.component'; +import { BankLedgerComponent } from './communicate-between-components/bank-ledger/bank-ledger.component'; const appRoutes: Routes = [ {path: 'directive', component: AngularDirectivesComponent}, @@ -47,6 +53,9 @@ const appRoutes: Routes = [ {path: 'demo2', component: Demo2Component} ] }, + {path: 'http', component: HttpComponent}, + {path: 'pipe', component: PipeComponent}, + {path: 'event', component: CommunicateBetweenComponentsComponent} ]; @@ -71,16 +80,21 @@ const appRoutes: Routes = [ Form9Component, AngularServicesComponent, Demo1Component, - Demo2Component + Demo2Component, + HttpComponent, + PipeComponent, + FilterPipePipe, + CommunicateBetweenComponentsComponent, + BankLedgerComponent ], imports: [ BrowserModule, FormsModule, RouterModule.forRoot( appRoutes // , // {enableTracing: true} // <-- debugging purposes only - ), ReactiveFormsModule + ), ReactiveFormsModule, HttpClientModule ], - providers: [ValueStoreService], + providers: [ValueStoreService, HttpClient, FilterPipePipe], bootstrap: [AppComponent] }) export class AppModule { diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.css b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.html b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.html new file mode 100644 index 0000000..49a185c --- /dev/null +++ b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.html @@ -0,0 +1,11 @@ +
+

Fine Customer


+ +
+ +
+ {{leg}} +
+
+
+
diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts new file mode 100644 index 0000000..954b6c0 --- /dev/null +++ b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BankLedgerComponent } from './bank-ledger.component'; + +describe('BankLedgerComponent', () => { + let component: BankLedgerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BankLedgerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BankLedgerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts new file mode 100644 index 0000000..5a14917 --- /dev/null +++ b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts @@ -0,0 +1,38 @@ +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; + +@Component({ + selector: 'app-bank-ledger', + templateUrl: './bank-ledger.component.html', + styleUrls: ['./bank-ledger.component.css'] +}) +export class BankLedgerComponent implements OnInit, OnChanges { + + @Input() + deposit; + + @Output() + private sms = new EventEmitter(); + + ledger = []; + + + constructor() { + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.deposit && !changes.deposit.isFirstChange()) { + this.ledger.push('Deposit : ' + this.deposit); + this.sms.emit('Deposit Happened : ' + this.deposit); + } + } + + ngOnInit() { + } + + fineCustomer(value: any) { + this.ledger.push('Fine : ' + value); + this.sms.emit('Bank Charges applied for your account : ' + value); + } + + +} diff --git a/src/app/communicate-between-components/communicate-between-components.component.css b/src/app/communicate-between-components/communicate-between-components.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/communicate-between-components/communicate-between-components.component.html b/src/app/communicate-between-components/communicate-between-components.component.html new file mode 100644 index 0000000..6b21c0b --- /dev/null +++ b/src/app/communicate-between-components/communicate-between-components.component.html @@ -0,0 +1,18 @@ +
+
+

Welcome to banking System

+ + Enter Your Deposit +
+ +
+ +
+
+ SMS came :
+ {{sms}} +
+ + + +
diff --git a/src/app/communicate-between-components/communicate-between-components.component.spec.ts b/src/app/communicate-between-components/communicate-between-components.component.spec.ts new file mode 100644 index 0000000..552916c --- /dev/null +++ b/src/app/communicate-between-components/communicate-between-components.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CommunicateBetweenComponentsComponent } from './communicate-between-components.component'; + +describe('CommunicateBetweenComponentsComponent', () => { + let component: CommunicateBetweenComponentsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CommunicateBetweenComponentsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CommunicateBetweenComponentsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/communicate-between-components/communicate-between-components.component.ts b/src/app/communicate-between-components/communicate-between-components.component.ts new file mode 100644 index 0000000..d97b140 --- /dev/null +++ b/src/app/communicate-between-components/communicate-between-components.component.ts @@ -0,0 +1,31 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-communicate-between-components', + templateUrl: './communicate-between-components.component.html', + styleUrls: ['./communicate-between-components.component.css'] +}) +export class CommunicateBetweenComponentsComponent implements OnInit { + value = 0; + latestDeposit: Number; + sms; + + constructor() { + } + + ngOnInit() { + } + + deposit(value: any) { + this.latestDeposit = value; + } + + getDeposit() { + return this.latestDeposit; + } + + showSMS(event) { + this.sms = event; + } + +} diff --git a/src/app/http/http.component.css b/src/app/http/http.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/http/http.component.html b/src/app/http/http.component.html new file mode 100644 index 0000000..0cd4c3a --- /dev/null +++ b/src/app/http/http.component.html @@ -0,0 +1,4 @@ + + +
+{{object |json}} diff --git a/src/app/http/http.component.spec.ts b/src/app/http/http.component.spec.ts new file mode 100644 index 0000000..bbb6d5c --- /dev/null +++ b/src/app/http/http.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HttpComponent } from './http.component'; + +describe('HttpComponent', () => { + let component: HttpComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HttpComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HttpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/http/http.component.ts b/src/app/http/http.component.ts new file mode 100644 index 0000000..189efba --- /dev/null +++ b/src/app/http/http.component.ts @@ -0,0 +1,56 @@ +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import "rxjs/add/operator/takeWhile"; +import {Subscription} from "rxjs/Subscription"; + +@Component({ + selector: 'app-http', + templateUrl: './http.component.html', + styleUrls: ['./http.component.css'] +}) +export class HttpComponent implements OnInit, OnDestroy { + + object: any; + alive = true; + subscription: Subscription; + + constructor(private httpClient: HttpClient) { + } + + ngOnInit() { + } + + ngOnDestroy(): void { + this.alive = false; + if (this.subscription) { + this.subscription.unsubscribe(); + } + } + + requestGet() { + this.httpClient.get('http://httpbin.org/headers').subscribe(data => { + // Read the result field from the JSON response. + this.object = data['headers']; + }); + } + + requestPost() { + this.httpClient.post('http://httpbin.org/post', {}).takeWhile(() => this.alive).subscribe(data => { + // Read the result field from the JSON response. + this.object = data['headers']; + }); + } + + requestGetUnsubscribeWay() { + this.subscription = this.httpClient.get('http://httpbin.org/headers').subscribe(data => { + // Read the result field from the JSON response. + this.object = data['headers']; + }); + // const sub = this.httpClient.get('http://httpbin.org/headers').subscribe(data => { + // // Read the result field from the JSON response. + // this.object = data['headers']; + // }); + // this.subscription.add(sub); + } + +} diff --git a/src/app/pipe/filter-pipe.pipe.spec.ts b/src/app/pipe/filter-pipe.pipe.spec.ts new file mode 100644 index 0000000..610fd02 --- /dev/null +++ b/src/app/pipe/filter-pipe.pipe.spec.ts @@ -0,0 +1,8 @@ +import { FilterPipePipe } from './filter-pipe.pipe'; + +describe('FilterPipePipe', () => { + it('create an instance', () => { + const pipe = new FilterPipePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/pipe/filter-pipe.pipe.ts b/src/app/pipe/filter-pipe.pipe.ts new file mode 100644 index 0000000..f005434 --- /dev/null +++ b/src/app/pipe/filter-pipe.pipe.ts @@ -0,0 +1,16 @@ +import {Pipe, PipeTransform} from '@angular/core'; + +@Pipe({ + name: 'filterPipe' +}) +export class FilterPipePipe implements PipeTransform { + + transform(items: any, name: any): any { + if (name) { + items = items.filter( + item => item.name.toUpperCase().startsWith(name.toUpperCase())); + } + return items; + } + +} diff --git a/src/app/pipe/pipe.component.css b/src/app/pipe/pipe.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pipe/pipe.component.html b/src/app/pipe/pipe.component.html new file mode 100644 index 0000000..a0ac159 --- /dev/null +++ b/src/app/pipe/pipe.component.html @@ -0,0 +1,23 @@ +Without Pipe +
+{{data}} +
+
+With Pipe +
+{{data|json }} +
+
+For loop without filtering of pipes +
+ {{person|json}} +
+
+
+For loop With Custom Pipe + +
+
+
+ {{person|json}} +
diff --git a/src/app/pipe/pipe.component.spec.ts b/src/app/pipe/pipe.component.spec.ts new file mode 100644 index 0000000..ba50ead --- /dev/null +++ b/src/app/pipe/pipe.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PipeComponent } from './pipe.component'; + +describe('PipeComponent', () => { + let component: PipeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PipeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PipeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pipe/pipe.component.ts b/src/app/pipe/pipe.component.ts new file mode 100644 index 0000000..a28f45f --- /dev/null +++ b/src/app/pipe/pipe.component.ts @@ -0,0 +1,22 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-pipe', + templateUrl: './pipe.component.html', + styleUrls: ['./pipe.component.css'] +}) +export class PipeComponent implements OnInit { + data = {name: 'Kamal', city: 'Moratuwa'}; + + people = [{name: 'Nimal', city: 'Colombo'}, {name: 'Kammaliya', city: 'Nugegoda'}, {name: 'Sunil', city: 'Kandy'}, + {name: 'Nirmal', city: 'Ambalangoda'}]; + + name; + + constructor() { + } + + ngOnInit() { + } + +}