Skip to main content

Posts

Showing posts from February, 2018

Using ngClass to dynamic style/css change in nativescript angular

home.component.html <ActionBar title="Home" class="action-bar"> </ActionBar> <ScrollView class="page"> <StackLayout class="home-panel"> <Button text="onActive" (tap)="onActiveButtonTap()"></Button> <Button text="onDeAct" (tap)="onDeActButtonTap()"></Button> <Label textWrap="true" [text]="check + 'Play with nativescript!' " class="normal" [ngClass]="{active : check, deactive : check == false}" class="h2 description-label"></Label> </StackLayout> </ScrollView> home.component.ts import { Component, OnInit } from "@angular/core"; @Component({ selector: "Home", moduleId: module.id, templateUrl: "./home.component.html", styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { check: boole...

Run / Open VSCode from Mac Terminal

Open Visual Studio Code and press  Command  +  Shift  +  P  then type  Shell  in command palette now you are able to find this option like  Shell Command : Install code in PATH  from suggested list in command palette. Select that options. That's it. Now open your terminal type. $ code .

NgFor Directive with Index in nativescript angular

home.component.ts import { Component, OnInit } from "@angular/core"; @Component({ selector: "Home", moduleId: module.id, templateUrl: "./home.component.html", styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { silabusList = [ { "subject": "tamil" }, { "subject": "hindi" }, {"subject": "english"}, { "subject": "spanish" }, ] constructor() { } ngOnInit(): void { } btn(args) { console.log("index subje " + args) } } home.component.html <ActionBar title="Home" class="action-bar"> </ActionBar> <ScrollView class="page"> <StackLayout class="home-panel"> <StackLayout *ngFor="let item of silabusList ; let i = index"> <Label [text]="item.subject" (tap)="btn(i)" ></Label> </...

Using Icons from graphemica/whatsapp in nativescript angular

Using graphemica Icons -  1. Open the below link http://graphemica.com/%F0%9F%93%8E 2. Copy the icon then paste in the label text as mentioned, <Label text="📎" horizontalAlignment="center"></Label> Using Whatsapp Icons -  1. Just open the whatsapp web,  https://web.whatsapp.com/ 2. Copy the icons/symbols then paste it in the label text  as mentioned, <Label horizontalAlignment=" center " text="😍"></Label>

Binding nested array objects with component template in nativescript angular

app.component.ts import { ItemEventData } from "ui/list-view" import { Component, OnInit } from "@angular/core"; @Component({ selector: "Home", moduleId: module.id, templateUrl: "./home.component.html", styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { public observationarray = [{ "name": "Australia", "imageSrc": "https://play.nativescript.org/dist/assets/img/flags/au.png", "categorySection": [{ "selctedImage": [ { name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png"}, { name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" } ], "contact": '887798971288', }] }]; constructor() { } ngOnInit(): void { } onItemTap(args: ItemEventData): void { console.log('Item with index: ' + args.index + ' ...