Demo: Angular 2 + TypeScript

[leocaseiro]

Update: Check the solution here

Hi @TheOriginalJosh,

Thanks for this amazing plugin.

I'm trying to setup with Angular, following your instructions, but I'm very confused. It's not really clear what steps I need to follow.

Could you please help me to build an example? That's what I have so far. Thanks:

import {Component, OnInit} from '@angular/core';
import {registerElement, ViewClass} from "nativescript-angular/element-registry";

var SlideContainer = require("nativescript-slides").SlideContainer;
SlideContainer.angular = true; // set the SlideContainer's property of angular to true
registerElement("SlideContainer", () => SlideContainer);

@Component({
    selector: 'slidedemo',
    template: `
    <SlideContainer>
        <Slide class="slide-1" *ngFor="let img of images">
            <Label [text]="img.title"></Label>
            <Image [src]="img.source"></Image>
        </Slide>
    </SlideContainer>
    `
})
export class SlideDemoComponent implements OnInit {

    public images: Array<any> = [];

    ngOnInit() {
        this.images.push(
            {
                title: 'Sports',
                source: 'http://lorempixel.com/400/200/sports/1/'
            }
        );
        this.images.push(
            {
                title: 'Cats',
                source: 'http://lorempixel.com/400/200/cats/1/'
            }
        );
        this.images.push(
            {
                title: 'Food',
                source: 'http://lorempixel.com/400/200/food/1/'
            }
        );
    }


  /** 
   * Then in your angular component in the ngAfterViewInit.
   * you will want to have an instance of your slide container to call the function constructView().
   */
    ngAfterViewInit() {
        SlideContainer.constructView();
    }
}

[leocaseiro]

Update

I've realized that the property angular it's on XML, not on .ts:

<SlideContainer angular="true" #slides>
    <Slide class="slide-1" *ngFor="let img of images">
        <Label [text]="img.title"></Label>
        <Image [src]="img.source"></Image>
    </Slide>
</SlideContainer>

Now, I'm trying to get my instance of SlideContainer with nativeElement:

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";

registerElement("SlideContainer", () => require("nativescript-slides").SlideContainer);

export class SlideDemoComponent {

    @ViewChild("slides") slides: ElementRef;

    ngAfterViewInit() {    
        let SlidesXml = this.slides.nativeElement;
        SlidesXml.constructView();
    }
}

However, I'm getting the follow error:

 file:///app/tns_modules/nativescript-slides/nativescript-slides.js:240:35: JS ERROR TypeError: undefined is not an object (evaluating '_this.currentPanel.panel')

[leocaseiro]

PS: I can see all properties on my SlidesXml. For example:

console.log(SlidesXml._angular);
console.log(SlidesXml.direction);

[leocaseiro]

I've got it!

It forgot to register the Slide element.

Here I'm going to post a full example for reference and I'll also link to the docs, so will help others:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";

registerElement("Slide", () => require("nativescript-slides").Slide);
registerElement("SlideContainer", () => require("nativescript-slides").SlideContainer);

@Component({
    selector: 'slidedemo',
    template: `
    <SlideContainer angular="true" #slides>
        <Slide *ngFor="let img of images">
            <Label [text]="img.title"></Label>
            <Image [src]="img.source"></Image>
        </Slide>
    </SlideContainer>
    `
})
export class SlideDemoComponent implements OnInit {

    public images: Array<any> = [];

    @ViewChild("slides") slides: ElementRef;

    ngOnInit() {
        this.images.push(
            {
                title: 'Sports',
                source: 'res://300x300.jpg'
            }
        );
        this.images.push(
            {
                title: 'Cats',
                source: 'res://Default.png'
            }
        );
        this.images.push(
            {
                title: 'Food',
                source: 'res://Icon.png'
            }
        );
    }

    ngAfterViewInit() {
        let SlidesXml = this.slides.nativeElement;
        SlidesXml.constructView();
    }
}

[timricker]

@leocaseiro thanks for figuring this out for angular2, is there anything else outside of the code above you had to do to get it working? I simply can't seem to get the Slide of SlideContainer to initialize using your code after installing the nativescript-slides package from npm to my project. If you were able to share more of a working example I would be extremely appreciative!

