Workshop3

user-app/src/app/app-routing.module.ts

@@ -7,7 +7,28 @@ import { UserDetailComponent } from './pages/user-detail/user-detail.component';
 import { CreateUserComponent } from './pages/create-user/create-user.component';
 import { AuthGuard } from './guards/auth.guard';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: UserListComponent,
+  },
+  {
+    path: 'about-us',
+    component: AboutUsComponent,
+  },
+  {
+    path: 'contact',
+    component: ContactComponent,
+  },
+  {
+    path: 'create-user',
+    component: CreateUserComponent,
+  },
+  {
+    path: 'user-detail',
+    component: UserDetailComponent,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

user-app/src/app/pages/app/app.component.html

@@ -1,6 +1,2 @@
-<h2>
-  Congratulations! Angular set up is complete.
-  <br />
-  <br />
-  You are ready to begin the workshop3.
-</h2>
+<app-header [title]="name" (changeValue)="changeName()"></app-header>
+<router-outlet></router-outlet>

user-app/src/app/pages/app/app.component.scss

@@ -1 +1,8 @@
-
+.normal {
+  font-size: 15px;
+  color: blue;
+}
+.error {
+  font-size: 18px;
+  color: red;
+}

user-app/src/app/pages/app/app.component.ts

@@ -5,4 +5,27 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent {
+  name: string = 'manasa';
+
+  show: boolean = false;
+  names = ['Arun', 'Mark', 'Smith', 'Jack'];
+  isError: boolean = false;
+  userName: string = '';
+  constructor() {
+    console.log('Constructor called');
+  }
+  changeName() {
+    this.name = 'Steve';
+    console.log(this.userName);
+  }
+  ngOnChanges() {
+    console.log('on changes called');
+  }
+  ngOnInit() {
+    console.log('on init called');
+  }
+  ngOnDestroy() {
+    console.log('on destroy called');
+  }
+}

user-app/src/app/pages/header/header.component.html

@@ -1 +1,13 @@
-<p>Header Works</p>
+<div class="header">
+  <img
+    routerLink=""
+    src="../../../assets/unicourt-logo.png"
+    alt="logo"
+    height="54"
+  />
+</div>
+<div class="menu">
+  <label routerLink="/">HOME</label>
+  <label routerLink="/about-us">ABOUT US</label>
+  <label routerLink="/contact">CONTACT</label>
+</div>

user-app/src/app/pages/header/header.component.ts

@@ -1,8 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  @Input() title: string;
+  @Output() changeValue = new EventEmitter<any>();
+  onClick() {
+    this.changeValue.emit();
+  }
+}

user-app/src/app/pages/user-card/user-card.component.html

@@ -1,3 +1,8 @@
 <div class="user-card">
-  <p>User Card works</p>
+  <label>{{ name }}</label> <br /><br />
+  <span>{{ emailId }}</span> <br />
+  <br />
+  <span>{{ city }}</span> <br />
+  <button class="detail-btn" routerLink="user-detail">DETAIL</button>
+  <button class="delete-btn">DELETE</button>
 </div>

user-app/src/app/pages/user-card/user-card.component.ts

@@ -6,4 +6,9 @@ import { UserService } from 'src/app/services/user.service';
   templateUrl: './user-card.component.html',
   styleUrls: ['./user-card.component.scss'],
 })
-export class UserCardComponent {}
+export class UserCardComponent {
+  @Input() id: number;
+  @Input() name: string;
+  @Input() emailId: string;
+  @Input() city: string;
+}

user-app/src/app/pages/user-list/user-list.component.html

@@ -1,3 +1,10 @@
 <div class="container">
   <p>User List Works</p>
+  <app-user-card
+    *ngFor="let item of users"
+    [id]="item.id"
+    [name]="item.name"
+    [city]="item.city"
+    [emailId]="item.emailId"
+  ></app-user-card>
 </div>

user-app/src/app/pages/user-list/user-list.component.ts

@@ -7,4 +7,18 @@ import { UserService } from 'src/app/services/user.service';
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.scss'],
 })
-export class UserListComponent {}
+export class UserListComponent {
+  //   users: User[] = [
+  //     {
+  //       name: 'Arun',
+  //       city: 'sdsd',
+  //       emailId: 'arunk@unicourt.com',
+  //       id: 1,
+  //     },
+  //   ];
+  // }
+  constructor(private userService: UserService) {}
+  ngOnInit() {
+    this.userService.getUsers();
+  }
+}

user-app/src/app/services/user.service.ts

@@ -1,21 +1,37 @@
 import { Injectable } from '@angular/core';
 import { User, UserDetail } from '../model/common.dto';
-
+import { H}
 @Injectable({
   providedIn: 'root',
 })
 export class UserService {
   baseUrl: string = 'https://jsonplaceholder.typicode.com/users';
   userId: number;
-  users: User[] = [];
+  user: User[] = [];
 
   constructor() {}
 
   userAleadyAdded(): boolean {
     return true;
   }
 
-  getUsers(): void {}
+  getUsers(): void {
+    this.user = [
+      {
+        name : 'Arun',
+        city : 'Mangalore',
+        emailId : 'arunkga@unicourt.com',
+        id : 1
+      },
+      {
+        name : 'Riya',
+        city : 'Coorg',
+        emailId : 'riyajd@unicourt.com',
+        id : 2
+      }
+    ]
+    return this.user;
+  }
 
   getUserDetail(id: number) {}
 

user-app/src/index.html

@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>UserApp</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>UserApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>