From add8645bbb709ad1313b4048cf2f4b854b740be0 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Sat, 16 Jun 2018 04:29:34 -0300 Subject: [PATCH 1/4] Add hero details, routes, params ``` npx ng g c heroes/hero-details ``` --- src/app/app.component.scss | 7 ---- .../hero-details/hero-details.component.html | 12 +++++++ .../hero-details/hero-details.component.scss | 0 .../hero-details.component.spec.ts | 25 +++++++++++++++ .../hero-details/hero-details.component.ts | 32 +++++++++++++++++++ src/app/heroes/heroes.module.ts | 3 +- src/app/heroes/heroes.router.ts | 6 ++++ src/app/heroes/shared/hero.model.ts | 8 +++++ src/assets/css/index.scss | 6 ++++ 9 files changed, 91 insertions(+), 8 deletions(-) create mode 100644 src/app/heroes/hero-details/hero-details.component.html create mode 100644 src/app/heroes/hero-details/hero-details.component.scss create mode 100644 src/app/heroes/hero-details/hero-details.component.spec.ts create mode 100644 src/app/heroes/hero-details/hero-details.component.ts create mode 100644 src/app/heroes/shared/hero.model.ts diff --git a/src/app/app.component.scss b/src/app/app.component.scss index a6e9ac6..e69de29 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,7 +0,0 @@ -nav { - a { - &.active { - font-weight: bold; - } - } -} diff --git a/src/app/heroes/hero-details/hero-details.component.html b/src/app/heroes/hero-details/hero-details.component.html new file mode 100644 index 0000000..9f048ce --- /dev/null +++ b/src/app/heroes/hero-details/hero-details.component.html @@ -0,0 +1,12 @@ + +

Hero list

+ + +
+ +

Hero

