Template parse errors In App Browser IONIC 3

Question

I have been working on a project which need to open site inside the app. So, i'm used Cordova InAppBrowse for ionic 3. Problem is, i'm getting error showing parse errors.

On index.html

<div style="text-align: center;">

  <button ion-button type="button" (click)="open('https://coins4ar.com/{{coinsGroup.symbol}}/')">More Info
</button>
  </div>

On index.ts

import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-index',
  templateUrl: 'index.html'
})
export class IndexPage {
  constructor(public navCtrl: NavController, public navParams: NavParams, private iab: InAppBrowser,
    private data: DataProvider, public http: HttpClient) {
  }

coinsGroup = [];


ionViewDidLoad() {

    this.coinsGroup = this.navParams.data;  

  }
open(url:string) {  
    let browser = this.iab.create(url,'_blank', 'location=yes');
    browser.show();
  }

}

I'm getting error

VM66652 vendor.js:100970 Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 27 in [open('https://coins4ar.com/{{coinsGroup.symbol}}/')] in ng:///AppModule/IndexPage.html@190:39 ("
    -->

      <button ion-button type="button" [ERROR ->](click)="open('https://coins4ar.com/{{coinsGroup.symbol}}/')">More Info</button>
  </div>

"): ng:///AppModule/IndexPage.html@190:39
    at syntaxError (VM64228 vendor.js:100970)
    at TemplateParser.parse (VM64228 vendor.js:125153)
    at JitCompiler._parseTemplate (VM64228 vendor.js:135106)
    at JitCompiler._compileTemplate (VM64228 vendor.js:135081)
    at VM64228 vendor.js:134982
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (VM64228 vendor.js:134982)
    at VM64228 vendor.js:134852
    at Object.then (VM64228 vendor.js:100959)
    at JitCompiler._compileModuleAndComponents (VM64228 vendor.js:134851)

It is working fine when used Anchor Tag, but it will Launch Website outside the application.

Answer 1

I believe your issue is in this line

(click)="open('https://coins4ar.com/{{coinsGroup.symbol}}/')"

and you need to change it to

(click)="open('https://coins4ar.com/'+coinsGroup.symbol+/')" 

You can find working sample solution here https://stackblitz.com/edit/angular-qp3xhw

Update

or if you have access to coinsGroup in your ts file do this

(click)="openLink()"

and in your ts file

openLink() {
  const url = `https://coins4ar.com/${this.coinsGroup.symbol}/`;
  ... open page from here
}