angular child route named outlet is not working in router event

Question

child routes working with routerLink, but not router.navigate event.

how to solve it?

const routes: Routes = [
{path: '', redirectTo: 'all', pathMatch: 'full'},
{path: 'all', component: NodepadComponent, children: [
{path: 'create', component: NotepadCreateComponent, outlet: 'new'},
{path: 'note', component: NotepadItemComponent, outlet: 'item'},
]},
]

HTMl:

 <button
      [routerLink]="[{outlets: {new: ['create']}}]"
      mat-button>
      <i class="material-icons">create</i>
    </button>

This link works !

TS:

constructor(
 private router: Router,
 ) {}

 create() {
this.router.navigate(
  [ {outlets: {new: ['create']}}]
)

}

This event isn't working

Answer 1

The html needs to be updated to trigger the create method in the ts file.

To do this add (click)="create" to the button in the html file.

<button
      (click)="create"
      mat-button>
      <i class="material-icons">create</i>
    </button>

The router.navigate parameters need to be updated as the outlet you are accessing in the 'create' path is named 'new'

this.router.navigate([{ outlets: { new: [ 'create' ] }}]);