Develop Reference

Navigating nested routes in NativeScript Angular

In my NativeScript Angular Project this is my router module:
export const routes = [
{path: "user", component: UserComponent,
children: [
{
path: "dashboard",
component: DashboardComponent
},
{
path: "notice",
component: NoticeComponent
},
{
path: "attendance",
component: AttendanceComponent
},
{
path: "subject",
component: SubjectComponent,
children: [
{
path: "discussion",
component: DiscussionComponent
},
{
path: "assignment",
component: AssignmentComponent,
children: [
{
path: "assignment-report", component: AssignmentReportComponent
}
]
}
]
}
]
}
];
The user.component.html has a bottom bar with links for Dashboard, Notice and Attendance components which are displayed in a router outlet in UserComponent. A user clicks on a subject in user/dashboard route to go to a subject. The SubjectComponent again has two tabs for 'Discussion' and 'Assignment' displayed in a router outlet inside SubjectComponent.
Problem: When I am in SubjectComponent and click on any of the links in the bottom bar to navigate to Dashboard, Attendance or Notice, the app crashes and I get this error:
An uncaught Exception occurred on "main" thread.
Calling js method onPause failed
Error: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference .
It works fine if I just remove the <page-router-outlet> in SubjectComponent. I know I am somewhere messing up in nesting these routes but the error doesn't throw anything specific so I am unable to figure out.
Playground Sample: Open the playground sample and click on "Open Subject" button. When you are on the Subject Page, click on "Dashboard" button at the bottom. You will get the error.
Playground Link: https://play.nativescript.org/?template=play-ng&id=qGvsVF&v=11
Adding some code snippets that might be relevant to this problem.
user.component.html
<GridLayout style="background-color: #ffffff;" rows="*, auto">
<StackLayout class="content-container" row="0">
<page-router-outlet></page-router-outlet>
</StackLayout>
<StackLayout class="bottom-bar" row="1">
<StackLayout class="menu-container" horizontalAlignment="center" orientation="horizontal">
<Image (tap)="openDashboard()" [ngStyle]="{'border-color': isHome?'#1d87c9' :'#ffffff'}" class="btn-home" [src]="menuImages[0]"></Image>
<Image (tap)="openNotice()" [ngClass]="{'btn-active': isNotice}" class="btn-icon" [src]="menuImages[1]"></Image>
<Image (tap)="openAttendance()" [ngClass]="{'btn-active': isAttendance}" class="btn-icon" [src]="menuImages[2]"></Image>
</StackLayout>
</StackLayout>
openDashboard() method in user.component.ts. openNotice() and openAttendance() are similar
import { RouterExtensions } from "nativescript-angular/router";
constructor(private routerExtensions: RouterExtensions) {}
openDashboard(){
this.routerExtensions.navigateByUrl('user/dashboard');
this.menuImages = ["res://uni_full","res://notice_default","res://attendance_default"];
this.isHome = true;
this.isNotice = false;
this.isAttendance = false;
}
subject.component.html
<StackLayout class="main">
<GridLayout rows="auto, *">
<StackLayout row="0" class="subject-ribbon">
<StackLayout class="tab-container" orientation="horizontal">
<StackLayout (tap)="changeTab('discussion')" class="tab">
<Label class="tab-label" text=" Discussion"></Label>
<Label class="tab-indicator"></Label>
</StackLayout>
<StackLayout (tap)="changeTab('assignment')" class="tab">
<Label class="tab-label" text=" Assignment"></Label>
<Label class="tab-indicator"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
<ScrollView (scroll)="onScroll($event)" row="1">
<StackLayout>
<page-router-outlet></page-router-outlet>
</StackLayout>
</ScrollView>
</GridLayout>
subject.component.ts
import { RouterExtensions } from "nativescript-angular/router";
constructor(private routerExtensions: RouterExtensions) {}
changeTab(tabName){
this.tabMode = tabName;
this.routerExtensions.navigateByUrl('user/subject/' + tabName);
}

I suspect the issue is that you had wrapped your frame (page-router-outlet) with a ScrollView. It's not a good practice for various reasons and the app seems to crash because of that. Moving the ScrollView within the page resolves the issue.
Updated Playground

Sliding Drawer open from right to left in xamarin android

