CODEWITHSUNDEEP
angularionic-framework
Abdul Hanan Asif
Abdul Hanan Asif

Reputation: 97

onclick is supposed to open a webpage in angular ionic but it doesnot works

i'm adding in app browser to angular ionic project. i've created a tabs project. In the tab 1 i'm showing the a button on which we click and a new page has to open on web. here is the code for tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-button click="open()">Click here!</ion-button>   <--------error here
  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

and for tab1.module.ts the code is here

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

import { Tab1PageRoutingModule } from './tab1-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {
  constructor(private iab: InAppBrowser) {}
   
  open(){
    const browser = this.iab.create('https://ionicframework.com/');
  browser.on('loadstart').subscribe(event => {
  });
  browser.on('exit').subscribe(event => {
    browser.close();
  });
  }
}

I just want to open the link I provided on clicking the button but it's not working

Upvotes: 0

Views: 1233

Answers (1)

Super_Simon
Super_Simon

Reputation: 1296

You need to wrap your click action to bind it to the function you are calling.

Try this:

<ion-button (click)="open()">Click here!</ion-button>

You've also added your method to the tab1.module.ts file which is incorrect.

Move your open() function and imports to the tab1.page.ts file and try it again.

Upvotes: 1

Related Questions