+
{{ activeHero | json }}
diff --git a/src/app/heroes/hero-details/hero-details.component.scss b/src/app/heroes/hero-details/hero-details.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/heroes/hero-details/hero-details.component.spec.ts b/src/app/heroes/hero-details/hero-details.component.spec.ts new file mode 100644 index 0000000..71326bc --- /dev/null +++ b/src/app/heroes/hero-details/hero-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroDetailsComponent } from './hero-details.component'; + +describe('HeroDetailsComponent', () => { + let component: HeroDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeroDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeroDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/heroes/hero-details/hero-details.component.ts b/src/app/heroes/hero-details/hero-details.component.ts new file mode 100644 index 0000000..57ebedd --- /dev/null +++ b/src/app/heroes/hero-details/hero-details.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Hero } from '../shared/hero.model'; + +import { map } from 'rxjs/operators'; + +@Component({ + selector: 'app-hero-details', + templateUrl: './hero-details.component.html', + styleUrls: ['./hero-details.component.scss'], +}) +export class HeroDetailsComponent implements OnInit { + heroes = [ + new Hero({ id: 1, name: 'Saitama' }), + new Hero({ id: 2, name: 'Goku' }), + new Hero({ id: 3, name: 'All Might' }), + ]; + + activeHero: Hero; + + constructor(private route: ActivatedRoute) {} + + ngOnInit() { + this.route.paramMap.pipe(map((params) => +params.get('id'))).subscribe((id) => { + this.activeHero = this.heroes.find((hero) => hero.id === id); + }); + } + + byId(_, hero: Hero) { + return hero.id; + } +} diff --git a/src/app/heroes/heroes.module.ts b/src/app/heroes/heroes.module.ts index 66a8205..79aa675 100644 --- a/src/app/heroes/heroes.module.ts +++ b/src/app/heroes/heroes.module.ts @@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '../../../node_modules/@angular/forms'; +import { HeroDetailsComponent } from './hero-details/hero-details.component'; import { HeroEditComponent } from './hero-edit/hero-edit.component'; import { HeroesComponent } from './heroes.component'; import { RoutingModule } from './heroes.router'; @NgModule({ imports: [RoutingModule, CommonModule, ReactiveFormsModule], - declarations: [HeroesComponent, HeroEditComponent], + declarations: [HeroesComponent, HeroEditComponent, HeroDetailsComponent], }) export class HeroesModule {} diff --git a/src/app/heroes/heroes.router.ts b/src/app/heroes/heroes.router.ts index 3eec365..9dc7fe9 100644 --- a/src/app/heroes/heroes.router.ts +++ b/src/app/heroes/heroes.router.ts @@ -1,5 +1,6 @@ import { RouterModule, Routes } from '@angular/router'; +import { HeroDetailsComponent } from './hero-details/hero-details.component'; import { HeroEditComponent } from './hero-edit/hero-edit.component'; import { HeroesComponent } from './heroes.component'; @@ -13,6 +14,11 @@ const routes: Routes = [ path: 'new', component: HeroEditComponent, }, + + { + path: ':id', + component: HeroDetailsComponent, + }, ]; export const RoutingModule = RouterModule.forChild(routes); diff --git a/src/app/heroes/shared/hero.model.ts b/src/app/heroes/shared/hero.model.ts new file mode 100644 index 0000000..896286c --- /dev/null +++ b/src/app/heroes/shared/hero.model.ts @@ -0,0 +1,8 @@ +export class Hero { + id: number; + name: string; + + constructor(hero: Partial) { + Object.assign(this, hero); + } +} diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 94fcdbe..c8c9c8d 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -12,6 +12,12 @@ legend { padding: .2em .5em; } +a { + &.active { + font-weight: bold; + } +} + form { .ng-touched, .ng-dirty { &.ng-invalid { From 8547ca27d5d38c50ecfd6286ea425762febcf38f Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Sat, 16 Jun 2018 04:38:37 -0300 Subject: [PATCH 2/4] Add router testing module --- src/app/heroes/hero-details/hero-details.component.spec.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/heroes/hero-details/hero-details.component.spec.ts b/src/app/heroes/hero-details/hero-details.component.spec.ts index 71326bc..c298333 100644 --- a/src/app/heroes/hero-details/hero-details.component.spec.ts +++ b/src/app/heroes/hero-details/hero-details.component.spec.ts @@ -1,4 +1,5 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; import { HeroDetailsComponent } from './hero-details.component'; @@ -8,9 +9,9 @@ describe('HeroDetailsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ HeroDetailsComponent ] - }) - .compileComponents(); + declarations: [HeroDetailsComponent], + imports: [RouterTestingModule], + }).compileComponents(); })); beforeEach(() => { From 9976f5b7bcf0abc1984f07356de8fb8d11101547 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Sat, 16 Jun 2018 04:38:48 -0300 Subject: [PATCH 3/4] Format file --- src/app/heroes/heroes.component.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/heroes/heroes.component.spec.ts b/src/app/heroes/heroes.component.spec.ts index 66518e4..d7771b1 100644 --- a/src/app/heroes/heroes.component.spec.ts +++ b/src/app/heroes/heroes.component.spec.ts @@ -8,9 +8,8 @@ describe('HeroesComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); + declarations: [HeroesComponent], + }).compileComponents(); })); beforeEach(() => { From 9c0e7dcba8d6f3c8d6102eb1749f8ed8bed99da7 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Sat, 16 Jun 2018 04:47:52 -0300 Subject: [PATCH 4/4] Add ngx-take-until-destroy to unsubscribe observables --- package-lock.json | 15 +++++++++++++ package.json | 5 +++-- .../hero-details/hero-details.component.ts | 22 +++++++++++++------ 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index ab06792..1310e51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8193,6 +8193,21 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ngx-take-until-destroy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ngx-take-until-destroy/-/ngx-take-until-destroy-3.0.0.tgz", + "integrity": "sha512-CCHROYUUOxhJRlNmfZPCJAegxo3MGgK3Tubb6FuF2mOPxRpwk9LCVITW9kEJvGnbW3aoBQwoJhgmnLWQZGPGRQ==", + "requires": { + "@types/node": "^10.1.4" + }, + "dependencies": { + "@types/node": { + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz", + "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ==" + } + } + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", diff --git a/package.json b/package.json index 1f0a789..90665c1 100644 --- a/package.json +++ b/package.json @@ -26,9 +26,10 @@ "@angular/router": "^6.0.5", "bootstrap": "^4.0.0-beta.2", "core-js": "^2.4.1", + "ngx-take-until-destroy": "^3.0.0", "rxjs": "^6.2.1", - "zone.js": "^0.8.26", - "rxjs-compat": "^6.0.0-rc.0" + "rxjs-compat": "^6.0.0-rc.0", + "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.8", diff --git a/src/app/heroes/hero-details/hero-details.component.ts b/src/app/heroes/hero-details/hero-details.component.ts index 57ebedd..2260093 100644 --- a/src/app/heroes/hero-details/hero-details.component.ts +++ b/src/app/heroes/hero-details/hero-details.component.ts @@ -1,15 +1,17 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { Hero } from '../shared/hero.model'; - +import { TakeUntilDestroy, untilDestroyed } from 'ngx-take-until-destroy'; import { map } from 'rxjs/operators'; +import { Hero } from '../shared/hero.model'; + @Component({ selector: 'app-hero-details', templateUrl: './hero-details.component.html', styleUrls: ['./hero-details.component.scss'], }) -export class HeroDetailsComponent implements OnInit { +@TakeUntilDestroy() +export class HeroDetailsComponent implements OnInit, OnDestroy { heroes = [ new Hero({ id: 1, name: 'Saitama' }), new Hero({ id: 2, name: 'Goku' }), @@ -21,9 +23,15 @@ export class HeroDetailsComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit() { - this.route.paramMap.pipe(map((params) => +params.get('id'))).subscribe((id) => { - this.activeHero = this.heroes.find((hero) => hero.id === id); - }); + this.route.paramMap + .pipe(map((params) => +params.get('id'))) + .pipe(untilDestroyed(this)) + .subscribe((id) => { + this.activeHero = this.heroes.find((hero) => hero.id === id); + }); + } + + ngOnDestroy() { } byId(_, hero: Hero) {