About InAppBrowser

Ionic Framework ionic-v3
1

I’m working on a directive who display some content sent by a wysiwyg, so with links inside

I’ve tried to using InAppBrowser

import { Component, ElementRef, Input, AfterViewChecked } from '@angular/core';

import { InAppBrowser } from 'ionic-native';

@Component({
  selector: 'wysiwyg-html',
  template: '<div [innerHTML]="content"></div>',
  providers: [ InAppBrowser ]
})
export class WysiwygHtml implements AfterViewChecked {
    private elem: HTMLElement;

    constructor(
        private inAppBrowser: InAppBrowser,
        private el: ElementRef
    ) {
        this.elem = el.nativeElement;
    }

    @Input('content') content: string;

    ngAfterViewChecked() {
        const links = this.elem.querySelectorAll('a[href]');

        [].forEach.call(links, link => link.onclick = (event) => {
            event.preventDefault();

            const target: HTMLLinkElement = event.target;

            this.inAppBrowser.open(target.href, '_system', 'location=true');
        });
    }
}

But during the build i get TypeScript error: /app/components/wysiwyg-html/wysiwyg-html.ts(30,31): Error TS2339: Property 'open' does not exist on type 'InAppBrowser'.

How is it possible, if i replace this.inAppBrowser with InAppBrowser directly, it doesn’t trigger the error.

2

Maybe the open method is static?

3

i’ve had to do this still

window.open(target.href, '_system', 'location=yes');

4

After some search, it seem that you doesn’t have to instanciate InAppBrowser, and have to call it “as is”
InAppBrowser.open(target.href, '_system', 'location=true');

5

The syntax for Ionic 2 Native InAppBrowser is here:

1 Like