2

anyone knows how to load other page inside ion-segment. I;m using ionic v4 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.

Here is the childdetails page

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}

}

I don’t want the content to be loading from inside the same page that contains the segment like below code. since each of those will be near about 150-200 lines of code. its better to keep them in separate pages.

<div [ngSwitch]="segment">
        <ion-list *ngSwitchCase="'profile'">
          <p> I dont want it to be like this </p>
        </ion-list>
</div>

Anyone know how to do this ? Thank you in advance

Charly
  • 123
  • 1
  • 2
  • 11
  • I'm afraid that's not possible. In order to avoid code duplication, you can create some custom components with as much shared code as possible, and then use that component both in the segment and in the pages. – sebaferreras Jun 02 '19 at 16:08
  • 1
    I'm new to ionic framework, can you explain to me the custom components. – Charly Jun 02 '19 at 16:36
  • Of course. Please start by taking a look at **[Angular docs - Introduction to Components](https://angular.io/guide/architecture-components)**. – sebaferreras Jun 02 '19 at 17:04
  • Thank you, I already created the custom components. However, new errors are keep coming. Can you help me with this https://stackoverflow.com/questions/56438093/template-parse-errors-ion-col-is-not-a-known-element – Charly Jun 04 '19 at 06:00

0 Answers0