Skip to main content

Using forkJoin to resolve multiple http api requests in nativescript angular

app.component.ts

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs/Rx';
import "rxjs/add/observable/forkJoin";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(private httpClient: HttpClient) {
}

ngOnInit(): void {
Observable.forkJoin([
this.httpClient
.get<any>("https://api.github.com/users/kumaran-dena"),
this.httpClient
.get<any>("https://api.github.com/users/kumaran-dena/followers"),
this.httpClient
.get<any>("https://api.github.com/users/kumaran-dena/subscriptions")
]).subscribe((response) => {
console.log("<<<<<<<<<<<<<<<<<<<<<<<<< first value>>>>>>>>>>>" + JSON.stringify(response[0]));
console.log("<<<<<<<<<<<<<<<<<<<<<<<<< second value>>>>>>>>>>>" + JSON.stringify(response[1]));
console.log("<<<<<<<<<<<<<<<<<<<<<<<<< third value>>>>>>>>>>>" + JSON.stringify(response[2]));
});
}
}


app.component.html

<ActionBar title="Home" class="action-bar">
</ActionBar>

<ScrollView class="page">
<StackLayout class="home-panel">
<Label textWrap="true" text="Play with forkJoin!" class="h2 description-label"></Label>
</StackLayout>
</ScrollView>

Comments

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> </...

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>

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()"...