From 30683b6e1e236d555cc34ca364b426529edf2a55 Mon Sep 17 00:00:00 2001 From: eminda Date: Thu, 28 Sep 2017 13:59:17 +0530 Subject: [PATCH 1/6] Form Completed --- src/app/app.module.ts | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 47ee285..fa6605a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,7 +2,7 @@ import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; -import {FormsModule} from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {DataBindingComponent} from './data-binding/data-binding.component'; import {AngularDirectivesComponent} from './angular-directives/angular-directives.component'; import {Switch1Component} from './angular-directives/switch1/switch1.component'; @@ -11,11 +11,15 @@ import {Switch3Component} from './angular-directives/switch3/switch3.component'; import {RouterModule, Routes} from "@angular/router"; import {FormComponent} from './form/form.component'; import {Form1Component} from './form/form1/form1.component'; -import { Form2Component } from './form/form2/form2.component'; -import { Form3Component } from './form/form3/form3.component'; -import { Form4Component } from './form/form4/form4.component'; -import { BirthYearDirective } from './form/form4/birth-year.directive'; -import { Form5Component } from './form/form5/form5.component'; +import {Form2Component} from './form/form2/form2.component'; +import {Form3Component} from './form/form3/form3.component'; +import {Form4Component} from './form/form4/form4.component'; +import {BirthYearDirective} from './form/form4/birth-year.directive'; +import {Form5Component} from './form/form5/form5.component'; +import {Form6Component} from './form/form6/form6.component'; +import { Form7Component } from './form/form7/form7.component'; +import { Form8Component } from './form/form8/form8.component'; +import { Form9Component } from './form/form9/form9.component'; const appRoutes: Routes = [ {path: 'directive', component: AngularDirectivesComponent}, @@ -26,7 +30,11 @@ const appRoutes: Routes = [ {path: 'form2', component: Form2Component}, {path: 'form3', component: Form3Component}, {path: 'form4', component: Form4Component}, - {path: 'form5', component: Form5Component} + {path: 'form5', component: Form5Component}, + {path: 'form6', component: Form6Component}, + {path: 'form7', component: Form7Component}, + {path: 'form8', component: Form8Component}, + {path: 'form9', component: Form9Component} ] } ]; @@ -46,14 +54,18 @@ const appRoutes: Routes = [ Form3Component, Form4Component, BirthYearDirective, - Form5Component + Form5Component, + Form6Component, + Form7Component, + Form8Component, + Form9Component ], imports: [ BrowserModule, FormsModule, RouterModule.forRoot( appRoutes // , // {enableTracing: true} // <-- debugging purposes only - ) + ), ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] From a071ceea4905a3d95c227cc4f1ce620fe9f5d90b Mon Sep 17 00:00:00 2001 From: eminda Date: Thu, 28 Sep 2017 15:06:53 +0530 Subject: [PATCH 2/6] Angular Observer Observables --- .../angular-services.component.html | 2 +- .../angular-services.component.ts | 13 ++++++++-- .../demo1/demo1.component.html | 10 ++++++++ .../angular-services/demo1/demo1.component.ts | 12 +++++++-- .../demo2/demo2.component.html | 10 ++++++++ .../angular-services/demo2/demo2.component.ts | 11 ++++++-- .../angular-services/value-store.service.ts | 25 ++++++++++++++++--- 7 files changed, 72 insertions(+), 11 deletions(-) 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); } } From 101304d76fba27a807ec41b8c78294715e31531f Mon Sep 17 00:00:00 2001 From: eminda Date: Thu, 28 Sep 2017 16:08:21 +0530 Subject: [PATCH 3/6] Http request workings --- src/app/app.component.html | 1 + src/app/app.module.ts | 10 ++++-- src/app/http/http.component.css | 0 src/app/http/http.component.html | 4 +++ src/app/http/http.component.spec.ts | 25 +++++++++++++ src/app/http/http.component.ts | 54 +++++++++++++++++++++++++++++ 6 files changed, 91 insertions(+), 3 deletions(-) create mode 100644 src/app/http/http.component.css create mode 100644 src/app/http/http.component.html create mode 100644 src/app/http/http.component.spec.ts create mode 100644 src/app/http/http.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 109e680..6269b86 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,7 @@ Directive Form Angular Service + Http diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a5cf300..cab55a0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,8 @@ 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"; const appRoutes: Routes = [ {path: 'directive', component: AngularDirectivesComponent}, @@ -47,6 +49,7 @@ const appRoutes: Routes = [ {path: 'demo2', component: Demo2Component} ] }, + {path: 'http', component: HttpComponent} ]; @@ -71,16 +74,17 @@ const appRoutes: Routes = [ Form9Component, AngularServicesComponent, Demo1Component, - Demo2Component + Demo2Component, + HttpComponent ], imports: [ BrowserModule, FormsModule, RouterModule.forRoot( appRoutes // , // {enableTracing: true} // <-- debugging purposes only - ), ReactiveFormsModule + ), ReactiveFormsModule, HttpClientModule ], - providers: [ValueStoreService], + providers: [ValueStoreService, HttpClient], bootstrap: [AppComponent] }) export class AppModule { 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..928a6bb --- /dev/null +++ b/src/app/http/http.component.ts @@ -0,0 +1,54 @@ +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; + 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); + } + +} From f95a96d3eb253dc210bf9cf48bf8923a39c73896 Mon Sep 17 00:00:00 2001 From: eminda Date: Thu, 28 Sep 2017 16:08:21 +0530 Subject: [PATCH 4/6] Http request workings --- src/app/app.component.html | 1 + src/app/app.module.ts | 10 ++++-- src/app/http/http.component.css | 0 src/app/http/http.component.html | 4 +++ src/app/http/http.component.spec.ts | 25 +++++++++++++ src/app/http/http.component.ts | 56 +++++++++++++++++++++++++++++ 6 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 src/app/http/http.component.css create mode 100644 src/app/http/http.component.html create mode 100644 src/app/http/http.component.spec.ts create mode 100644 src/app/http/http.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 109e680..6269b86 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,7 @@ Directive Form Angular Service + Http diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a5cf300..cab55a0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,8 @@ 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"; const appRoutes: Routes = [ {path: 'directive', component: AngularDirectivesComponent}, @@ -47,6 +49,7 @@ const appRoutes: Routes = [ {path: 'demo2', component: Demo2Component} ] }, + {path: 'http', component: HttpComponent} ]; @@ -71,16 +74,17 @@ const appRoutes: Routes = [ Form9Component, AngularServicesComponent, Demo1Component, - Demo2Component + Demo2Component, + HttpComponent ], imports: [ BrowserModule, FormsModule, RouterModule.forRoot( appRoutes // , // {enableTracing: true} // <-- debugging purposes only - ), ReactiveFormsModule + ), ReactiveFormsModule, HttpClientModule ], - providers: [ValueStoreService], + providers: [ValueStoreService, HttpClient], bootstrap: [AppComponent] }) export class AppModule { 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); + } + +} From 0b98dcf4aafc28703766b76934bf3d730c889bd5 Mon Sep 17 00:00:00 2001 From: eminda Date: Thu, 28 Sep 2017 17:44:30 +0530 Subject: [PATCH 5/6] Pipe work --- src/app/app.component.html | 1 + src/app/app.module.ts | 11 ++++++++--- src/app/pipe/filter-pipe.pipe.spec.ts | 8 ++++++++ src/app/pipe/filter-pipe.pipe.ts | 16 ++++++++++++++++ src/app/pipe/pipe.component.css | 0 src/app/pipe/pipe.component.html | 23 +++++++++++++++++++++++ src/app/pipe/pipe.component.spec.ts | 25 +++++++++++++++++++++++++ src/app/pipe/pipe.component.ts | 22 ++++++++++++++++++++++ 8 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 src/app/pipe/filter-pipe.pipe.spec.ts create mode 100644 src/app/pipe/filter-pipe.pipe.ts create mode 100644 src/app/pipe/pipe.component.css create mode 100644 src/app/pipe/pipe.component.html create mode 100644 src/app/pipe/pipe.component.spec.ts create mode 100644 src/app/pipe/pipe.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 6269b86..0a0a809 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,6 +4,7 @@ Form Angular Service Http + Pipe diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cab55a0..4973d62 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -26,6 +26,8 @@ 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'; const appRoutes: Routes = [ {path: 'directive', component: AngularDirectivesComponent}, @@ -49,7 +51,8 @@ const appRoutes: Routes = [ {path: 'demo2', component: Demo2Component} ] }, - {path: 'http', component: HttpComponent} + {path: 'http', component: HttpComponent}, + {path: 'pipe', component: PipeComponent} ]; @@ -75,7 +78,9 @@ const appRoutes: Routes = [ AngularServicesComponent, Demo1Component, Demo2Component, - HttpComponent + HttpComponent, + PipeComponent, + FilterPipePipe ], imports: [ BrowserModule, FormsModule, RouterModule.forRoot( @@ -84,7 +89,7 @@ const appRoutes: Routes = [ // {enableTracing: true} // <-- debugging purposes only ), ReactiveFormsModule, HttpClientModule ], - providers: [ValueStoreService, HttpClient], + providers: [ValueStoreService, HttpClient, FilterPipePipe], bootstrap: [AppComponent] }) export class AppModule { 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() { + } + +} From 97f4850e01786437d58355bbdb0bc9099ec48a01 Mon Sep 17 00:00:00 2001 From: eminda Date: Thu, 28 Sep 2017 18:58:55 +0530 Subject: [PATCH 6/6] Event in Angular 4 --- src/app/app.component.html | 1 + src/app/app.module.ts | 9 ++++- .../bank-ledger/bank-ledger.component.css | 0 .../bank-ledger/bank-ledger.component.html | 11 ++++++ .../bank-ledger/bank-ledger.component.spec.ts | 25 ++++++++++++ .../bank-ledger/bank-ledger.component.ts | 38 +++++++++++++++++++ ...mmunicate-between-components.component.css | 0 ...municate-between-components.component.html | 18 +++++++++ ...icate-between-components.component.spec.ts | 25 ++++++++++++ ...ommunicate-between-components.component.ts | 31 +++++++++++++++ 10 files changed, 156 insertions(+), 2 deletions(-) create mode 100644 src/app/communicate-between-components/bank-ledger/bank-ledger.component.css create mode 100644 src/app/communicate-between-components/bank-ledger/bank-ledger.component.html create mode 100644 src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts create mode 100644 src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts create mode 100644 src/app/communicate-between-components/communicate-between-components.component.css create mode 100644 src/app/communicate-between-components/communicate-between-components.component.html create mode 100644 src/app/communicate-between-components/communicate-between-components.component.spec.ts create mode 100644 src/app/communicate-between-components/communicate-between-components.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 0a0a809..6e1bfaf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -5,6 +5,7 @@ Angular Service Http Pipe + Event diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4973d62..fdd0f85 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,6 +28,8 @@ 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}, @@ -52,7 +54,8 @@ const appRoutes: Routes = [ ] }, {path: 'http', component: HttpComponent}, - {path: 'pipe', component: PipeComponent} + {path: 'pipe', component: PipeComponent}, + {path: 'event', component: CommunicateBetweenComponentsComponent} ]; @@ -80,7 +83,9 @@ const appRoutes: Routes = [ Demo2Component, HttpComponent, PipeComponent, - FilterPipePipe + FilterPipePipe, + CommunicateBetweenComponentsComponent, + BankLedgerComponent ], imports: [ BrowserModule, FormsModule, RouterModule.forRoot( 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; + } + +}