CODEWITHSUNDEEP
javascriptangularwhatsapp
Anurag Ranjan
Anurag Ranjan

Reputation: 169

facing problem in data binding while sharing content on whats-app through mobile browser

I am working on Angular application where I am sharing content on watsapp app , through mobile's browser .. content is shared on mobile whatsapp app easily

but when I am trying to bind data to it via interpolation , data is not shared

I am sharing code below ->

ts 

  team1 : any  = 'India';
  team2 : any  = 'japan';

html 

<a 
href="whatsapp://send?text=" 
title="Share On Whatsapp" 
onclick="window.open('whatsapp://send?text=%20{{team1}}%20vs%20{{team2}}%20Take%20a%20look%20at%20this%20awesome%20page%20-%20' 
+ encodeURIComponent(document.URL)); return false;">
whatsapp share
</a>

Issue -> onclick method doesn't support Interpolation due to security reasons So How I can solve this issue

Upvotes: 1

Views: 139

Answers (1)

Victor Rodniansky
Victor Rodniansky

Reputation: 513

Please try this:

<a 
href="whatsapp://send?text=" 
title="Share On Whatsapp" 
onclick="window.open('whatsapp://send?text=%20' + team1 +'%20vs%20' + team2 + '%20Take%20a%20look%20at%20this%20awesome%20page%20-%20' 
+ encodeURIComponent(document.URL)); return false;">
whatsapp share
</a>

You don't need the double-curly braces ,because you are passing the variables. Or you could prepare your string in typescript.

private whatsupUrl : string;
this.whatsupUrl = `whatsapp://send?text=%20${this.team1}%20vs%20${this.team2}%20Take%20a%20look%20at%20this%20awesome%20page%20-%20`;
<a 
href="whatsapp://send?text=" 
title="Share On Whatsapp" 
onclick="window.open(whatsupUrl + encodeURIComponent(document.URL)); return false;">
whatsapp share
</a>

Upvotes: 1

Related Questions