fix(virtual-scroll): working in angular

This commit is contained in:
Manu Mtz.-Almeida
2018-02-01 22:18:19 +01:00
parent c189094f64
commit 0babb2ece2
20 changed files with 313 additions and 164 deletions

View File

@ -16,6 +16,8 @@ const routes: Routes = [
{ path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
{ path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
{ path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
{ path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
];
@NgModule({

View File

@ -4,7 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
import { IonicAngularModule } from '@ionic/angular';
@NgModule({
declarations: [AppComponent],
@ -12,7 +12,6 @@ import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
AppRoutingModule,
BrowserModule,
IonicAngularModule.forRoot(),
IonicRouterModule.forRoot()
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

View File

@ -37,6 +37,9 @@
<li>
<a href='popover'>Popover Page</a>
</li>
<li>
<a href='virtual-scroll'>Virtual Scroll Page</a>
</li>
</ul>
</div>

View File

@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { NoRoutingNavPageComponent } from './no-routing-nav.component';
import { NoRoutingNavRoutingModule } from './no-routing-nav-routing.module';
import { IonicAngularModule, IonicRouterModule} from '@ionic/angular';
import { IonicAngularModule} from '@ionic/angular';
import { PageOne } from './pages/page-one';
import { PageTwo } from './pages/page-two';
@ -14,7 +14,6 @@ import { PageThree } from './pages/page-three';
CommonModule,
NoRoutingNavRoutingModule,
IonicAngularModule,
IonicRouterModule
],
declarations: [
NoRoutingNavPageComponent,

View File

@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';
@Component({
selector: 'app-virtual-scroll-page',
template: `
<ion-app>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-virtual-scroll [items]="items">
<ion-item *virtualItem="let item">{{item}}</ion-item>
</ion-virtual-scroll>
</ion-content>
</ion-page>
</ion-app>`
})
export class VirtualScrollPageComponent {
items: string[];
constructor() {
this.items = Array.from({length: 1000}, (_, i) => i + '');
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { VirtualScrollPageComponent } from './virtual-scroll-page.component';
const routes: Routes = [
{ path: '', component: VirtualScrollPageComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VirtualScrollRoutingModule { }

View File

@ -0,0 +1,17 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicAngularModule } from '@ionic/angular';
import { VirtualScrollPageComponent } from './virtual-scroll-page.component';
import { VirtualScrollRoutingModule } from './virtual-scroll-routing.module';
@NgModule({
imports: [
CommonModule,
IonicAngularModule,
VirtualScrollRoutingModule
],
declarations: [VirtualScrollPageComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class VirtualScrollModule { }