I’m new to NativeScript so please excuse me if I’m asking a stupid question. I tried to figure it out using google for days now but had no success.
On the bottom of the app I have some labels with icon font. So what I want to do is to change the label color when clicked.
Screenshot
Here is my app.components.ts
import { Component } from "#angular/core";
import * as dockModule from "tns-core-modules/ui/layouts/dock-layout";
import { TNSFontIconService } from 'nativescript-ng2-fonticon';
import {topmost} from "ui/frame";
import {Page} from "ui/page";
#Component({
selector: "my-app",
template: `
<!-- <ActionBar title="Rupa GIS" class="action-bar" font-size= "7"></ActionBar> -->
<ActionBar title="Rupa GIS" android.icon="res://icon" android.iconVisibility="always" class="action-bar" ></ActionBar>
<!-- Your UI components go here -->
<Page class="pg">
<DockLayout class="formMessag">
<GridLayout class="formMessage1" columns="2*,2*,2*,2*" rows="" dock="bottom" verticalAlignment="bottom" class="mdi" >
<Label class="mdi1" id="dd" [text]="'mdi-map' | fonticon" row="0" col="0" (tap)="onTapMap()" backgroundColor="transparent" verticalAlignment="center" horizontalAlignment="center" ></Label>
<Label class="mdi2" [text]="'mdi-camera' | fonticon" row="0" col="1" (tap)="onTapCam()" backgroundColor="transparent" verticalAlignment="center" horizontalAlignment="center" ></Label>
<Label class="mdi3" [text]="'mdi-info' | fonticon" row="0" col="2" (tap)="onTapInfo()" backgroundColor="transparent" verticalAlignment="center" horizontalAlignment="center" ></Label>
<Label class="mdi4" [text]="'mdi-settings' | fonticon" row="0" col="3" (tap)="onTapSett()" backgroundColor="transparent" verticalAlignment="center" horizontalAlignment="center" ></Label>
</GridLayout>
</DockLayout>
</Page>
`
})
export class AppComponent {
// Your TypeScript logic goes here
// var isSelected = "true";
onTapMap(dd) {
// boolean isSelected = true;
let self = this;
console.log("MAPA");
}
onTapCam() {
console.log("KAMERA");
}
onTapInfo() {
console.log("INFORMACIJE");
}
onTapSett() {
console.log("PODESAVANJA");
}
constructor(private fonticon: TNSFontIconService, private page: Page) {
page.actionBarHidden = true;
}
}
export function pageLoaded() {
console.log("DOBAR DAN!");
}
And here is my app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { TNSFontIconModule } from 'nativescript-ng2-fonticon';
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [
NativeScriptModule,
TNSFontIconModule.forRoot({
'mdi': 'material-design-icons.css'
})
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
And here is the main.ts
And here is the main.ts
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);
How could I make it so that the onTapMap function changes the color of a label? Any advise or guidance would be greatly appreciated.
Thank you!
Srdjan
You can apply class based on tap events -
<Label class="{{ checkYes ? 'redColor' : 'defaultColor'}}" id="dd"
[text]="'mdi-map' | fonticon" row="0" col="0" (tap)="onTapMap()"
backgroundColor="transparent" verticalAlignment="center"
horizontalAlignment="center" ></Label>`
here i've changed the css class impl. -
class="{{ checkYes ? 'redColor' : 'defaultColor'}}"
on tap event make this variable checkYes true or false and in your css file define two classes as -
.redColor {
color:red;
}
.defaultColor {
color:gray
}
and for function onTapMap() -
onTapMap() {
if(this.checkYes)
this.checkYes = false;
else
this.checkYes = true;
}
Related
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>
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;
}
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
I'm trying to get this to work, but it only gives me following error. I did almost the same thing for the nativescript-groceries app, but angular2-seed-advanced has a somewhat different architecture, seems to be a dependency injection problem somewhere between nativescript and the seed project and the telerik-ui.
Any help is appreciated:
EXCEPTION: Error in
/data/data/com.yourdomain.appname/files/app/app/components/app.component.tns.html:0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property 'android' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'android' of undefined
at RadSideDrawer.initOldDrawer (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js:91:40)
at RadSideDrawer._createUI (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-telerik-ui/sidedrawer/sidedrawer.js:147:18)
at RadSideDrawer.View._onContextChanged (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:197:14)
at RadSideDrawer.View._onAttached (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:149:14)
at Page.View._addViewCore (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view.js:125:18)
at Page.View._addView (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/core/view-common.js:952:14)
at Page.Object.defineProperty.set [as content] (/data/data/com.yourdomain.appname/files/app/tns_modules/ui/content-view/content-view.js:19:22)
at ViewUtil.insertChild (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:56:28)
at ViewUtil.createAndAttach (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:103:18)
at ViewUtil.createView (/data/data/com.yourdomain.appname/files/app/tns_modules/nativescript-angular/view-util.js:110:25)
ERROR CONTEXT:
[object Object]
Here are my changes
nativescript/package.json
### Added dependency
"nativescript-telerik-ui": "^1.3.1",
nativescript/app/native.module.ts
...
import {SIDEDRAWER_PROVIDERS} from 'nativescript-telerik-ui/sidedrawer/angular';
...
#NgModule({
...
providers: [
NS_ANALYTICS_PROVIDERS,
### Added sidedrawer providers
SIDEDRAWER_PROVIDERS,
{ provide: RouterExtensions, useClass: TNSRouterExtensions }
],
...
})
export class NativeModule { }
nativescript/app/pages/app/app.component.ts:
...
import {Inject, ChangeDetectorRef} from '#angular/core';
...
import {Page} from 'ui/page';
...
export class NSAppComponent extends AppComponent {
constructor(
#Inject(Page) private _page: Page,
private _changeDetectionRef: ChangeDetectorRef,
#Inject(AnalyticsService) public analytics: AnalyticsService,
#Inject(LogService) private log: LogService,
#Inject(Store) private store: Store<any>,
#Inject(Router) private router: Router)
{
// ### ADDED Page and ChangeDetectionRef
super(_page, _changeDetectionRef, analytics, log);
...
nativescript/app/app/components/app.component.ts
...
import {ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, AfterViewInit} from '#angular/core';
...
import {
SIDEDRAWER_DIRECTIVES,
RadSideDrawerComponent,
SideDrawerType
} from 'nativescript-telerik-ui/sidedrawer/angular';
import {DrawerTransitionBase, PushTransition} from 'nativescript-telerik-ui/sidedrawer';
import {Page} from 'ui/page';
...
#BaseComponent(
{
moduleId : module.id,
selector : 'sd-app',
templateUrl : 'app.component.html',
directives : [SIDEDRAWER_DIRECTIVES],
changeDetection: ChangeDetectionStrategy.Default // Everything else uses OnPush
}
)
export class AppComponent implements AfterViewInit {
private _currentNotification: string;
private _sideDrawerTransition: DrawerTransitionBase;
#ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
constructor(
private page: Page,
private changeDetectionRef: ChangeDetectorRef,
public analytics: AnalyticsService,
public logger: LogService)
{
logger.debug(`Config env: ${Config.ENVIRONMENT().ENV}`);
this.page.on("loaded", this.onLoaded, this);
}
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this.changeDetectionRef.detectChanges();
}
public onLoaded(args) {
this._sideDrawerTransition = new PushTransition();
}
public get sideDrawerTransition(): DrawerTransitionBase {
return this._sideDrawerTransition;
}
public get currentNotification(): string {
return this._currentNotification;
}
public openDrawer() {
this.drawer.showDrawer();
}
public onDrawerOpening() {
console.log("Drawer opening");
this._currentNotification = "Drawer opening";
}
public onDrawerOpened() {
console.log("Drawer opened");
this._currentNotification = "Drawer opened";
}
public onDrawerClosing() {
console.log("Drawer closing");
this._currentNotification = "Drawer closing";
}
public onDrawerClosed() {
console.log("Drawer closed");
this._currentNotification = "Drawer closed";
}
}
nativescript/app/app/components/app.component.tns.html
<RadSideDrawer #drawer>
<StackLayout tkDrawerContent class="sideStackLayout">
<StackLayout class="sideTitleStackLayout">
<Label text="Navigation Menu"></Label>
</StackLayout>
<StackLayout class="sideStackLayout">
<Label text="MenuItemA" ></Label>
<Label text="MenuItemB" ></Label>
<Label text="MenuItemC" ></Label>
</StackLayout>
</StackLayout>
<StackLayout tkMainContent>
<!-- nested original content in Drawer -->
<ActionBar title="Test" class="action-bar">
<ActionItem ios.position="right" android.position="popup">
<Button [text]="'MENU' | translate" (tap)=openDrawer() class="action-btn"></Button>
</ActionItem>
<ActionItem nsRouterLink="/about" ios.position="right" android.position="popup">
<Button [text]="'ABOUT' | translate" class="action-btn"></Button>
</ActionItem>
</ActionBar>
<StackLayout class="container">
<lang-switcher></lang-switcher>
<ScrollView>
<page-router-outlet></page-router-outlet>
</ScrollView>
</StackLayout>
</StackLayout>
nativescript/app/app/components/app.component.tns.css
.sideStackLayout {
background-color: white;
}
Ok, got it to work and wanted to share this, as it is not exactly straightforward or especially well documented...
With the release of nativescript-telerik-ui 1.4.1 and the final 2.0.0 release of Angular this is pretty easy actually.
nativescript/package.json
### Added dependency
"nativescript-telerik-ui": "^1.4.1",
nativescript/app/native.module.ts
...
import { SIDEDRAWER_DIRECTIVES } from 'nativescript-telerik-ui/sidedrawer/angular';
...
#NgModule({
...
declarations: [
SIDEDRAWER_DIRECTIVES, ### allows usage of <RadSideDrawer> in pages
HomeComponent,
AboutComponent
],
...
})
export class NativeModule { }
nativescript/app/pages/app/app.component.ts:
no changes - drawer is supposed to be used per page
nativescript/app/app/components/app.component.ts
no changes - drawer is supposed to be used per page
nativescript/app/app/components/about/about.component.ts
import {ViewChild, ChangeDetectorRef, Inject} from '#angular/core';
...
import {RadSideDrawerComponent, SideDrawerType } from 'nativescript-telerik-ui/sidedrawer/angular';
import {DrawerTransitionBase, PushTransition} from 'nativescript-telerik-ui/sidedrawer';
import {Page} from 'ui/page';
...
export class AboutComponent {
private _currentNotification: string;
private _sideDrawerTransition: DrawerTransitionBase;
#ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
constructor(
private page: Page,
private changeDetectionRef: ChangeDetectorRef )
{
this.page.on("loaded", this.onLoaded, this);
}
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this.changeDetectionRef.detectChanges();
}
public onLoaded(args) {
this._sideDrawerTransition = new PushTransition();
}
public get sideDrawerTransition(): DrawerTransitionBase {
return this._sideDrawerTransition;
}
public get currentNotification(): string {
return this._currentNotification;
}
public openDrawer() {
this.drawer.showDrawer();
}
public onDrawerOpening() {
console.log("Drawer opening");
this._currentNotification = "Drawer opening";
}
public onDrawerOpened() {
console.log("Drawer opened");
this._currentNotification = "Drawer opened";
}
public onDrawerClosing() {
console.log("Drawer closing");
this._currentNotification = "Drawer closing";
}
public onDrawerClosed() {
console.log("Drawer closed");
this._currentNotification = "Drawer closed";
}
}
nativescript/app/app/components/app.component.tns.html
<RadSideDrawer #drawer
(drawerOpening)="onDrawerOpening()"
(drawerOpened)="onDrawerOpened()"
(drawerClosing)="onDrawerClosing()"
(drawerClosed)="onDrawerClosed()"
[transition]="sideDrawerTransition">
<StackLayout tkDrawerContent class="sideStackLayout">
<Label text="MenuItemA" ></Label>
<Label text="MenuItemB" ></Label>
<Label text="MenuItemC" ></Label>
</StackLayout>
<StackLayout tkMainContent>
<!-- nested original content in Drawer -->
<ActionBar title="Test" class="action-bar">
<ActionItem ios.position="right" (tap)=openDrawer() android.position="popup">
<Button [text]="'MENU' | translate" class="action-btn"></Button>
</ActionItem>
<ActionItem nsRouterLink="/about" ios.position="right" android.position="popup">
<Button [text]="'ABOUT' | translate" class="action-btn"></Button>
</ActionItem>
</ActionBar>
<StackLayout>
<Label text="Angular 2 Seed Advanced is ...
...
</StackLayout>
</StackLayout>
nativescript/app/app/components/app.component.tns.css
.sideStackLayout {
background-color: white;
}
I was following this guide to create a a nativescript custom component http://moduscreate.com/custom-components-in-nativescript/ but it's not working for me
I have a folder pages with a folder inside it called main.
main has a couple of files
main.html
<StackLayout
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:hello="pages/helllo"
loaded="pageLoaded" >
<hello:hello/>
</StackLayout>
main.component.ts
import { Component, ElementRef, OnInit, ViewChild} from "#angular/core";
import { Page } from "ui/page";
import colorModule = require("color");
var Color = colorModule.Color;
#Component({
selector: "my-app",
templateUrl: "pages/main/main.html",
styleUrls: ["pages/main/main-common.css"]
})
export class MainComponent implements OnInit{
constructor(private page: Page) {
}
ngOnInit() {
this.page.actionBarHidden = true;
}
}
and I also have main-common.css but that's not important to show. I then have another folder inside pages called hello with just one file inside of it
hello.html
<StackLayout width="100%" height="100%" backgroundColorr="red">
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
<Label class ="h1" text="h1 hello world" color="black"></Label>
</StackLayout>
however the hello component is not showing no matter what i do i am only getting an empty screen. I also tried changing this line xmlns:hello="pages/helllo" in hello.html file to this xmlns:hello="../helllo" but i didn't get anything not even an error. can someone point out what i am doing wrong?
What you are referring as valid in NativeScript Core but won't work in NativeScript + Angular-2.
What you need instead is to create custom component the Angular-2 way.
For demonstration, we can refer to this sample where a custom item component is created. The example is also described in the documentation and it will also show you how to bind data with #Input directive for this component.
Let me guide you through the process.
1.) Create your custom component
using-item-template.component.ts
import { Component, ChangeDetectionStrategy, Input } from "#angular/core";
#Component({
selector: 'item-component',
styleUrls: ["listview/using-item-template/using-item-template.component.css"],
template: `
<StackLayout *ngFor="let element of data.list" class="model">
<Label [text]="element.model" class="name"></Label>
<Label [text]="element.speed +'mph'" class="speed"></Label>
</StackLayout>
`
})
export class ItemComponent {
#Input() data: any; // this way we "pass data" to our item-component
}
#Component({
selector: 'using-item-template',
styleUrls: ["listview/using-item-template/using-item-template.component.css"],
templateUrl: "listview/using-item-template/using-item-template.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsingItemTemplateComponent {
public manufacturers: Array<any>;
constructor() {
var bugatti = [{ "model": "Bugatti Chiron", "speed": "261" }, { "model": "Bugatti Veyron Super Sport", "speed": "268" }];
var mclaren = [{ "model": "McLaren P1", "speed": "211" }, { "model": "McLaren F1", "speed": "242" }];
var jaguar = [{ "model": "Jaguar XJ220", "speed": 217 }];
this.manufacturers = [{ "list": bugatti }, { "list": mclaren }, { "list": jaguar }];
}
}
using-item-template.component.html
<StackLayout exampleTitle toggleNavButton>
<GridLayout rows="50, *" class="example-container">
<Label text="Top Cars" row="0" class="title" textWrap="true" horizontalAlignment="center"></Label>
<ListView [items]="manufacturers" row="1">
<template let-item="item">
<item-component [data]="item" ></item-component>
</template>
</ListView>
</GridLayout>
</StackLayout>
The last but also crucial part is not to forget to declare your ItemComponent in the NgModule!
main.ts
import { ItemComponent } from "./listview/using-item-template/using-item-template.component";
#NgModule({
declarations: [
ItemComponent, // declare the item component
// the other components in your app
],
bootstrap: [AppComponent],
imports: [
.....
],
})
class AppComponentModule { }