[leocaseiro]

HI @timricker, you must have a page only for your slides.

Could you please read the issue #42, especially this comment?

I'll eventually post a demo app when I get more free time.

[timricker]

Thanks @leocaseiro, I was able to get it working within a child route as you suggested, though this isn't really ideal for my project as the slides are needed on the main page of the app so will need to find a proper fix. I might dig in and see what I can uncover...

[leocaseiro]

A hackish way would be navigating to your child route programmatically and remove the back button.

It's not the ideal, but temporary should save your day :D

Please, let us know if you find something that would work on the homepage in a good and not hackish way.

I shelved this for the time being...thanks

[JoshDSommer]

out of curiosity which version of Angular and NativeScript you two running

[timricker]

@TheOriginalJosh Angular 2.0.0-rc.1 & NativeScript 2.0.0. I haven't had a chance yet to investigate - any thoughts on your side as to possible cause?

[darmie]

I tried to follow up on this issue and see if solutions provided would work for my project, unfortunately, my screen is now blank.

This is my sample xml

<Slides:SlideContainer id="slides" pageIndicators="true" angular="true" #slides>
  <Slides:Slide >
      <StackLayout>
        <Image src="~/assets/logo_stack-login4.png" scale="aspectFit"  horizontalAlignment="center"></Image>
        <GridLayout row="0" col="0" rows="auto auto auto auto auto">
          <DockLayout class="textBox" col="0" row="1">
            <GridLayout row="0" col="0" rows="auto auto">
              <Label row="1" col="0" class="ion" [text]="person"></Label>
              <TextField  row="1" col="1" id="email" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"></TextField>
            </GridLayout>
          </DockLayout>
          <DockLayout class="textBox" col="0" row="2">
            <GridLayout row="0" col="0" rows="auto auto">
              <Label col="0" row="1" class="ion" [text]="padlock"></Label>
              <TextField col="1" row="2" id="password" hint="Password" secure="true"></TextField>
            </GridLayout>
          </DockLayout>
          <DockLayout col="0" row="3">
            <Button class="submit-button" text="Login"></Button>
          </DockLayout>
        </GridLayout>

      </StackLayout>
  </Slides:Slide>
  <Slides:Slide >
      <StackLayout>
        <Image src="~/assets/logo_stack-login4.png" scale="aspectFit"  horizontalAlignment="center"></Image>
        <GridLayout row="0" col="0" rows="auto auto auto auto auto">
          <DockLayout class="textBox" col="0" row="1">
            <GridLayout row="0" col="0" rows="auto auto">
              <Label row="1" col="0" class="ion" [text]="person"></Label>
              <TextField  row="1" col="1" id="email" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"></TextField>
            </GridLayout>
          </DockLayout>
          <DockLayout class="textBox" col="0" row="2">
            <GridLayout row="0" col="0" rows="auto auto">
              <Label col="0" row="1" class="ion" [text]="padlock"></Label>
              <TextField col="1" row="2" id="password" hint="Password" secure="true"></TextField>
            </GridLayout>
          </DockLayout>
          <DockLayout col="0" row="3">
            <Button class="submit-button" text="Login"></Button>
          </DockLayout>
        </GridLayout>

      </StackLayout>
  </Slides:Slide>
</Slides:SlideContainer>

my login.component.ts

import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import { Page } from "ui/page";
import textField = require("ui/text-field");
import view = require("ui/core/view");
import {Color} from "color";
import app = require("application");
import platform = require("platform");
import observable = require("data/observable");
//import {TNSFontIconService, TNSFontIconPipe} from 'nativescript-ng2-fonticon';
import * as slides from 'nativescript-slides/nativescript-slides'
import {registerElement} from "nativescript-angular/element-registry";

registerElement("Slide", () => require("nativescript-slides").Slide);
registerElement("SlideContainer", () => require("nativescript-slides").SlideContainer);

@Component({
  selector: "my-app",
  templateUrl: "templates/login.component.html",
  styleUrls: ["./templates/login.css"]
  //pipes: [TNSFontIconPipe]
})