I am getting issue to open sliding drawer from right to left for
xamarin android . but below code working for show sliding
drawer from left to right. if any property of MasterDetailPage to
open sliding from right to left
please share your views with me. Here Sliding Drawer open from left to right but i want to open from right to left for Xamarin
Android
Any idea regarding this. please share your idea's.
We are also using MenuRootPage for add items in Sliding Drawer :
Code for items view:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
>
<ContentPage.Content>
<StackLayout BackgroundColor="{StaticResource ToolbarStatusBackgroundColor}" Orientation="Vertical" Spacing="20">
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command SliderClose}" />
</StackLayout.GestureRecognizers>
<Image Source="menu.png" HorizontalOptions="Start" Margin="10,40,0,0" />
</StackLayout>
<BoxView HorizontalOptions="EndAndExpand" HeightRequest="1" WidthRequest="1000" Color="{StaticResource SeparatorColor}" />
<Label Text="My account" Style="{StaticResource ToolbarStatusDescriptionLabel}" Margin="10" >
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command SliderClose}" />
</Label.GestureRecognizers>
</Label>
<BoxView HorizontalOptions="EndAndExpand" HeightRequest="1" WidthRequest="1000" Color="{StaticResource SeparatorColor}" />
<Label Text="Settings" Style="{StaticResource ToolbarStatusDescriptionLabel}" Margin="10">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command SliderClose}" />
</Label.GestureRecognizers>
</Label>
<BoxView HorizontalOptions="EndAndExpand" HeightRequest="1" WidthRequest="1000" Color="{StaticResource SeparatorColor}" />
<Label Text="Logout" Style="{StaticResource ToolbarStatusDescriptionLabel}" HorizontalTextAlignment="Center" VerticalOptions="EndAndExpand" Margin="10">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{mm:Command Logout}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
In MenuRootPage .xaml file we are declare master page only UI section
In MenuRootPage .cs file: here we are inherit MasterDetailPage properties
Using code:
Root page in MenuRootPage .xaml file:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Ansible.Vektor.App.Shared.Views.MenuRootPage" >
</MasterDetailPage>
Root MenuRootPage .cs file:
public partial class MenuRootPage : MasterDetailPage
{
public MenuRootPage ()
{
InitializeComponent();
MasterBehavior = MasterBehavior.Popover;
}
}
App.xaml.cs:
var menuPage = new MenuPages() { BindingContext = MenuPagesViewModel };
NavigationPage = new NavigationPage(new MainView() {
BindingContext = MainViewModel });
MenuRootPage = new MenuRootPage();
MenuRootPage.Master = menuPage;
MenuRootPage.Detail = NavigationPage;
MenuIsGestureEnabled = false;
MainPage = MenuRootPage;
Here Sliding Drawer open from left to right but i want to open from right to left for Xamarin Android
Any idea regarding this. please share your idea's.

