Angular 2 support

[prantikv]

Consider the following code in NS + ng2

`<StackLayout text="fill">
      <ListView [items]="groceryList  class="listview">
    <template let-item="item" col="0">
      <GridLayout columns="auto,auto,*" rows="*,*" class="fa" (tap)="goToList(item)">
        <Label horizontalAlignment="left" verticalAlignment="center" [text]="item.iconFont" ></Label>
        <Label col="1" horizontalAlignment="center" [text]="item.name"></Label>
        <Label col="2" horizontalAlignment="right" text="&#xf105;"></Label>
      </GridLayout>
    </template>
  </ListView>
 </StackLayout>`

As I have the (tap)="goToList(item)" on GridLayout. The labels are not getting the ripple effect.

I tried to add <Ripple> hoping it would work as Angular 2 does not have <Page> tag to add xmlns:RL="nativescript-ripple"

[bradmartin]

Try calling registerElement() as outlined here for this plugin https://github.com/bradmartin/nativescript-checkbox#angular-usage-sample let me know if that helps 😄

[prantikv]

Hey brad thanks for showing me registerElement. I didn't know about that. But using it still does not help I did the following in TypeScript

import { registerElement } from "nativescript-angular/element-registry";
registerElement("Ripple", () => require("nativescript-ripple").Ripple);
//registerElement("Ripple", () => require("nativescript-ripple")); //tried this as well

Then in my view I have

       <Ripple rippleColor="#d50000">
        <Label text="Red Ripples!!!"></Label> 
      </Ripple>

The layout breaks and I see nothing but the actionBar in the emulator. The console gives me the following error

JS: ERROR CONTEXT:
JS: [object Object]
JS: Error: Error in pages/home/home.component.html:12:31 caused by: Cannot read property 'materialripple' of undefined

[bradmartin]

Can you show the source for home.component.html want to see what is undefined there.

[prantikv]

here is the code for home.component.html

<StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"></Label>
    <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
    <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
    <Ripple rippleColor="#d50000">
        <Label text="Red Ripples!!!"></Label>
    </Ripple>
     <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
    <Button (tap)="toggleCheck()" text="Toggle it!"></Button>
    <Button (tap)="getCheckProp()" text="Check Property"></Button>
</StackLayout>

And this is the code for home.component.ts

import { Component } from "@angular/core";
import { registerElement } from "nativescript-angular/element-registry";
registerElement("Ripple", () => require("nativescript-ripple").Ripple);
import { CheckBox } from 'nativescript-checkbox';
registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public counter: number = 16;

    public get message(): string {
        if (this.counter > 0) {
            return this.counter + " taps left";
        } else {
            return "Hoorraaay! \nYou are ready to start building!";
        }
    }
        public onTap() {
        this.counter--;
    }
}

[atellmer]

If you have some trouble with plugins installation in your angular application, try it: 'tns platform remove android && tns platform add android'. After this you should remove app from your emulator and start nativescript build again. Works for me.

[zbarbuto]

This seems to only occur for me in AoT builds using webpack if it helps.

[edusperoni]

Angular 10 support is up!