export class LoginComponent implements OnInit{
  public padlock;
  public person;
  @ViewChild("slides") slides: ElementRef;
  constructor(private page: Page) {}
  ngOnInit() {
      this.page.actionBarHidden = true;
      this.page.backgroundSpanUnderStatusBar = true;


      this.padlock = String.fromCharCode(0xf392)
      this.person = String.fromCharCode(0xf3a0)

      this.page.backgroundImage = "~/assets/BackgroundLogin_dull.jpg";

    }
    ngAfterViewInit() {
        let SlidesXml = this.slides.nativeElement;
        SlidesXml.constructView();
        //var color = new Color("#CCCCCC").android;


        //Email
        /*var email = <textField.TextField>this.page.content.getViewById("email");
        email.backgroundColor = new Color("transparent");
        email.android.setHintTextColor(color);

        //Password
        var pass = <textField.TextField>this.page.content.getViewById("password");
        pass.android.setHintTextColor(color);
        pass.backgroundColor = new Color("transparent");*/
    }
}

Error

JS: EXCEPTION: Error in ./LoginComponent class LoginComponent_Host - inline template:0:0 caused by: Cannot read property 'nativeElement' of undefined
JS: ORIGINAL EXCEPTION: Cannot read property 'nativeElement' of undefined
JS: ORIGINAL STACKTRACE:
JS: TypeError: Cannot read property 'nativeElement' of undefined
JS:     at LoginComponent.ngAfterViewInit (/data/data/org.nativescript.Bau/files/app/controllers/login.component.js:20:36)
JS:     at DebugAppView._View_LoginComponent_Host0.detectChangesInternal (LoginComponent_Host.ngfactory.js:34:65)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9325:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9430:48)
JS:     at DebugAppView.AppView.detectContentChildrenChanges (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9343:23)
JS:     at DebugAppView.AppView.detectChangesInternal (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9335:18)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9325:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9430:48)
JS:     at DebugAppView.AppView.detectViewChildrenChanges (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:9351:23)
JS:     at DebugAppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:31:8)
JS: ERROR CONTEXT:
JS: [object Object]
JS: Error: Error in ./LoginComponent class LoginComponent_Host - inline template:0:0 caused by: Cannot read property 'nativeElement' of undefined

[heese]

I am using nativescript+angular combined with ngFor: It seems that the slider is not working if it is on the first page shown (e.g., shown immediately after splash screen). I used the example provided by leocaseiro.

[leocaseiro]

Hi @heese. Make sure you import NativeScriptModule to use *ngFor

[heese]

Hi @leocaseiro, I am glad that someone watches this thread.

Yesterday, I was a bit lazy and did not describe the issue well.

The directive *ngFor is working and is not the problem. I have created an example which illustrates the problem [1] -- at least on my machine :-)

If SlideComponent is the first screen (line 16 of app.module.ts redirects to /slide) then all content of the slides is rendered (overlapping) but does not slide at all. However, if BarComponent is the first screen (line 16 of app.module.ts redirects to /button) and you click the Button to get to /slide then the slider works correctly.

Maybe, you can figure out what is wrong with my example.

[1] https://drive.google.com/file/d/0ByKUAQ8GY5GNaHFER2Q2VzdjM0E/view

[heese]

Without success I spend quite some time to use the slides module in the following scenario (ns + angular): The data shown in the slide container is loaded dynamically (via HTTP request to a server), e.g., it is not available when ngAfterViewInit is called.

I tried to use the event loaded to create the slides dynamically which does not work. I used the same code I used in ngAfterViewInit (in this case I even assumed static slides):

let SlidesXml = this.slides.nativeElement;
SlidesXml.addChild(this.getSlide("res://icon"));
SlidesXml.addChild(this.getSlide("res://icon"));
SlidesXml.constructView();

It seems that it is too late and the views are not constructed properly. It renders the items but the slide container seems not to be set up properly.

I managed to initialise the slide container with placeholders and replace its content with the data retrieved from the server. Unfortunately, I don't know in advance how many slides I need. It does also not work to create placeholders first and remove unneeded slides later. The removed slides are still there but blank, e.g., users would see blank slides when scrolling through the slides.

Is there a way to add slides much later, e.g., after ngAfterViewInit has been executed?