Make custom render for Master Detail Page in Android.
public class MyMasterDetailPageRenderer : MasterDetailPageRenderer
{
protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
{
base.OnElementChanged(oldElement, newElement);
var fieldInfo = GetType().BaseType.GetField("_masterLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
var _masterLayout = (ViewGroup)fieldInfo.GetValue(this);
var lp = new DrawerLayout.LayoutParams(_masterLayout.LayoutParameters);
lp.Width = 300;
lp.Gravity = (int)GravityFlags.Right;
_masterLayout.LayoutParameters = lp;
}
}

Horizontal WrapLayout shows elements vertically instead of horizontally

I'm completely new to NativeScript but it looks like a sweet platform. I'm writing a toy app and below is my setup:
//code behind
import {AddExpenseModel} from "./add-expense-view-model";
import {EventData} from "tns-core-modules/data/observable";
import {Page} from "tns-core-modules/ui/page";
let expenseModel = new AddExpenseModel();
export function navigatingTo(args: EventData) {
let page = <Page>args.object;
let textField = page.getViewById("tags");
textField.on("textChange", (ev)=>{expenseModel.onTagsTextFieldChange(ev)});
page.bindingContext = expenseModel;
}
export function submit() {
expenseModel.createNewExpense()
}
//view-model
import {Observable, PropertyChangeData} from "tns-core-modules/data/observable";
import {ObservableArray} from "tns-core-modules/data/observable-array";
let u = require('underscore');
export class AddExpenseModel extends Observable {
...
public parsed_tags;
constructor() {
super();
this.parsed_tags = new ObservableArray([]);
...
}
public onTagsTextFieldChange(ev) {
let that = this;
// empty
u.forEach(u.range(this.parsed_tags.length), function (_) {
that.parsed_tags.pop()
});
let parsed = this.parseTags(ev.value);
u.forEach(parsed, function (el) {
that.parsed_tags.push(el);
});
}
private getParsedTags() {
//unbox
return u.map(this.parsed_tags, (el: string) => el)
}
private parseTags(tag_string) {
let arr = u.map(tag_string.split(','), (tag: string) => tag.trim().toLocaleLowerCase());
arr = u.uniq(arr);
arr = u.filter(arr, u.negate(u.isEmpty))
return arr;
}
}
//view
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<StackLayout class="p-20">
<Label text="Add new expense"/>
<text-field
id="name" text="{{ name }}"
row="0"/>
<text-field id="amount" stext="{{ amount, amount | numberConverter }}" />
<text-field id="tags" secure="false" text="{{ tags }}"
/>
<WrapLayout orientation="horizontal" height="300" width="300">
<ListView items="{{ parsed_tags }}">
<ListView.itemsLayout>
<Label text="{{ $value }}" width="70" backgroundColor="red"/>
</ListView.itemsLayout>
</ListView>
</WrapLayout>
<button text="Add expense" id="submit-button" tap="submit"/>
</StackLayout>
</Page>
What I want to achieve is that when a user writes in the tags textfield, stylised Labels appear in the WrapLayout. This works, however, the Labels appear always stacked vertically. Here's a screenshot
I tried to move the whole WrapLayout section out of the StackedLayout section, but I get a cannot read property 'on' of undefined, undefined.
Putting Labels inside of WrapLayout not within a ListView (i.e. static) works as expected, which makes me thing I probably misuse either the ListView or the WrapLayout. Any directions will be appreciated :)
Cheers
Update
Following Eddy's advice I used a Repeater. Using the following xml
<Repeater items="{{ parsed_tags }}">
<Repeater.itemsLayout>
<WrapLayout orientation="horizontal" backgroundColor="#d3d3d3"/>
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}" backgroundColor="#84ddff" marginRight="5" marginLeft="5"/>
</Repeater.itemTemplate>
</Repeater>
correctly produces this:
I still don't see why using a ListView wouldn't work. I used the debugger from Sidekick and this is what I see.
<ListView items="{{ parsed_tags }}">
<ListView.itemsLayout>
<WrapLayout orientation="horizontal" backgroundColor="#d3d3d3" marginRight="5" marginLeft="5"/>
</ListView.itemsLayout>
<ListView.itemTemplate>
<Label text="{{ $value }}" backgroundColor="#84ddff" marginRight="5" marginLeft="5"/>
</ListView.itemTemplate>
</ListView>

toggle listview content in nativescript with angular

hi i need to toggle individual content in listview when the respective button is clicked in nativescript angular,
i added bellow my code. if anyone know please answer me. thanks in advance
import { Component, OnInit } from "#angular/core";
import { Item } from "./item";
import { ItemService } from "./item.service";
#Component({
selector: "ns-items",
moduleId: module.id,
templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
items: Item[];
isList = true;
toggle(){
this.isList = !this.isList;
}
constructor(private itemService: ItemService) { }
ngOnInit(): void {
this.items = this.itemService.getItems();
}
}
and here my items.component.html
<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="items" class="list-group">
<template let-item="item">
<GridLayout columns="auto,auto" width="210" height="210" >
<Label [text]="item.name" col="0"
class="list-group-item" visibility="{{isList ? 'visible' : 'collapse'}}"></Label>
<Button [text]="isList ? 'hide' : 'Show'" col="1" (tap)="toggle()"></Button>
</GridLayout>
</template>
</ListView>
</StackLayout>
here problem is when i click the button all the labels are toggle. so i need to generate the variable dynamically. i m very beginner so anyone can help me?
thank in advance.

