From: Kai Moritz Date: Sat, 2 May 2020 17:11:56 +0000 (+0200) Subject: 3: Create a Feature Component X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=aa0556604bc625981bfd2f787f7b1ef2dadb9938;p=examples%2Fangular-tour-of-heroes 3: Create a Feature Component a) Make the HeroDetailComponent --- diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bc5d602..39fe27d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,11 +4,13 @@ import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; +import { HeroDetailComponent } from './hero-detail/hero-detail.component'; @NgModule({ declarations: [ AppComponent, - HeroesComponent + HeroesComponent, + HeroDetailComponent ], imports: [ BrowserModule, diff --git a/src/app/hero-detail/hero-detail.component.css b/src/app/hero-detail/hero-detail.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html new file mode 100644 index 0000000..fa00c62 --- /dev/null +++ b/src/app/hero-detail/hero-detail.component.html @@ -0,0 +1,8 @@ +
+

{{hero.name | uppercase}} Details

+
id: {{hero.id}}
+
+ + +
+
diff --git a/src/app/hero-detail/hero-detail.component.spec.ts b/src/app/hero-detail/hero-detail.component.spec.ts new file mode 100644 index 0000000..5e34497 --- /dev/null +++ b/src/app/hero-detail/hero-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeroDetailComponent } from './hero-detail.component'; + +describe('HeroDetailComponent', () => { + let component: HeroDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeroDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeroDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts new file mode 100644 index 0000000..caa9c09 --- /dev/null +++ b/src/app/hero-detail/hero-detail.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Hero } from '../hero'; + +@Component({ + selector: 'app-hero-detail', + templateUrl: './hero-detail.component.html', + styleUrls: ['./hero-detail.component.css'] +}) +export class HeroDetailComponent implements OnInit { + + @Input() hero : Hero; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html index cd87f96..e0067e7 100644 --- a/src/app/heroes/heroes.component.html +++ b/src/app/heroes/heroes.component.html @@ -4,11 +4,3 @@ {{hero.id}} {{hero.name}} -
-

{{selectedHero.name | uppercase}} Details

-
id: {{selectedHero.id}}
-
- - -
-