organize code & add user module

src/app/app.component.html

@@ -1,5 +1,4 @@
 <!--The content below is only a placeholder and can be replaced.-->
-
 <main fxLayout="column">
   <header>
     <mat-toolbar class="mat-elevation-z6">
@@ -12,7 +11,7 @@
         <a [routerLink]="['/hotdeals']" routerLinkActive="active">Sale</a>
       </nav>
       <span class="spacer"></span>
-      <button mat-raised-button>Login</button>
+      <button mat-raised-button [routerLink]="['/login']" routerLinkActive="router-link-active" >Login</button>
     </mat-toolbar>
   </header>
   <section>

src/app/app.module.ts

@@ -2,29 +2,24 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
-import { ProductModule } from '../app/product/product.module';
+import { HomeComponent } from './home/home.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
-
+import { ProductModule } from '../app/product/product.module';
+import { UserModule } from './user/user.module';
+//  Angular Material
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCardModule } from '@angular/material/card';
 import { MatTableModule } from '@angular/material/table';
 import { MatButtonModule } from '@angular/material/button';
-import { MatBadgeModule } from '@angular/material/badge';
+
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
-import { HomeComponent } from './home/home.component';
-import { ProductComponent } from './product/product.component';
-import { ProductDetailComponent } from './product/product-detail.component';
-// import { LoadSpinnerComponent } from './load-spinner/load-spinner.component';
 
 const appRoutes: Routes = [
   { path: 'home', component: HomeComponent },
-  { path: 'product', component: ProductComponent },
-  { path: 'product/:id', component: ProductDetailComponent },
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
@@ -38,16 +33,15 @@ const appRoutes: Routes = [
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    HttpClientModule,
     FlexLayoutModule,
     ProductModule,
-    HttpClientModule,
+    UserModule,
     MatToolbarModule,
     MatIconModule,
     MatCardModule,
     MatTableModule,
     MatButtonModule,
-    MatBadgeModule,
-    MatTooltipModule,
     RouterModule.forRoot(appRoutes)
   ],
   providers: [],

src/app/home/home.component.html

@@ -6,13 +6,12 @@
     <div class="viwer-body" fxLayout="row">
       <img fxFlex=50 src="../../assets/images/wood-3157395_640.jpg" alt="Photo of a Shiba Inu">
       <div fxFlex=50 class="viewer-section">
-        <div fxLayout="column" fxLayoutGap='30px'>
+        <div fxLayout="column" fxLayoutGap='20px'>
-          <span style="color: #01b3e4;">
+          <span fxLayout="column" style="color: #01b3e4;">
-            Developed By: @Raghu Chagarlamudi
+            <p fxLayoutAlign="center" style="margin: auto;">Developed By: </p>
+            <p style="margin: auto;">@Raghu Chagarlamudi</p>
           </span>
-<div fxLayout="row" fxLayoutAlign="space-around center">
+          <div fxLayout="row" fxLayoutAlign="space-around center">
-            <!-- <mat-icon class="viewer-section" fxFlex=50>code</mat-icon>
-                <mat-icon class="viewer-section" fxFlex=50>code</mat-icon> -->
             <a class="social" target="_blank" href="https://github.com/Raghu-Ch">Github</a>
             <a class="social" target="_blank" href="https://twitter.com/ng_raghuch?lang=en">Twitter</a>
           </div>

src/app/product/product.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
@@ -12,15 +12,18 @@ import { ProductComponent } from '../product/product.component';
 import { ProductDetailComponent } from './product-detail.component';
 import { LoadSpinnerComponent } from '../load-spinner/load-spinner.component';
 
+import { ProductRoutingModule } from './products-routing.module';
+
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule,
+    FormsModule,
     MatTableModule,
     MatCardModule,
     MatButtonModule,
     MatDividerModule,
-    MatGridListModule
+    MatGridListModule,
+    ProductRoutingModule
   ],
   declarations: [
     ProductComponent,

src/app/product/products-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ProductComponent } from './product.component';
+import { ProductDetailComponent } from './product-detail.component';
+
+const productsRoutes: Routes = [
+    { path: 'product', component: ProductComponent },
+    { path: 'product/:id', component: ProductDetailComponent }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(productsRoutes)],
+    exports: [RouterModule]
+})
+
+export class ProductRoutingModule { }

src/app/user/login.component.html

@@ -0,0 +1,3 @@
+<p>
+  login works!
+</p>

src/app/user/login.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/user/user.module.spec.ts

@@ -0,0 +1,13 @@
+import { UserModule } from './user.module';
+
+describe('UserModule', () => {
+  let userModule: UserModule;
+
+  beforeEach(() => {
+    userModule = new UserModule();
+  });
+
+  it('should create an instance', () => {
+    expect(userModule).toBeTruthy();
+  });
+});

src/app/user/user.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+import { LoginComponent } from './login.component';
+
+const usersRoutes: Routes = [
+  { path: 'login', component: LoginComponent }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(usersRoutes)
+  ],
+  declarations: [LoginComponent]
+})
+export class UserModule { }