Generate angular 4 SDK in loopback.

1. Generate SDK in loopback application 

The @mean-expert/loopback-sdk-builder is a community driven module forked from the official loopback-sdk-angular and refactored to support Angular 2.

• npm install --save-dev @mean-expert/loopback-sdk-builder

Angular 2 for Web:

• $ ./node_modules/.bin/lb-sdk server/server.js  ./sdk -d ng2web -i enabled

Add a script to package.json

{
  "scripts": {
    "build:sdk": "./node_modules/.bin/lb-sdk server/server.js ./sdk -d ng2web -i enabled"
  }
}

then:
$ cd to/loopback/project
$ npm run build:sdk


Please follow these all URL:

• https://loopback.io/doc/en/lb2/Angular-2-SDK.html
• https://github.com/mean-expert-official/loopback-sdk-builder
• https://github.com/mean-expert-official/loopback-sdk-builder/wiki/1.-Install-Builder-&-Build-SDK

2. User SDK In angular application.

1 .Set baseUrl and apiVersion these in environment file:

    a. apiVersion => api version check in "config.json" loopback application.

export const environment = {

production: false,

baseUrl: 'http://localhost:3000',

apiVersion: 'api/v1'

};

2. Set SDKBrowserModule in main module

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import {SDKBrowserModule} from './sdk/index';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule,

SDKBrowserModule.forRoot()

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

3. Set LoopBackConfig and LoopBackAuth in-app component

import { PostsApi } from './sdk/services/custom/Posts';

import { Component } from '@angular/core';

import { LoopBackConfig } from './sdk/lb.config';

import { LoopBackAuth } from './sdk/services/core/auth.service';

import { environment } from '../environments/environment';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

constructor(private _postsApi: PostsApi) {

LoopBackConfig.setBaseURL(environment.baseUrl);

LoopBackConfig.setApiVersion(environment.apiVersion);

this._postsApi.find().subscribe(res => {

console.log('sucess>>', res);

}, err => {

console.log('err>>>>', err);

});

}

}

Please follow these all URL:

• https://loopback.io/doc/en/lb2/Versioning-your-API.html
• https://github.com/mean-expert-official/loopback-sdk-builder/wiki/5.-Usage-Examples

Thee user can click a link with a telephone number to initiate a phone call to that phone number

When running in a browser on a mobile phone, <meta name="format-detection"/> determines whether or not telephone numbers in the HTML content will appear as hypertext links. The user can click a link with a telephone number to initiate a phone call to that phone number.

<meta name="format-detection" content="telephone=yes"/> (default on Safari in iOS)
content="telephone=yes" indicates that telephone numbers in the HTML code should appear as hypertext links that can be clicked to make a phone call.
<meta name="format-detection" content="telephone=no"/>
content="telephone=no" indicates that telephone numbers in the HTML code should not appear as hypertext links.

<meta name="format-detection" content="telephone=no"/>

Get distance between two location or two latitude and longitude in angular

//  Component file

import { Component } from '@angular/core';

import {HttpClient} from '@angular/common/http';

@Component({

selector: 'app-school-dashboard',

templateUrl: './school.component.html',

styleUrls: ['./school.component.css'],

})

