[ionic] 버튼 클릭 시 web 띄우기

[home.page.html]

<ion-header>
  <ion-toolbar>
    <ion-title>
      open_page
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="openWebpage()">open_page</ion-button>
</ion-content>

[home.page.ts]

import { Component } from '@angular/core';
import {InAppBrowser, InAppBrowserOptions} from '@ionic-native/in-app-browser/ngx'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private iab: InAppBrowser,) {}
  
  openWebpage(){
    const url = 'https://www.google.co.kr/';
    const options: InAppBrowserOptions = {
      zoom: 'yes'
    }
    //opening a URL and returning an InAppBrowserObject
    const browser = this.iab.create(url,'_self',options);
  }
}

 

[app.module.ts]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
//in-app-browser import
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    InAppBrowser, //add
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

[결과]

 

 

open_page라는 파란 버튼을 클릭하면

 

 

구글 사이트가 나타난다.

 

* 혹시 버튼을 클릭하지 않고 바로 웹사이트를 띄울 수 있는 방법을 아시는 분은 댓글 부탁드려요!!


※ 제 글이 도움이 되었다면 공감 부탁드려요 :)