=> {
+ console.log(error);
+ this.log(`${operation} failed: ${error} message`)
+ return of(result as T)
+ }
}
}
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 6ad5eee..8775abc 100644
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -1,8 +1,18 @@
Heroes
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.scss b/src/app/heroes/heroes.component.scss
index 4bf53ff..5f7c543 100644
--- a/src/app/heroes/heroes.component.scss
+++ b/src/app/heroes/heroes.component.scss
@@ -5,6 +5,15 @@
padding: 0;
width: 15em;
}
+
+input {
+ display: block;
+ width: 100%;
+ padding: .5rem;
+ margin: 1rem 0;
+ box-sizing: border-box;
+}
+
.heroes li {
position: relative;
cursor: pointer;
@@ -51,4 +60,31 @@
text-align: right;
margin-right: .8em;
border-radius: 4px 0 0 4px;
+}
+
+.add-button {
+ padding: .5rem 1.5rem;
+ font-size: 1rem;
+ margin-bottom: 2rem;
+}
+
+.add-button:hover {
+ color: white;
+ background-color: #42545C;
+}
+
+button.delete {
+ position: absolute;
+ left: 210px;
+ top: 5px;
+ background-color: white;
+ color: #525252;
+ font-size: 1.1rem;
+ margin: 0;
+ padding: 1px 10px 3px 10px;
+}
+
+button.delete:hover {
+ background-color: #525252;
+ color: white;
}
\ No newline at end of file
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index 35da9a0..4869bb9 100644
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -22,4 +22,15 @@ export class HeroesComponent implements OnInit {
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes)
}
+ add(name: string): void {
+ name = name.trim()
+ if (!name) { return }
+ this.heroService.addHero({ name } as Hero).subscribe((hero: Hero) => {this.heroes.push(hero)})
+ }
+
+ delete(hero: Hero): void {
+ this.heroes = this.heroes.filter(h => h !== hero)
+ this.heroService.deleteHero(hero.id).subscribe()
+ }
+
}
diff --git a/src/app/in-memory-data.service.spec.ts b/src/app/in-memory-data.service.spec.ts
new file mode 100644
index 0000000..eefd761
--- /dev/null
+++ b/src/app/in-memory-data.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InMemoryDataService } from './in-memory-data.service';
+
+describe('InMemoryDataService', () => {
+ let service: InMemoryDataService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(InMemoryDataService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts
new file mode 100644
index 0000000..028a3a0
--- /dev/null
+++ b/src/app/in-memory-data.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { Hero } from './hero';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ const heroes = [
+ { id: 12, name: 'Dr. Nice' },
+ { id: 13, name: 'Bombasto' },
+ { id: 14, name: 'Celeritas' },
+ { id: 15, name: 'Magneta' },
+ { id: 16, name: 'RubberMan' },
+ { id: 17, name: 'Dynama' },
+ { id: 18, name: 'Dr. IQ' },
+ { id: 19, name: 'Magma' },
+ { id: 20, name: 'Tornado' }
+ ]
+ return {heroes}
+ }
+
+ genId(heroes: Hero[]): number {
+ return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11
+ }
+
+ constructor() { }
+}
diff --git a/yarn.lock b/yarn.lock
index 5f440a1..9267728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1876,6 +1876,13 @@ ajv@^6.12.4, ajv@^6.12.5:
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"
+angular-in-memory-web-api@^0.14.0:
+ version "0.14.0"
+ resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.14.0.tgz#4f8aae27d5e59ecb7acbf17ceefb3393c30085a3"
+ integrity sha512-8RLFBpXZONDQxYGKiheaYQQl3iydesCrhWLuzDD6AsQDcOF+HEvIuOfBdJaTWKfqyNZNWjHvXzIyT0bUIunb/A==
+ dependencies:
+ tslib "^2.3.0"
+
ansi-colors@4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"