Send data to the backend API Angular 6 : <p>i'm trying to send few form details to the backend API using angular6, but it doesn't work as i expected, and how do i add Observable to this, im expecting to use observable instead of promises.</p>

<p><strong>login.component.html</strong></p>

<pre><code>loginUser(e){

    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;
    console.log(username,password);

      this.user.setUserLoggedIn()
      var body = "username=" + username + "password=" + password;
      this.http.post("http://localhost:8080/user/all", body).subscribe((data) =&gt; {});
       this.router.navigate(['fullpage'])

    return false;
  }
</code></pre>

<p><strong>login.component.html</strong></p>

<pre><code>&lt;form id="loginForm" novalidate="novalidate" (submit)="loginUser($event)"&gt;
                                    &lt;div class="form-group"&gt;
                                        &lt;label for="username" class="control-label"&gt;Username&lt;/label&gt;
                                        &lt;input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="example@gmail.com"&gt;
                                        &lt;span class="help-block"&gt;&lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;div class="form-group"&gt;
                                        &lt;label for="password" class="control-label"&gt;Password&lt;/label&gt;
                                        &lt;input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password" placeholder="******"&gt;
                                        &lt;span class="help-block"&gt;&lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;div id="loginErrorMsg" class="alert alert-error hide"&gt;Wrong username or password&lt;/div&gt;
                                    &lt;div class="checkbox"&gt;
                                    &lt;/div&gt;
                                    &lt;button type="submit" class="btn btn-success btn-block"&gt;Login&lt;/button&gt;

                                &lt;/form&gt;
</code></pre>

<p><strong>Error:</strong></p>

<blockquote>
  <p>ERROR Error: Uncaught (in promise): Error:
  StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:<br>
  StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: 
      NullInjectorError: No provider for Http! Error: StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:<br>
  StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: 
      NullInjectorError: No provider for Http!</p>
</blockquote>
