CODEWITHSUNDEEP
ionic4capacitor
Florian
Florian

Reputation: 43

How to use the Capacitor Browser API

I am currently porting my project to Ionic 4 and wanted to replace the Cordova InAppBrowser with the Capacitor browser but with little success so far... This is my page:

import { Component, OnInit } from '@angular/core';
import {Plugins} from '@capacitor/core';
const { Browser } = Plugins;

@Component({
  selector: 'app-srd',
  templateUrl: './srd.page.html',
  styleUrls: ['./srd.page.scss'],
})
export class SrdPage implements OnInit {

constructor() {
}

async ngOnInit() {
    const url = 'http://capacitor.ionicframework.com/';
    await Browser.open({'url': url});
}
}

There is no console output and the page stays blank. Any ideas what went wrong?

Upvotes: 1

Views: 8867

Answers (3)

Dulendra Singh
Dulendra Singh

Reputation: 211

import { Browser } from '@capacitor/browser';

async openLink(Url){
   await Browser.open({ url: Url });
 }

Upvotes: 0

Joseph Adu
Joseph Adu

Reputation: 119

const url = 'http://capacitor.ionicframework.com/';
await Browser.open({url: url});

Upvotes: -1

Olusegun Gilles
Olusegun Gilles

Reputation: 166

This should work. Remove the quote around the first url:

import { Component, OnInit } from '@angular/core';
import {Plugins} from '@capacitor/core';
const { Browser } = Plugins;

@Component({
  selector: 'app-srd',
  templateUrl: './srd.page.html',
  styleUrls: ['./srd.page.scss'],
})
export class SrdPage implements OnInit {

  constructor() {
  }

  async ngOnInit() {
    const url = 'http://capacitor.ionicframework.com/';
    await Browser.open({'url': url});
  }
}

Upvotes: 3

Related Questions