Update article edit route

src/app/app-routing.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { SignInComponent } from "./public/sign-in/sign-in.component";
+import { SignUpComponent } from "./public/sign-up/sign-up.component";
+import { CreateArticleComponent } from "./secure/create-article/create-article.component";
+import { HomeComponent } from "./public/home/home.component";
+import { ArticleComponent } from "./public/article/article.component";
+import { EditArticleComponent } from "./secure/edit-article/edit-article.component";
+
+const routes: Routes = [
+  { path: 'sign-in', component: SignInComponent },
+  { path: 'sign-up', component: SignUpComponent },
+  { path: 'create-article', component: CreateArticleComponent },
+  { path: 'edit-article/:id', component: EditArticleComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'article/:id', component: ArticleComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: '**', redirectTo: '/home' }
+]
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+export const PublicComponents = [
+  SignInComponent,
+  SignUpComponent,
+  CreateArticleComponent,
+  EditArticleComponent,
+  HomeComponent,
+  ArticleComponent,
+]

src/app/app.module.ts

@@ -1,60 +1,39 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule, Routes } from '@angular/router';
-import { FormsModule,  ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
+import { AppRoutingModule, PublicComponents } from "./app-routing.module";
 
 import { MDBBootstrapModule } from 'angular-bootstrap-md';
-import { SignUpComponent } from './public/sign-up/sign-up.component';
 import { TopNavComponent } from './shared/top-nav/top-nav.component';
-import { HomeComponent } from './public/home/home.component';
-import { SignInComponent } from './public/sign-in/sign-in.component';
 import { FooterComponent } from './shared/footer/footer.component';
-import { ArticleComponent } from './public/article/article.component';
 import { UserService } from './services/user.service';
 import { ArticleService } from './services/article.service';
 
 import { QuillModule } from 'ngx-quill';
-import { CreateArticleComponent } from './secure/create-article/create-article.component';
-import { EditArticleComponent } from './secure/edit-article/edit-article.component';
-
-const router: Routes = [
-  { path: 'sign-in' , component: SignInComponent},
-  { path: 'sign-up' , component: SignUpComponent},
-  { path: 'createarticle', component: CreateArticleComponent},
-  { path: 'home' , component: HomeComponent},
-  { path: 'article' , component: ArticleComponent},
-  { path: 'article/:id' , component: ArticleComponent},
-  { path: '' , redirectTo: '/home' , pathMatch: 'full'}
-];
 
 @NgModule({
   declarations: [
     AppComponent,
-    SignUpComponent,
     TopNavComponent,
-    HomeComponent,
-    SignInComponent,
     FooterComponent,
-    ArticleComponent,
-    CreateArticleComponent,
-    EditArticleComponent,
+    PublicComponents,
   ],
   imports: [
     BrowserModule,
+    AppRoutingModule,
     BrowserAnimationsModule,
     MDBBootstrapModule.forRoot(),
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    RouterModule.forRoot(router),
     QuillModule
   ],
   providers: [UserService, ArticleService],
   bootstrap: [AppComponent],
-  schemas: [ NO_ERRORS_SCHEMA ]
+  schemas: [NO_ERRORS_SCHEMA]
 })
-export class AppModule { }
+export class AppModule { }

src/app/public/article/article.component.html

@@ -26,7 +26,7 @@ <h2>
             <!--Social shares-->
             <div class="social-counters ">
 
-              <button mdbBtn type="button" color="secondary" class="waves-light" mdbWavesEffect>Edit Document</button>
+              <button mdbBtn type="button" color="secondary" class="waves-light" mdbWavesEffect (click)="onEdit()">Edit Document</button>
 
               <!--Facebook-->
               <a mdbBtn class="btn-fb waves-light" mdbWavesEffect>

src/app/public/article/article.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-article',
@@ -15,31 +15,35 @@ export class ArticleComponent implements OnInit {
   articleInfo = [
     {
       articleId: 1,
-      userName : 'Raveen',
-      articleTitle : 'What is block chain',
+      userName: 'Raveen',
+      articleTitle: 'What is block chain',
       content: 'This is all about block chain'
-    }, 
+    },
 
     {
       articleId: 2,
-      userName : 'Azkar',
+      userName: 'Azkar',
       articleTitle: 'Why do we need computers?',
       content: 'This is why we need computers'
     }
   ];
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     this.articleId = this.route.snapshot.params['id'];
 
     this.articleInfo.forEach(element => {
-      if(element.articleId == this.articleId) {
+      if (element.articleId == this.articleId) {
         this.articleTitle = element.articleTitle;
         this.articleContent = element.content;
         this.articleAuthor = element.userName;
       }
     });
   }
 
+  onEdit() {
+    this.router.navigateByUrl(`/edit-article/${this.articleId}`)
+  }
+
 }

src/app/secure/edit-article/edit-article.component.html

@@ -0,0 +1 @@
+<h4>Editing article: {{ articleId }}</h4>

src/app/secure/edit-article/edit-article.component.ts

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-edit-article',
   templateUrl: './edit-article.component.html',
   styleUrls: ['./edit-article.component.scss']
 })
 export class EditArticleComponent implements OnInit {
+  public articleId;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.articleId = this.route.snapshot.params['id'];
   }
 
 }