How to load other page inside of an ionic segment?

Ionic Framework ionic-v3
1

Hi, I have three pages which i am trying to display inside of ionic segments (profile, vaccination, development). I want to keep the functionality of the pages segregated for easier maintainability.

Capture
Capture.PNG345×566 5.77 KB

childdetails.page.html

<ion-content padding>
    <ion-toolbar>
      <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" color="warning">
        <ion-segment-button value="profile" (ionSelect)="goToProfilePage()">
         Profile
        </ion-segment-button>
        <ion-segment-button value="vaccination">
          Vaccination
        </ion-segment-button>
        <ion-segment-button value="development">
          Development
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>

    <div [ngSwitch]="segment">
        <ion-list *ngSwitchCase="'profile'">
          <<**I would like to include addchild.html here**>>
        </ion-list>
</div>
</ion-content>

childdetails.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-childdetails',
  templateUrl: './childdetails.page.html',
  styleUrls: ['./childdetails.page.scss'],
})
export class ChilddetailsPage implements OnInit {
/** 
  segment = 0;
  */
  segment: string = "vaccination";
  constructor() {}

  ngOnInit() {
  }

  async segmentChanged() {
    this.segment}

}

Anyone knows how to do this ?? Thank you in advance

2

If you truly want different pages to be shown, you should use ion-tab, ion-tab-button, etc.

If you want the lower part of the page to be updated when you click a segment button, then here is what I have done:

  <ion-segment class="bottom-part">
    <ion-segment-button *ngFor="let name of ['Schedule', 'Academic Interests', 'Scholarship', 'Other']"
      (ionSelect)="segmentChosen(name)">
      <ion-label>{{name}}</ion-label>
    </ion-segment-button>
  </ion-segment>
  <app-schedule *ngIf="selectedSegment === 'Schedule'"></app-schedule>
  <app-scholarship *ngIf="selectedSegment === 'Scholarship'"></app-scholarship>
  <app-academic-interests *ngIf="selectedSegment === 'Academic Interests'"></app-academic-interests>

app-schedule, app-scholarship, and app-academic-interests are custom components, each with their own html. Only the selected one’s html will be inserted because of the ngIf statements.

Let me know if you need help understanding this. I find making custom components to be very useful. Josh Morony has some good tutorials on how to make them and use them.

2 Likes
3

Thanks for replying.
I’m new to ionic framework, can you explain how to make the custom components?
and the schedule html inserted like this ? (code below)
<app-schedule *ngIf="selectedSegment === 'Schedule'"> Does the schedule's html inserted here ?</app-schedule>

4

I recommend this video: https://www.youtube.com/watch?v=z3fuSMNQmY4

For my example, I created a custom component called schedule, so the selector is app-schedule, and the code for schedule is in schedule.component.html. The html in that file replaces the <app-schedule...></app-schedule>.

Hope this helps. If you have more questions, just ask! :slight_smile:

5

I already created a custom component and then I got an error : addchilds Component is part of the declaration of 2 modules. I look up for that error and I created shared.module.ts and import it in app.module.ts. However I still get errors, and this time is
Uncaught Error: Template parse errors:
‘ion-col’ is not a known element:

  1. If ‘ion-col’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-col’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("
    [ERROR ->] this is the image </io"): ng:///SharedModule/AddchildsComponent.html@3:10

    this error also happen to ion-row, ion-button, ion-input. Here is the recent code.
    app.module.ts

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
/**
import firebaseConfig from './firebase';
*/
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore';

import { AngularFireAuthModule } from '@angular/fire/auth';
import { IonicSelectableModule } from 'ionic-selectable';
import { CommonModule } from '@angular/common';
import { SharedModule } from './shared/shared.module';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment. firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    IonicSelectableModule,
    FormsModule,
    CommonModule,
    SharedModule
  ],

  providers: [
    StatusBar,
    SplashScreen,
    ImagePicker,
    WebView,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: FirestoreSettingsToken, useValue: {} }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

    app-routing.modules.ts

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddchildsComponent } from '../app/pages/addchilds/addchilds.component';

const routes: Routes = [
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
  { path: '', redirectTo: 'register', pathMatch: 'full' },
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
  { path: 'childdetails/:id', loadChildren: './pages/childdetails/childdetails.module#ChilddetailsPageModule' },
  { path: 'adddetails/:id', component: AddchildsComponent },
  { path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

    shared.module.ts

    import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { AddchildsComponent } from '../pages/addchilds/addchilds.component';

@NgModule({

declarations: [ AddchildsComponent ],

imports: [ CommonModule ],

exports: [ AddchildsComponent ]

})

export class SharedModule { }

    I really don’t know how to solve this, can you help me with this ?

6

lily28: Yes, I’ve seen this error too, and it is quite confusing.

Did you import SharedModule into your childdetails.module.ts file?

If not, you need to add SharedModule to the list of imports:.

E.g., I have a page history.page.html and in history.module.ts I have this code:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { HistoryPage } from './history.page';
import { SharedModule } from 'src/shared/shared.module';

const routes: Routes = [
  {
    path: '',
    component: HistoryPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  declarations: [HistoryPage]
})
export class HistoryPageModule {}

Notice how I import SharedModule.

Hope this helps.