Moving it to its own module

Now the route http://localhost:4200/polls and http://localhost:4200/Welcome will load the page

We can also add more app-poll-components like app-poll-Edit-component

Author: aashishGitHub

angular-playground/pollingApp/src/app/app-poll/app-poll.component.html

@@ -2,13 +2,13 @@
   app-poll works!
 
   <div class="row">
-      <div class="col-sm-3">A </div>
-      <div class="col-sm-6">B
+      <div class="col-sm-3"></div>
+      <div class="col-sm-6">
           <p-chart type="doughnut" [data]="data"  width="30vw" height="80vh"></p-chart>
           <button type="button" pButton (click)="update($event)"></button>
 
       </div>
-      <div class="col-sm-3">C </div>
+      <div class="col-sm-3"></div>
     </div>
 
 

angular-playground/pollingApp/src/app/polls.data.ts renamed to angular-playground/pollingApp/src/app/app-poll/app-poll.data.ts

@@ -1,11 +1,11 @@
 import { InMemoryDbService } from 'angular-in-memory-web-api';
-import { Poll } from './Poll';
+import { AppPoll } from './app-poll';
 
-export class PollsData implements InMemoryDbService{
+export class AppPollData implements InMemoryDbService{
 
 
     createDb(){
-        const polls: Poll[] = 
+        const polls: AppPoll[] = 
         [{
                 "id": 1,
                 "title": "Is bitcoin worth the time and money that mining requires?",

angular-playground/pollingApp/src/app/app-poll/app-poll.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { ChartModule } from 'primeng/primeng';
+
+// Imports for loading & configuring the in-memory web api
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { AppPollData } from './app-poll.data';
+import { AppPollComponent } from './app-poll.component';
+
+// import { ProductListComponent } from './product-list.component';
+// import { ProductDetailComponent } from './product-detail.component';
+// import { ProductEditComponent } from './product-edit.component';
+// import { ProductEditGuard } from './product-edit.guard';
+
+@NgModule({
+  imports: [
+    ChartModule,
+    
+    ReactiveFormsModule,
+    InMemoryWebApiModule.forRoot(AppPollData),
+    RouterModule.forChild([
+      { path: 'polls', component: AppPollComponent },
+      { path: 'polls/:id', component: AppPollComponent },
+      {
+        path: 'polls/:id/edit',
+        //canDeactivate: [ProductEditGuard],
+        component: AppPollComponent
+      }
+    ])
+  ],
+  declarations: [
+    AppPollComponent,
+    // ProductDetailComponent,
+    // ProductEditComponent
+  ]
+})
+export class AppPollModule { }

angular-playground/pollingApp/src/app/poll.service.ts renamed to angular-playground/pollingApp/src/app/app-poll/app-poll.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 
-import {Poll} from './Poll';
+import {AppPoll} from './app-poll';
 import { Observable, of, throwError } from 'rxjs';
 import { catchError, tap, map } from 'rxjs/operators';
 
@@ -11,8 +11,8 @@ export class PollService{
 
 constructor(private http: HttpClient){}
 
-getPolls(): Observable<Poll[]>{
-    return this.http.get<Poll[]>(this.pollUrl)
+getPolls(): Observable<AppPoll[]>{
+    return this.http.get<AppPoll[]>(this.pollUrl)
     .pipe(
         tap(data=> console.log(JSON.stringify(data))),
         catchError(this.handleError)

angular-playground/pollingApp/src/app/Poll.ts renamed to angular-playground/pollingApp/src/app/app-poll/app-poll.ts

@@ -1,4 +1,4 @@
-export interface Poll{
+export interface AppPoll{
 
     id: number,
     title: string,

angular-playground/pollingApp/src/app/app-routing.module.ts

@@ -4,8 +4,8 @@ import { AppPollComponent } from 'src/app/app-poll/app-poll.component';
 
 const routes: Routes = [
   {path: 'welcome', component: AppPollComponent},
-  //{path: '**', redirectTo: "welcome", pathMatch: "full"},
-  //{path:'', redirectTo: "welcome", pathMatch: "full"}
+ // {path: '**', redirectTo: "welcome", pathMatch: "full"},
+  {path:'', redirectTo: "welcome", pathMatch: "full"}
 
 ];
 

angular-playground/pollingApp/src/app/app.module.ts

@@ -2,26 +2,25 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { ChartModule } from 'primeng/primeng';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { AppPollComponent } from './app-poll/app-poll.component';
+//import { AppPollComponent } from './app-poll/app-poll.component';
 import { from } from 'rxjs/internal/observable/from';
+import { AppPollModule } from './app-poll/app-poll.module';
 
 //import { HttpClient } from '@angular/common/http';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    AppPollComponent
+    AppComponent
   ],
   imports: [
    // HttpClient,
+   AppPollModule,
     BrowserModule,
     BrowserAnimationsModule,
-    AppRoutingModule,
-    ChartModule
+    AppRoutingModule    
   ],
   providers: [],
   bootstrap: [AppComponent]