CODEWITHSUNDEEP
angularionic4
Madi Zhanabek
Madi Zhanabek

Reputation: 67

Why ion-router-outlet not working ionic 4

I have app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

also I have detail.page.html

    <ion-content padding>
      <div *ngIf="invoiceDetailData$ | async as invoiceDetailData">
        <div *ngFor="let item of invoiceDetailData?.invoiceDetail?.items">
          <ion-label *ngFor="let child of item.children">
            {{child.cardName}}
            {{child.availableBalance}}
            {{child.cardNumber}}
          </ion-label>
        </div>
      </div>
      <div>
        <button *ngFor="let pages of detailPages">
          <span [routerLink]="[pages.url]">{{pages.title}}</span>
        </button>
      </div>
    </ion-content>

    <ion-router-outlet></ion-router-outlet>
</ion-app>

ion-router-outlet not working, but in router the value is pushed. And ref is not clickable !

Upvotes: 3

Views: 3190

Answers (1)

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

Use Ionic Router outlet <ion-router-outlet> in ionic 4 you need to used Angular router

  • Create app-routing.ts file 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
    { path: 'list', loadChildren: './pages/list/list.module#ListPageModule' }      
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }
  • Add AppRoutingModule in app.module.ts file
  • Open src/your component.html file and place these content:
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

Upvotes: 1

Related Questions