title: How to Login with json-server in Angular 5?
body: <p>I'm newbie in Angular. I am stuck into login section. What to code in loginUser() using json? Please help me.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule} from '@angular/forms';
  import { RouterModule, Routes } from '@angular/router';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { CollapseModule } from 'ngx-bootstrap';
  import { HomeComponent } from './component/home/home.component';
  import { AboutComponent } from './component/about/about.component';
  import { ContactComponent } from './component/contact/contact.component';
  import { RegisterComponent } from './component/register/register.component';
  import { LoginComponent } from './component/login/login.component';
  
  
  const appRoutes: Routes = [
    {path:'', component:HomeComponent},
    {path:'about', component:AboutComponent},
    {path:'contact', component:ContactComponent},
    {path:'register', component:RegisterComponent},
    {path:'login', component:LoginComponent},
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      AboutComponent,
      ContactComponent,
      RegisterComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot(appRoutes),
      CollapseModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>register.component.html</p>
  
  <pre><code>&lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;h2&gt;Register&lt;/h2&gt;
      &lt;form #userData = "ngForm" (ngSubmit) = "addUser(userData.value)"&gt;
          &lt;div class="form-group" &gt;
              &lt;label for="firstName"&gt;First Name&lt;/label&gt;
              &lt;input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" required /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="lastName"&gt;Last Name&lt;/label&gt;
              &lt;input type="text" class="form-control" name="lastName" [(ngModel)]="lastName" required /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="username"&gt;Username&lt;/label&gt;
              &lt;input type="text" class="form-control" name="username" [(ngModel)]="username" required /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="email"&gt;Email&lt;/label&gt;
              &lt;input type="text" class="form-control" name="email" [(ngModel)]="email" required /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;input type="password" class="form-control" name="password" [(ngModel)]="password" required /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;button class="btn btn-primary"&gt;Register&lt;/button&gt;
              &lt;a routerLink="/login" class="btn btn-primary"&gt;Login&lt;/a&gt;
              &lt;a routerLink="/" class="btn btn-link"&gt;Cancel&lt;/a&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>register.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, Response, Headers } from '@angular/http';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit {
  
    constructor(private http: Http, private router: Router) { }
  
    userAddString: string = "User Registered Successfully";
  
    userObj:object = {};
  
    addUser(user){
      this.userObj = {
      "fname": user.firstName,
      "lname": user.lastName,
      "email": user.email,
      "username": user.username,
      "password": user.password
      };
      this.http.get("http://localhost:4201/users/", this.userObj).subscribe((Response) =&gt; {
          console.log(this.userObj);
          this.router.navigate(['/login']);
  
      })
    }
  
    ngOnInit() {
      console.log('Register Component Running...');
    }
  
  }
  </code></pre>
  
  <p>login.component.html </p>
  
  <pre><code>&lt;div class="col-md-6 col-md-offset-3"&gt;
  &lt;h2&gt;Login&lt;/h2&gt;
  &lt;form #loginData = "ngForm" (ngSubmit) = "loginUser(loginData.value)"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="username"&gt;Username&lt;/label&gt;
          &lt;input type="text" class="form-control" name="username" required /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="password"&gt;Password&lt;/label&gt;
          &lt;input type="password" class="form-control" name="password"  required /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Login&lt;/button&gt;
          &lt;!-- &lt;input type="submit" value="Login" /&gt; --&gt;
          &lt;a routerLink="/register" class="btn btn-primary"&gt;Sign Up&lt;/a&gt;
          &lt;a routerLink="/" class="btn btn-link"&gt;Cancel&lt;/a&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to logged in and redirect to user profile using json already created.</p>
  
  <p>login.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { Http, Response, Headers } from '@angular/http';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor(private router: Router, private http: Http) { }
  
  
    ngOnInit() {
      console.log('login Component Running...');
    }
  
    loginUser(){
  
    }
  </code></pre>
  
  <p>How to Login with json-server in Angular 5?</p>