I use Laravel 5.8 as backend and Angular7 as Front end. When I clicked on the Delete Submit button, nothing happens

I checked the console, I have this error:

SmsShortcodeMyComponent.html:85 ERROR TypeError: _co.deleteShortcode is not a function

SmsShortcodeMyComponent.html:84 ERROR TypeError: _co.updateShortcode is not a function

Laravel: ShortcodeController

    public function destroy(Shortcode $shortcode)

        return response()->json([
            'message' => 'Successfully deleted Short Code!'

    public function update(Request $request, Shortcode $shortcode)
           'name'       => 'nullable'


        return response()->json([
            'message' => 'Great success! Shortcode updated',
            'shortcode' => $shortcode


Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();

Route::get('/shortcodes', '[email protected]')->name('shortcodes.index');

Route::post('/shortcodes', '[email protected]')->name('shortcodes.store');

Route::get('/shortcodes/{shortcode}', '[email protected]')->name('shortcodes.show');

Route::put('/shortcodes/{shortcode}', '[email protected]')->name('shortcodes.update');

Route::delete('/shortcodes/{shortcode}', '[email protected]')->name('shortcodes.destroy');

Angular7: shortcode.service.ts

  updateShortcode (id, shortcode): Observable<any> {
    const url = `${apiUrl}/${id}`;
    return this.http.put(url, shortcode, httpOptions).pipe(
      tap(_ => console.log(`updated shortcode id=${id}`)),

  deleteShortcode (id): Observable<Shortcode> {
    const url = `${apiUrl}/${id}`;

    return this.http.delete<Shortcode>(url, httpOptions).pipe(
      tap(_ => console.log(`deleted shortcode id=${id}`)),

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // Let the app keep running by returning an empty result.
      return of(result as T);


              <div class="box-body">
                <table id="example2" class="table table-bordered table-hover table-striped table-condesed">
                    <th class="hidden">Id</th>
                    <th width="70%">Shortcode</th>
                  <tr  *ngFor="let datas of data">
                        <button class="btn btn-info" (click)="updateShortcode(shortcode)">Edit</button>
                        <button class="btn btn-danger" (click)="deleteShortcode(shortcode)" style="margin-left: 20px;"> Delete</button>


import { Component, OnInit } from '@angular/core';
import { ShortcodeService } from '../../../services/shortcode.service';
import { Shortcode } from '../../../models/shortcode';

  selector: 'app-sms-shortcode-my',
  templateUrl: './sms-shortcode-my.component.html',
  styleUrls: ['./sms-shortcode-my.component.scss']
export class SmsShortcodeMyComponent implements OnInit {
  displayedColumns: string[] = ['name'];
  data: Shortcode[] = [];
  isLoadingResults = true;  

  constructor(private api: ShortcodeService) { }
  ngOnInit() {

      .subscribe(res => {
        this.data = res;
        this.isLoadingResults = false;
      }, err => {
        this.isLoadingResults = false;

  ngOnDestroy(): void {
    document.body.className = '';


When I clicked on the delete button, I expected the row to be deleted from database but nothing happens.


0 Answers