Guess you have modified the starter template. So if you want hide label on particular list item, try this.
Add visible property to item.ts
export class Item {
id: number;
name: string;
role: string;
visible: boolean;
}
Set value to visible in your item.service.ts. It will be like below.
{ id: 1, name: "Ter Stegen", role: "Goalkeeper", visible: true },
{ id: 3, name: "Piqué", role: "Defender", visible: true },
Your list template should be
<template let-item="item">
<GridLayout class="list-group-item" columns="*,auto">
<Label col="0" [text]="item.name" [visibility]="item.visible ? 'visible' : 'collapse'"></Label>
<Button class="btn" col="1" [text]="item.visible ? 'Hide' : 'Show'" (tap)="toggle(item)"></Button>
</GridLayout>
</template>
And finally the toggle method will be,
ngOnInit(): void {
this.items = this.itemService.getItems();
}
toggle(item: Item) {
item.visible = !item.visible;
}

Nativescript-fresco with ng2+Natiivescript

I followed the guidelines to use nativescript-fresco with ng2+nativescript for my android app because it was crashing every time I scrolled more than once down then up. The component in which I'm using it is a listview which displays 20 online images. The urls are passed from the parent component through a #Input directive which works. However, when I switched to FrescoDrawee, the listview is rendered but the images are not.
Here is the html for the component
<GridLayout columns="*,*,*,*,*,*,*,*,*" height="100" class="item"
xmlns:nativescript-fresco="nativescript-fresco">
<ios>
<Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="ios-product-image" (tap)="details(data)"></Image>
</ios>
<android>
<!--<Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="android-product-image" (tap)="details(data)"></Image>-->
<nativescript-fresco:FrescoDrawee width="100" height="100"
[imageUri]="data.imageUrl"
></nativescript-fresco:FrescoDrawee>
</android>
<StackLayout row="0" col="3" colSpan="5" (tap)="details(data)">
<Label [text]="data.name" class="product-name"></Label>
<Label [text]="data.description" textWrap="true" class="product-description"></Label>
<GridLayout columns="*,*,*,*,*,*,*,*,*,*" class="increment-decrement" style="width: 100%; height: 20%; vertical-align: bottom">
<Label [text]="data.price" class="product-price" col="0" colSpan="5"></Label>
<ios>
<Button text="-" col="5" colSpan="1" (tap)="dec()"></Button>
<Label [text]="count" col="6" colSpan="3" class="product-amount" ></Label>
<Button text="+" col="9" colSpan="1" (tap)="inc()"></Button>
</ios>
<android>
<Label text="-" col="5" colSpan="1" class="inc-dec" (tap)="dec()"></Label>
<Label [text]="count" col="6" colSpan="3" class="product-amount"></Label>
<Label text="+" col="9" colSpan="1" class="inc-dec" (tap)="inc()"></Label>
</android>
</GridLayout>
</StackLayout>
<ios>
<Button col="11" class="cart" colSpan="1"></Button>
</ios>
<android>
<Label col="11" class="cart" colSpan="1"></Label>
</android>
<Image src="~/media/ic_add_shopping_cart_white_24dp.png" col="11"
style="height: 20%; width: 20%;" (tap)="addToCart()"></Image>
</GridLayout>
And this is the Type-script
import { Component, OnInit, Input} from "#angular/core";
import LabelModule = require("ui/label");
import application = require("application");
import { RouterExtensions } from "nativescript-angular/router";
import { PublicVariables } from "../../shared/publicVariables";
#Component({
selector:'product-list',
templateUrl: 'pages/products/product_list.html',
styleUrls: ['pages/products/product_list-common.css', 'pages/products/product_list.css']
})
export class ProductListComponent implements OnInit {
#Input() data: any;
private count=0;
constructor(private routerExtensions: RouterExtensions) {}
ngOnInit() {
}
details() {
this.routerExtensions.navigate(["/product/:id"]);
PublicVariables.currentProduct = this.data;
}
inc() {
++this.count;
}
dec() {
if(this.count>0) {
--this.count;
}
}
}
I'm relatively new to native-script so my code may not be the cleanest.
I have added the nativescript-fresco plugin to my project, imported and initialized it in AppModule. What I don't know is if I need to add anything to the component itself apart from the FrescoDrawee tag because I didn't see anything indicating that in the documentation.
Kindly help me figure out what the problem with my code?

I think the problem is with the prefix, you can use it as:
<FrescoDrawee width="100" height="100" [imageUri]="data.imageUrl"></FrescoDrawee>
And for sake of completeness this is what needs to be added to app.module.ts when used with Angular:
import { TNSFrescoModule } from "nativescript-fresco/angular";
import fresco = require("nativescript-fresco");
import application = require("application");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
#NgModule({
imports: [
TNSFrescoModule