how to achieve Dynamic page load in new Version ?

[AsrarMemon]

I have added router-outlet in in my html code as follows:

<GridLayout rows="*, auto" columns="*" class="page">
    <Pager #pager [pagesCount]="numItems" [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="onIndexChanged($event)" class="pager">
        <StackLayout height="100%">
            <router-outlet height="100%"></router-outlet>
        </StackLayout>
        <StackLayout height="100%">
            <router-outlet name="Graph"></router-outlet>
        </StackLayout>
        <StackLayout height="100%">
            <router-outlet name="DataList"></router-outlet>            
        </StackLayout>
    </Pager>
</GridLayout>

And routing elements as follows:

{
        path: "DetailScreen", component: DetailViewComponent, children: [
          //DetailScreen1 child Components
          { path: "", component: DatalistingComponent, outlet: "DataList" },
          { path: "", component: GraphComponent, outlet: "Graph" },
          { path: "", component: OverviewComponent },
        ]
      },

i known 3 + version uses templates

how to achieve Dynamic page load in 3 + version ?

[triniwiz]

This is similar to your previous issue

[AsrarMemon]

can you please give me a help about how can i Dynamic page load in new version ?

[triniwiz]

You can try the following

items = [1, 2, 3];
    public templateSelector = (item: any, index: number, items: any) => {
        return index % 2 === 0 ? 'even' : 'odd';
        if (index === 0) {
            return 'first';
        } else if (index === 1) {
            return 'second';
        } else if (index === 2) {
            return 'third';
        }
    };

<Pager [items]="items" [itemTemplateSelector]="templateSelector">

    <ng-template pagerTemplateKey="first" let-i="index" let-item="item">
        <StackLayout height="100%">
            <router-outlet height="100%"></router-outlet>
        </StackLayout>
    </ng-template>

    <ng-template pagerTemplateKey="second" let-i="index" let-item="item">
        <StackLayout height="100%">
            <router-outlet name="Graph"></router-outlet>
        </StackLayout>
    </ng-template>

    <ng-template pagerTemplateKey="third" let-i="index" let-item="item">
        <router-outlet name="DataList"></router-outlet>
    </ng-template>

</Pager>

[AsrarMemon]

Hello,

Thank you so much :) it's working