RadListview isn't working


#1

Am facing a problem with the RadListview here,my template has a Radlistview in it so when i try to navigate to where the template is it doesn’t navigate but once i change the template and not use RadListview it works Just.
any sort of help is needed


#2

my app.Madule

import { Routes } from "@angular/router";
import { NgModule } from "@angular/core";
import * as application from 'application';
import { NativeScriptRouterModule, NSModuleFactoryLoader, } from "nativescript-angular/router"
import * as applicationModule from "tns-core-modules/application";
import { NativeScriptUIListViewModule } from "nativescript-pro-ui/listview/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptUIListViewModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [
    AppComponent,
    ...navigatableComponents
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

#3

Would you mind pasting the code you are using in the HTML template?


#4
<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="staggeredItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" class="item-template-style">
                <Label [text]="item.name"></Label>
                <Label [text]="item.description" textWrap="true"></Label>
            </StackLayout>
        </ng-template>

        <!-- >> angular-listview-item-layouts-staggered -->
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
        <!-- << angular-listview-item-layouts-staggered -->
    </RadListView>
</GridLayout>

#5

Are you sure you have defined tkExampleTitle and tkToggleNavButton directives in your module / project?


#6

i posted my Madule file there with everything i did on it
i dont if i missed something or not please check it


#7

If thats all you got, I believe you copy pasted from RadListView example project that has those 2 directives declared. Just remove them and try running the app.


#9

i removed them now it shows no template the navigation is working but the template is blank


#10

What you mean by template is blank, blank page? Are you sure you have staggeredItems defined?

Until you show us some code or error log not possible for us to help better.


#11

my main.component.ts

import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "../../dataitem/dataItem";
import { DataItemService } from "../../dataitem/dataItem.service";


@Component({
  selector: "main",
  moduleId: module.id,
  providers: [DataItemService],
  templateUrl: "./main.html",
  styleUrls: ["./main-common.css", "./main.css"]
})
export class MainComponent implements OnInit {
  private _staggeredItems: ObservableArray<DataItem>;

  constructor(private _changeDetectionRef: ChangeDetectorRef, private _dataItemService: DataItemService) {
  }

  ngOnInit() {
      this._staggeredItems = new ObservableArray<DataItem>(this._dataItemService.getStaggeredItems());
      this._changeDetectionRef.detectChanges();
  }

  public get staggeredItems(): ObservableArray<DataItem> {
      return this._staggeredItems;
  }
}

#12

the html file

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="staggeredItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" class="item-template-style">
                <Label [text]="item.name"></Label>
                <Label [text]="item.description" textWrap="true"></Label>
            </StackLayout>
        </ng-template>

        <!-- >> angular-listview-item-layouts-staggered -->
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
        <!-- << angular-listview-item-layouts-staggered -->
    </RadListView>
</GridLayout>

#13

and my app.Madule

import { Routes } from "@angular/router";
import { NgModule } from "@angular/core";
import * as application from 'application';
import { NativeScriptRouterModule, NSModuleFactoryLoader, } from "nativescript-angular/router"
import * as applicationModule from "tns-core-modules/application";

import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [
    AppComponent,
    ...navigatableComponents
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

#14

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.Groceries",
    "tns-android": {
      "version": "3.4.1"
    }
  },
  "dependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/common": "^5.2.2",
    "@angular/compiler": "^5.2.2",
    "@angular/core": "^5.2.2",
    "@angular/forms": "^5.2.2",
    "@angular/http": "^5.2.2",
    "@angular/platform-browser": "^5.2.2",
    "@angular/platform-browser-dynamic": "^5.2.2",
    "@angular/router": "^5.2.2",
    "nativescript-angular": "^5.2.0",
    "nativescript-pro-ui": "^3.3.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.0",
    "tns-core-modules": "^3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "^0.4.0",
    "typescript": "~2.6.2"
  }
}