[SOLVED ]Ionic 2 ng-include alternate

Ionic Framework ionic-v3
1

Hi guys, i am stuck at a point. I created an ionic page A and i want to include a common html in all the pages much like what ng-include would do in v1.

I create a component, import it in a page and add the selector in page A’s template but when I run, the ionic page throws up an error that the is not a valid.

Since i use cli generator to create the component, it is automatically included in the ngmodule.

How can I implement ng-include of v1 in v2? Thanks.

2

Hi gaurav_ch,

I’m not sure of what you’re asking, because I started with Ionic 2 beta. Still, I’m quite sure ng-include is not working in ionic2/3 now.

Do you need to load an iframe, or other parts of your code for better UI?

Regards,

3

You don’t. It was deliberately left out, in part for security, and in part to facilitate AoT compilation. If you can describe at a higher level what you are trying to achieve, maybe we can offer some alternatives. Here’s one possibility.

4

I don’t want to use ng-include but would want to use component b in component a like:

<component-a>
<component-b></component-b>
</component-a>

I know ng-include is not in v2. Do i need to import component b in component a’s ts file or i just use the selector of component b in template?

Just started with ionic v 2 so a little confused.

Edit: probably known as nested components.

5

Not a pro with that, but you can include a provider on every page or self page you want. (ionic generate provider potatoService). And Call that service/provider, in every page you want, doing any tasks you want. The limit will be the scope, as always.

Depends if you just need to display loop of an array in json file, or something like an array of Firebase ? If simple, I guess you probably know the *ngFor structure.

6

Lazy loading complicates this somewhat. If you are not using it, and are just throwing everything in a single app module, this should be no problem at all. ComponentA's controller should not have to do anything in order to include <component-b> elements.

If you are lazily loading ComponentA, and it’s a page, then you are going to have to make a module that declares and exports ComponentB and import it into ComponentA's module.

1 Like
7

So I was able to achieve this by using the second option from the following blog post:

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/#ampshare=http://blog.ionic.io/ionic-and-lazy-loading-pt-2/

1 Like