<file_sep>import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { User } from "../model/user.model";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
// Not used observable and error handling mechanism just beacause api is not working as expected
@Injectable()
export class UserService {
  API_URL = "https://jsonplaceholder.typicode.com/users/";
  constructor(private _http: HttpClient) {}
  getUsers() {
    return this._http.get(`${this.API_URL}`);
  }
  deleteUser(userID) {
    return this._http.delete(`${this.API_URL}${userID}`);
  }
  createUser(user: User) {
    return this._http.post(`${this.API_URL}`, user);
  }
  updateUser(user: User, userID) {
    return this._http.put(`${this.API_URL}${userID}`, user);
  }
  getuserByID(userID) {
    return this._http.get(`${this.API_URL}${userID}`);
  }
}
<file_sep>import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
  name: "userFilter"
})
export class UserFilterPipe implements PipeTransform {
  transform(users, searchTerm: string, filterBy: string) {
    if (!users || !searchTerm) {
      return users;
    }
    if (filterBy == "company") {
      return users.filter(
        user =>
          user.company.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !==
          -1
      );
    } else if (filterBy == "email") {
      return users.filter(
        user =>
          user.email.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
      );
    } else {
      return users.filter(
        user => user.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
      );
    }
    
  }
}
<file_sep>import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { User } from "../model/user.model";
import { UserService } from "../services/user.service";
@Component({
  selector: "app-update-user",
  templateUrl: "./update-user.component.html",
  styleUrls: ["./update-user.component.css"]
})
export class UpdateUserComponent implements OnInit {
  userID;
  // In Last moment i have missed something so remove type user model. Need to check
  user: any = {
    id: null,
    name: null,
    username: null,
    email: null,
    address: null,
    phone: null,
    website: null,
    company: null
  };
  constructor(
    private route: ActivatedRoute,
    private _userService: UserService,
    private _routeNavigaor: Router
  ) {
    this.userID = route.snapshot.params["id"];

    this._userService.getuserByID(this.userID).subscribe((data) => {
      this.user = data;
      this.user.companyName = this.user.company.name;
      this.user.city = this.user.address.city;
    });
  }
  ngOnInit() {}
  updateUser(userForm) {
    if (userForm.valid) {
      this._userService.updateUser(this.user, this.userID);
      alert('Info Updated, Redirecting to home page')
      this._routeNavigaor.navigate(['/home'])

    }
  }
}
<file_sep>import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";

import { AppComponent } from "./app.component";
import { UserService } from "./services/user.service";
import { DashboardComponent } from "./dashboard/dashboard.component";
import { UpdateUserComponent } from "./update-user/update-user.component";
import { AdduserComponent } from "./adduser/adduser.component";
import { HttpClientModule } from "@angular/common/http";
import { UserListComponent } from './user-list/user-list.component';
import { FormsModule } from '@angular/forms';
import { UserFilterPipe } from './pipes/user-filter.pipe';
@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    UpdateUserComponent,
    AdduserComponent,
    UserListComponent,
    UserFilterPipe
  ],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, FormsModule],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule {}
<file_sep>import { Component, OnInit } from "@angular/core";
import { User } from "../model/user.model";
import { UserService } from "../services/user.service";

@Component({
  selector: "app-adduser",
  templateUrl: "./adduser.component.html",
  styleUrls: ["./adduser.component.css"]
})
export class AdduserComponent implements OnInit {
  user: User = {
    id: null,
    name: null,
    username: null,
    email: null,
    address: null,
    phone: null,
    website: null,
    company: null
  };
  constructor(private _userService: UserService) {}
  ngOnInit() {}
  addUser(userForm) {
    if (userForm.valid) {
      this._userService.createUser(this.user);
    }
  }
  _fnisActionHidden(){
    return true;
  }
}
<file_sep>import { Component, OnInit, Input } from "@angular/core";
import { UserService } from "../services/user.service";
import { Router } from "@angular/router";
@Component({
  selector: "app-user-list",
  templateUrl: "./user-list.component.html",
  styleUrls: ["./user-list.component.css"]
})
export class UserListComponent implements OnInit {
  @Input()
  hideActions: boolean = false;
  searchTerm: '';
  filterby: string = 'name';
  users=[];
  valueChanges;
  constructor(private _userService: UserService, private _router: Router) {}
  ngOnInit() {
    this.getUsers();
  }
  getUsers() {
    this.valueChanges = this._userService
      .getUsers()
      .subscribe((data: Array<object>) => {
        this.users = data;
      });
  }
  deleteUser(uesrID,index) {
    this.users.splice(index, 1);
    // this._userService.deleteUser(uesrID); //Facing issue to get updated array
  }
  updateUser(uesrID) {
    this._router.navigate(["/updateUser", uesrID]);
  }
  ngOnDestroy() {
    this.valueChanges.unsubscribe();
  }
}
