Skip to main content

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 + ' tapped');
}
onButtonTap(): void {

this.observationarray[0].categorySection[0].selctedImage.push(
{ name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
{ name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" }
);
console.log("data was pushed" + JSON.stringify(this.observationarray));
}
onButtonT(): void {

this.observationarray.push(
{
"name": "Spain",
"imageSrc": "https://play.nativescript.org/dist/assets/img/flags/es.png",
"categorySection": [{

"selctedImage": [
{ name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
{ name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
{ name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
],

"contact": '88773434971288',

}]
}
)
console.log("data was pushed" + JSON.stringify(this.observationarray));

}
}

app.component.html
<ActionBar title="Home" class="action-bar">
</ActionBar>

<ScrollView class="page">
<StackLayout class="home-panel">
<Button text="Button full" (tap)="onButtonT()"></Button>
<Button text="Button" (tap)="onButtonTap()"></Button>
<StackLayout rows="auto,auto" *ngFor="let item of observationarray">
<FlexboxLayout row="0" flexDirection="row" class="list-group-item">
<Image [src]="item.imageSrc" class="thumb img-circle"></Image>
<Label [text]="item.name" class="list-group-item-heading" verticalAlignment="center" style="width: 60%"></Label>
</FlexboxLayout>
<StackLayout rows="auto,auto" row="1" *ngFor="let cat of item.categorySection">
<FlexboxLayout row="0" *ngFor="let files of cat.selctedImage">
<Image [src]="files.imageSrc" class="thumb img-circle"></Image>
<Label [text]="files.name" class="list-group-item-heading" verticalAlignment="center" style="width: 60%"></Label>
</FlexboxLayout>

<Label row="1" [text]="cat.contact"></Label>
</StackLayout>

</StackLayout>
</StackLayout>
</ScrollView>
Labels:

Comments

Post a Comment

Popular posts from this blog

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> </...
Post a Comment
Read more

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>
Post a Comment
Read more

Dividing screen into multiple fragments for design home screen menus 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 { onButtonTap(): void { console.log("Button was pressed"); } constructor() { } ngOnInit(): void { } } home.component.html <ActionBar title="Home" class="action-bar"> </ActionBar> <GridLayout height="90%" width="95%" rows="*,*" columns="*,*"> <StackLayout class="a" row="0" col="0"> <Button text="Button 1" (tap)="onButtonTap()"></Button> </StackLayout> <StackLayout class="b" row="0" col="1"> <Button text="Button 2" (tap)="onButtonTap()"...
Post a Comment
Read more