Ex2 solution#2
Conversation
GabrielInTheWorld
left a comment
There was a problem hiding this comment.
In general, the code looks good!
There is still something to do.
| }); | ||
| } | ||
|
|
||
| public ngOnInit(): void {} |
There was a problem hiding this comment.
Remove unused functions
| <input id="firstName" formControlName="firstName" type="text" placeholder="First Name..." autofocus> | ||
| <input id="lastName" formControlName="lastName" type="text" placeholder="Last Name..."> | ||
|
|
||
| <button type="submit" class="smolButton addUser" [disabled]="addForm.value.title==='' || addForm.value.firstName==='' || addForm.value.lastName===''">+ Add User</button> |
There was a problem hiding this comment.
Write logic in the .ts-file
| if(this.addForm.value.title==null){ | ||
| this.messageService.add(`${this.addForm.value.firstName} ${this.addForm.value.lastName}`); | ||
| } | ||
| else{ | ||
| this.messageService.add(`${this.addForm.value.title} ${this.addForm.value.firstName} ${this.addForm.value.lastName}`); | ||
| } |
There was a problem hiding this comment.
You can simplify the message to only extend the "base" message by a title, if a title is provided.
| { path: 'userlist', component: UserlistComponent }, | ||
| { path: 'edit', component: EditviewComponent }, | ||
| { path: 'dashboard', component: DashboardComponent }, | ||
| { path: 'detail/:id', component: UserDetailComponent }, | ||
| { path: '', redirectTo: '/dashboard', pathMatch: 'full' } |
There was a problem hiding this comment.
Every route should point to a lazy loaded module
| { path: 'userlist', component: UserlistComponent }, | ||
| { path: 'edit', component: EditviewComponent }, | ||
| { path: 'dashboard', component: DashboardComponent }, | ||
| { path: 'detail/:id', component: UserDetailComponent }, |
There was a problem hiding this comment.
Try to write for every url segment an own path
| // getUsers(): void { | ||
| // this.userService.getUsers() | ||
| // .subscribe(users => this.users = users); | ||
| // } |
| }) | ||
| export class UserlistComponent implements OnInit { | ||
|
|
||
| users: BehaviorSubject<Map<number, User>> = new BehaviorSubject(new Map()); |
| @@ -0,0 +1,33 @@ | |||
| import { Component, OnInit } from '@angular/core'; | |||
| import { BehaviorSubject } from 'rxjs'; | |||
| //import { Title } from '@angular/platform-browser'; | |||
| { path: 'userlist', component: UserlistComponent }, | ||
| { path: 'edit', component: EditviewComponent }, | ||
| { path: 'dashboard', component: DashboardComponent }, | ||
| { path: 'detail/:id', component: UserDetailComponent }, |
There was a problem hiding this comment.
Besides: You point with every route (except the dashboard) to a user-concerning component. Therefore, create at least a user-module and write something like this:
| { path: 'userlist', component: UserlistComponent }, | |
| { path: 'edit', component: EditviewComponent }, | |
| { path: 'dashboard', component: DashboardComponent }, | |
| { path: 'detail/:id', component: UserDetailComponent }, | |
| { path: '', component: UserlistComponent }, | |
| { path: 'edit/:id', component: EditviewComponent }, | |
| { path: 'detail/:id', component: UserDetailComponent }, |
| templateUrl: './editview.component.html', | ||
| styleUrls: ['./editview.component.scss'] | ||
| }) | ||
| export class EditviewComponent implements OnInit { |
There was a problem hiding this comment.
In general: Name components related to their concerns. For example: UserEditViewComponent.
I did it!