# webviews
> 
Latest version **1.0.1** (published 2017-06-28) · 0 weekly downloads
## Install
```sh
npm install webviews
pnpm add webviews
yarn add webviews
bun add webviews
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-06-28 |
| First published | 2017-06-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | adamhalasz |
## Links
- npm: https://www.npmjs.com/package/webviews
- npm.io page: https://npm.io/package/webviews
## Dependencies (3)
- [color](https://npm.io/package/color.md) ^1.0.3
- [handlebars](https://npm.io/package/handlebars.md) ^4.0.10
- [nativescript-webview-interface](https://npm.io/package/nativescript-webview-interface.md) ^1.4.1
## Recent versions
- 1.0.1 (latest) — 2017-06-28
- 1.0.0 — 2017-06-24
- 0.0.0 — 2017-06-24
## README
# WebViews
An Angular2 NativeScript WebView Module that works on iOS and Android as well.
## Requirements
- NativeScript 3.0.1
- Angular 2+
- Typescript 2.2.2
## Features
- Template Bindings with Handlebars
- Bi Directional communication between the WebView and the Parent NativeScript Component
- Works on real iOS Devices as well not just the emulator
## Install
```
npm install webviews --save
```
or:
```
tns plugin add webviews
```
# Usage
```ts
// ~/myProject/app/MyComponent/MyComponent.component.ts
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { WebViews } from 'webviews';
@Component({
template: `
`
})
export class MyComponent implements OnInit, OnDestroy {
// Get an Element Reference to a WebView Directive
@ViewChild('webView') WebViewElement: ElementRef;
// Variable for the WebView Service Instance
webview: any;
ngOnInit(): void {
// Create WebView Service Instance
this.webview = new WebView(this.webViewElement, 'www', 'index.html')
// Set context paramaeter
this.webview.set('name', 'John Doe');
// Load WebView Template
this.webview.load().then(() => {
this.webview.interface.emit('init', 'hello from the parent')
this.webview.interface.on('message', (message) => {
alert(message);
})
})
}
ngOnDestroy(): void {
this.webview.dispatch();
}
}
```
```html
Hello {{name}}!
```
# API
## WebView Class
### var webViewInstance = new WebViews(webViewElementRef: any, folder: any, file: any)
- **webViewElementRef**: An ElementRef object from @ViewChild
- **folder**: The folder name where the html file is located
- **file**: The name of the html file to load within the folder
## WebView Instance Parameters
### webview.interface
An Object that containing methods that allow bi-directional communication between the Web View and the nativescript parent.
#### webview.interface.on(eventName: string, callback: Function): void
Listen on events
- **eventName**: The event name to listen to
- **eventData**: A callback function that gets called when it is emitted
#### webview.interface.emit(eventName: string, eventData: any): void
- **eventName**: The event name to listen to
- **eventData**: Data to send to the listener callback
## WebView Instance Methods
### webview.set(key: string, value: any): void
Set context parameter
- **key**: The context parameter name
- **value**: The context parameter value
Usage in TypeScript:
```ts
// in ts
webview.set('name', 'John Doe')
```
HTML File:
```html
Hello {{name}}
```
Will Become:
```html
Hello John Doe
```
### webview.load(initialContext?: any): Promise
Load the HTML File.
- **initialContext**: An object that sets context parameters.
### webview.addScript(folderName: string, fileName: string, params?: any): Promise
Attach a Script
- **folderName**: The folder name where the script is located
- **fileName**: The script file name to load within the folder
- **params**: An array of key-value objects for settings parameters on the script tag
### webview.addStyle(folderName: string, fileName: string, params?: any): Promise
Attach a Stylesheet
- **folderName**: The folder name where the stylesheet is located
- **fileName**: The stylesheet file to load within the folder
### webview.dispatch(): void
Dispatch Event Listeners. This method should be called within `ngOnDestroy` event in a component.
# License
MIT License
Copyright (c) 2017 Adam Halasz mail@adamhalasz.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
---
_Source: https://npm.io/package/webviews · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._