this.router.navigate does nothing

Issue

My button will call the function edit() below:

export class TabDocumentsPage implements OnInit {

  constructor(private router: Router, private alertController: AlertController) { }

  ngOnInit() {
  }

  edit(id: String){
    console.log("18 edit id: " + id)
    this.router.navigate['/tabDocuments/add'];
    console.log("20 lepas navigate")
  }

}

but on my console, it just displays 18 edit id: id and 20 lepas navigate, and not navigating the page or any errors whatsoever.

Below is my tabs-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
    {
      path: '',
      component: TabsPage,
      children: [
        {
          path: 'tabWasiatTakaful', 
          children: [
            { path: '', loadChildren: () => import('../tab-wasiat-takaful/tab-wasiat-takaful.module').then(m => m.TabWasiatTakafulPageModule)},
            { path: 'view', loadChildren: () => import('../tab-wasiat-takaful-view/tab-wasiat-takaful-view.module').then(m => m.TabWasiatTakafulViewPageModule)},
          ]        
        },
        {
          path: 'tabDocuments', 
          children: [
            { path: '', loadChildren: () => import('../tab-documents/tab-documents.module').then(m => m.TabDocumentsPageModule)},
            { path: 'add', loadChildren: () => import('../tab-documents-add-edit/tab-documents-add-edit.module').then(m => m.TabDocumentsAddEditPageModule)},
            // { path: 'view', loadChildren: () => import('../tab-documents-view/tab-documents-view.module').then(m => m.TabWasiatTakafulViewPageModule)},
          ]
          // loadChildren: () => import('../tab-documents/tab-documents.module').then(m => m.TabDocumentsPageModule)
        },
        {
          path: 'tabs',
          redirectTo: '/tabs/tabCloseContact',
          pathMatch: 'full'
        }
      ]
    },
    {
      path: '',
      redirectTo: '/tabCloseContact',
      pathMatch: 'full'
    },
  ];

Solution

Navigate is a function, you must change by: this.router.navigate([ << your path >> ])

Answered By - JStw