HttpClientModule and HttpClientInMemoryWebApiModule import

Author: Demiara

src/app/app.module.ts

@@ -1,22 +1,25 @@
+import { AppComponent } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { HttpClientModule } from '@angular/common/http';
+import { InMemoryDataService } from './in-memory-data.service';
 import { NgModule } from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import { AppComponent } from './app.component';
-
 
 @NgModule({
-  declarations: [
-    AppComponent,
-
-  ],
-  imports: [
-    BrowserModule,
-
-    FormsModule,
-
-  ],
-  providers: [
-  ],
-  bootstrap: [AppComponent]
+    declarations: [AppComponent, HeroesComponent],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpClientModule,
+        HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
+            dataEncapsulation: false,
+            passThruUnknownUrl: true,
+            put204: false,
+        }),
+    ],
+    providers: [],
+    bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/in-memory-data.service.ts

@@ -0,0 +1,13 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+
+export class InMemoryDataService implements InMemoryDbService {
+    createDb() {
+        const heroesList = [
+            { id: 11, name: 'Dr Nice' },
+            { id: 12, name: 'Narco' },
+            { id: 13, name: 'Bombasto' },
+            { id: 14, name: 'Celeritas' },
+        ];
+        return { heroesList };
+    }
+}

src/styles.css

@@ -1,65 +1,69 @@
 /* Global Styles */
 h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
+    color: #369;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 250%;
 }
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
+h2,
+h3 {
+    color: #444;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: lighter;
 }
 body {
-  margin: 2em;
+    margin: 2em;
 }
-body, input[text], button {
-  color: #333;
-  font-family: Cambria, Georgia;
+body,
+input[text],
+button {
+    color: #333;
+    font-family: Cambria, Georgia;
 }
 a {
-  cursor: pointer;
-  cursor: hand;
+    cursor: pointer;
+    cursor: hand;
 }
 button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
+    font-family: Arial;
+    background-color: #eee;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    cursor: hand;
 }
 button:hover {
-  background-color: #cfd8dc;
+    background-color: #cfd8dc;
 }
 button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
+    background-color: #eee;
+    color: #aaa;
+    cursor: auto;
 }
 
 /* Navigation link styles */
 nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
+    padding: 5px 10px;
+    text-decoration: none;
+    margin-right: 10px;
+    margin-top: 10px;
+    display: inline-block;
+    background-color: #eee;
+    border-radius: 4px;
 }
-nav a:visited, a:link {
-  color: #607D8B;
+nav a:visited,
+a:link {
+    color: #607d8b;
 }
 nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
+    color: #039be5;
+    background-color: #cfd8dc;
 }
 nav a.active {
-  color: #039be5;
+    color: #039be5;
 }
 
 /* everywhere else */
 * {
-  font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
 }