Angular 5 - HttpClient Post not posting : <p>I have a httpClient post, through a service, that's not giving my any errors but it's not posting the data to the database either.</p>

<p>Here is the code:</p>

<p>dataService.ts</p>

<pre><code>import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DataService {

  constructor(private http: HttpClient) {}

  insertData() {
    const body = JSON.stringify({firstName: 'Joele', lastName: 'Smith4'});
    return this.http.post('http://myurl/index.php', body, httpOptions);
  }

}
</code></pre>

<p>app.component.ts</p>

<pre><code>import { Component } from '@angular/core';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private dataService: DataService) {}

  myInsert() {
    if (this.dataService.insertData()) {
      alert('Data Inserted Successfully');
    }

  }

}
</code></pre>

<p>and finally app.component.html</p>

<pre><code>&lt;div (click)="myInsert()"&gt;Click Me&lt;/div&gt;
</code></pre>

<p>I've checked on chrome network for the post but nothing is shown there.
How can I fix this?</p>
