NativeScript Angular

Web View

The WebView component is used to display web content within your application. You use the control by providing a src attribute that accepts a URL,a path to a local HTML file or directly HTML string.

Image

Usage

<WebView [src]="webViewSrc" 
         (loadStarted)="onLoadStarted($event)" 
         (loadFinished)="onLoadFinished($event)">
</WebView>
import { Component } from "@angular/core";
import { WebView, LoadEventData } from "tns-core-modules/ui/web-view";

@Component({
    moduleId: module.id,
    templateUrl: "./usage.component.html"
})
export class UsageComponent {
    webViewSrc = "https://docs.nativescript.org/";

    onLoadStarted(args: LoadEventData) {
        const webView = args.object as WebView;

        if (!args.error) {
            console.log("Load Start");
            console.log(`EventName: ${args.eventName}`);
            console.log(`NavigationType: ${args.navigationType}`);
            console.log(`Url: ${args.url}`);
        } else {
            console.log(`EventName: ${args.eventName}`);
            console.log(`Error: ${args.error}`);
        }
    }

    onLoadFinished(args: LoadEventData) {
        const webView = args.object as WebView;

        if (!args.error) {
            console.log("Load Finished");
            console.log(`EventName: ${args.eventName}`);
            console.log(`NavigationType: ${args.navigationType}`);
            console.log(`Url: ${args.url}`);
        } else {
            console.log(`EventName: ${args.eventName}`);
            console.log(`Error: ${args.error}`);
        }
    }
}

In the above samples, we are setting up loadStarted and loadFinished events. Both events will be emitted when there is a change the source for the WebView component (change the URL or load local HTML file). The loadStarted event will be executed when the WebView source start loading and loadFinished will be fired when the source is already loaded. The events will return info of type LoadEventData.

Improve this document

Demo Source


Tips And Tricks

Gestures in WebView

<GridLayout rows="50 50 *">
    <Label row="0" #touchlabel [text]="touchResult" textWrap="true" ></Label>
    <Label row="1" #panlabel [text]="panResult" textWrap="true" ></Label>
    <WebView row="2" (loaded)="onWebViewLoaded($event)"  (touch)="webViewTouch($event)" (pan)="webViewPan($event)" [src]="webViewSrc" ></WebView>
</GridLayout>
import { Component } from "@angular/core";
import { isAndroid } from "tns-core-modules/platform";

@Component({
    moduleId: module.id,
    templateUrl: "./tips-and-tricks.component.html"
})
export class TipsAndTricksComponent {
    webViewSrc = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
    touchResult = "Touch: x: _ y: _";
    panResult = "Pan: deltaX: _ deltaY: _";

    onWebViewLoaded(webargs) {
        const webview = webargs.object;
        if (isAndroid) {
            // Disabled the native zoom control (to enable gestures on Android)
            webview.android.getSettings().setDisplayZoomControls(false);
        }
    }

    webViewTouch(args) {
        this.touchResult = `Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`;
        console.log(`Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`);
    }

    webViewPan(args) {
        this.panResult = `Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`;
        console.log(`Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`);
    }
}

Note: To be able to use gestures in WebView component on Android, we should first disabled the zoom control. To do that we could access the android property and with the help of setDisplayZoomControls to set this control to false.

Using HTML file & strings

Improve this document

Demo Source


Properties

Name Type Description
src string Gets or sets the url, local file path or HTML string.

Methods

Name Returns Description
reload void Reloads the WebView forcing updating of the content.

Events

Name Description
loadStarted Emitted when the content is starting to load.
loadFinished Emitted when the content loading is over.

API References

Name Type
tns-core-modules/ui/web-view) Module
WebView Class
LoadEventData Interface
NavigationType type aliases

Native Component

Android iOS
android.webkit.WebView WKWebView