export class SchoolComponent {

debugger;

msg = 'welcome School';

mapdistance: any;

byroaddistance: any;

byroadtime: any;

withoutroaddistance: any;

location: any;

fromaddress: any;

toaddress: any;

_lat1= 15.2993265; // Goa

_lon1= 74.12399599999999;

_lat2= 28.5355161; // Delhi

_lon2= 77.3910265;

constructor( private http: HttpClient) {

this._getDistanceFromLatLonInKm();

}

_getDistanceFromLatLonInKm() {

const lat1 = this._lat1;

const lon1 = this._lon1;

const lat2 = this._lat2;

const lon2 = this._lon2;

/*This is count by Radius of the earth*/

const R = 6371; // Radius of the earth in kilometers

const dLat = this.deg2rad(lat2 - lat1); // deg2rad below

const dLon = this.deg2rad(lon2 - lon1);

const a =

Math.sin(dLat / 2) * Math.sin(dLat / 2) +

Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *

Math.sin(dLon / 2) * Math.sin(dLon / 2);

const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

const d = R * c; // Distance in KM

this.withoutroaddistance = d;

const googlekey = 'googleapikey';

const origins = lat1 + ',' + lon1;

const destinations = lat2 + ',' + lon2;

/*End here*/

/*This is count by road map of the earth*/

this.http.get('https://maps.googleapis.com/maps/api/distancematrix/json?origins='

+ origins + '&destinations=' + destinations + '&key=' + googlekey + '').

subscribe(res => {

this.mapdistance = res;

this.byroaddistance = this.mapdistance.rows[0].elements[0].distance.text;

this.byroadtime = this.mapdistance.rows[0].elements[0].duration.text;

});

/*End here*/

}

deg2rad(deg) {

return deg * (Math.PI / 180);

}

getlatlng(address, type) {

 this.http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' +

address).subscribe(res => {

this.location = res;

const addres = this.location.results[0].formatted_address;

const lat = this.location.results[0].geometry.location.lat;

const lng = this.location.results[0].geometry.location.lng;

this.setlocationOnMap(addres, lat, lng, type);

}, err => {

console.log(err);

});

}

setlocationOnMap(address, lat , lng, type) {

if (type === 'frm') {

this.fromaddress = address;

this._lat1 = lat;

this._lon1 = lng;

} else {

this.toaddress = address;

this._lat2 = lat;

this._lon2 = lng;

}

}

}

HTML File

<h1>This is your wellcome screen !!</h1>

<div>

<div class="example-container">

<input #fromadd placeholder="Enter your current location"

(blur)="getlatlng(fromadd.value, 'frm')" autofocus>

<input matInput #toadd placeholder="Enter your drop location" 

(blur)="getlatlng(toadd.value, 'to')">

</div>

</div>

<div>

<br>

<div *ngIf="_lat1" style="float: left;" >

[ From location: {{fromaddress}}

let: {{_lat1}},

lng: {{_lon1}} ]

</div>

<div *ngIf="_lat2">

[ To location: {{toaddress}}

let: {{_lat2}},

lng: {{_lon2}} ]

</div> <br>

<button class="mbutton" *ngIf="_lat1 && _lat2"

(click)="_getDistanceFromLatLonInKm()"

 mat-raised-button color="primary">GetDistance</button>

{{byroaddistance}} , {{byroadtime}} , {{withoutroaddistance}}

<div *ngIf="_lat1 && _lat2">

<agm-map [latitude]="_lat1" [longitude]="_lon1" [scrollwheel]="true" [zoom]="4">

<agm-marker [latitude]="_lat1" [longitude]="_lon1" [label]="fromaddress">

</agm-marker>

<agm-marker [latitude]="_lat2" [longitude]="_lon2" [label]="toaddress">

</agm-marker>

</agm-map>

</div>

<br>

</div>

HTML of an AGM-map in angular please follow this link.
http://gauravlambha.blogspot.in/2017/09/google-map-in-angular-js-2.html


This is looking like this

Trusted video URL in iFrame in angular.

The following template allows users to enter a YouTube video ID and load the corresponding video in an.<iframe> The attribute<iframe src> is a resource URL security context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users could execute. So call a method on the controller to construct a trusted video URL, which causes Angular to allow binding into <iframe src>.


Html:

<h4>Resource URL:</h4> <p>Showing: {{dangerousVideoUrl}}</p> <p>Trusted:</p> <iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="videoUrl"></iframe> <p>Untrusted:</p> <iframe class="e2e-iframe-untrusted-src" width="640" height="390" [src]="dangerousVideoUrl"></iframe>

Component:

import { Component } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser';

@Component({

selector: 'app-iframe,

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [HttpfileService]

})

export class IframeComponent {

dangerousVideoUrl: string;

videoUrl: any;

constructor( private sanitizer: DomSanitizer ) {

this.vidiourl('t2ByLmLnYJ8');

}

vidiourl(id) {

this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;

this.videoUrl =

this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);

}

}