Render one page into other page

Ionic Framework ionic-v3
1

I have one application where I have multiple pages .

I have one page called parent.html with parent.ts.

now i have one other page child.html with below selector .

@Component({
selector: ‘child’,
templateUrl: ‘child.html’
})

now i want to render b.html inside a.html .

I have used selector of b .

ex :


but it display empty content.

2

did you add @Injectable() into b?

3

Hi,

The content is empty. Maybe you miss some steps to add new page into your project. Please double-check some steps:

1. Declare the new pages in the app.module.ts first
2. Create the pages as a Ionic Component:

Page a :

@Component({
selector: ‘page-a’,
templateUrl: ‘page-a.html’
})

Page b:

@Component({
selector: ‘page-b’,
templateUrl: ‘page-b.html’
})

3. Include the page you have just created with your selector.
Example : I want to add page a into page b.
page-b.html
Just add <page-a></page-a>

4. @Injectable is used when you want to create the service provider in the ionic project, not Component as your case. Please don’t use it.

5. This is the mandatory template when you create the Component in the Ionic 2. You can use it.

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

@Component({
  selector: 'hello-page',
  templateUrl: 'hello.html'
})
export class HelloPage {

  constructor() {}
  
}

One more thing is that please inspect the element in the Chrome and see the log file in the Console tab

Thanks,

2 Likes
4

how about if we’re using lazy loading?

5

Si je comprend bien vous voulez que la page B prenne la place de la page A. C’est ça?

6

Hi there,
One most simple solution for this is following.
As in ionic 4, each page has a module. so page Parent has a module and page Child has a module.
Let’s say you want to render child page into parent page. Do following steps;

  1. you should import child module in parent module
  2. insert child Page into export array of child module , for exxample exports:[ChildPage]
  3. Go to Parent page where you want to render child page and insert child selector , for example

Bonus : this trick can be used for all those component and pages in ionic and angular which you want to render in different modules , for example header, footer, sidebar etc ,

2 Likes
7

Hi,

I am using ionic 4 and follow your solution. I add child selector inside parent page. But it displays only child content only. why is it not display parent content. Please advice me.

Thanks!

1 Like
8

I’m also facing same issue.maybe its rendering Child Module only