In angular 4how to use tel: in a *ngHref - javascript

I am using angular 4 and in template (.html), I coded as
<a *ngHref="tel:{{orders.billing_address.telephone}}"> <span> Call : </span>
It throws an error as
Can't bind to 'href' since it isn't a known native property a
I search it and get angular 4 use [routerLink]. But I don't know how to use [routerLink] to set tel: numbers. Could you please guide me.

Just href inside []. It will let you to remove {{}} part. And if you want to concatenate strings inside, you need to create a string like 'tel:' + otherParts
<a [href]="'tel:' + orders.billing_address.telephone"> <span> Call : </span>

use the [href] in angular 2
<a [href]="'tel:'+ orders.billing_address.telephone"> <span> Call : </span>

Related

How to read the html tags innerHTML value using css selector or xpath.?

My actual query is, I want to retrieve the HTML inner text value using css selector or xpath. I am able to acheive this by using document.getElementById but not using selectors, instead I can only able to print the tag element but not the text from it.
For Ex:
<li class="active">
<span id="lastPrice">1,603.35</span>
<span id="CAToday"></span><br>
<span class="up" id="change">28.80</span>
</li>
From the above HTML, I want to print 1,603.35 using either
Css or
xpath
Note: I have drilled the forum already but couldn't able to find required solution.
This XPath expression
string(/li/span[#id='lastPrice'])
With this well-formed XML
<li class="active">
<span id="lastPrice">1,603.35</span>
<span id="CAToday"></span><br/>
<span class="up" id="change">28.80</span>
</li>
Result
1,603.35
Check in http://www.utilities-online.info/xpath/?save=07d6e884-4f7e-46cc-9aaf-904e6a440f50-xpath
You should be able to use the XPath version 2 matches function:
//div[matches(text(), 'Hello ?\w+ What would you like to do today \w+')]
which does allow regular expressions.
Java Selenium (xpath example):
driver.findElement(By.xpath("//span[#id='lastPrice']").getAttribute("innerText")
Python Selenium (CSS example):
driver.find_element_by_css_selector("span#lastPrice").get_attribute("innerText")

VueJS 2 conditional rendering in value binding

I simply try to let VueJS 2 render a inline condition while I add a value to an dom element. I know, that it is possible to use v-if to let elements appear or disappear based on conditions, but how can I use a inline-condition?
I will give an example. The following html describe my idea and I know that this lines generates an error. Both <span> elements are controlled by conditions which lets them appear or not and this works fine.
Now, I try to bind a value to the href attribute depending on a condition (which are in the parentheses for example).
<div id="vuemain">
<span v-if="diced < 6">Looser</span>
<span v-if="diced == 6">Winner</span>
<a :href="'https://link-to-whatever.com/'+{diced==6 : 'winner', diced<6 : 'looser'} ">LINK</a>
</div>
So after rendering by VueJS the <a> tag should be like:
<a href="https://link-to-whatever.com/winner"> <!-- If diced == 6 -->
OR
<a href="https://link-to-whatever.com/looser"> <!-- If diced < 6 -->
Do you understand what my problem is and is that somehow possible?
Many thanks in advance
Allan
This should work.
<a :href="'https://link-to-whatever.com/'+ (diced==6 ? 'winner' : 'looser')">LINK</a>
It looks like you were trying to use the object syntax, which won't really work in this case. Instead, just use the ternary above.

How to get a "data-value” attribute updated in angular 2

Got a data-attribute bound to an Angular2 variable. That works fine. But a method might change the value, which is MOSTLY not reflected in the data-attribute. Any idea how to solve this? Here a simplified example:
<span (click)="addMoney(item)">
<i class="money inline icon right" attr.data-content="Click amount to donate ${{item.step}}"></i>
</span>
So, in this example, assume that addMoney() can change "item.step".
Thanks in advance for any help.
Just wrap attr.data-content in square brackets and string value in single quotes like below and remove curly brackets.
<span (click)="addMoney(item)">
<i class="money inline icon right"
[data-content]="'Click amount to donate ' + item.step"></i>
</span>

How to add value of two different binding variable like ${amount} and ${tax} in jquery ajax template?

I want to add two or more values of variables(which hold some value from XML file) inside jquery Ajax template.
I am trying to do like ${amount}+${tax} then as result i am getting two number like 1000 + 140 instead of 1140.
<div class="netAmount"> <span onclick="dos(${callAmt})" class="${callAmt}">Net Fare
</span> <span onclick="dos(${callAmt})" class="${callAmt} hideFare">${amount} + ${tax}
</span> </div>
Please help to solve this stuff.
Any advice and help appreciable
Regards
You should use ${amount+tax} instead, if your variable are not integers you should parse them so you could use ${parseInt(amount)+parseInt(tax)}.

Substring html tag using Javascript

I want to sub string and remove the , which appears within the span tag and display the name alone. Below are the two cases which needs to work.
Case1: <span class="datatableheader">No results found, </span>
Case2: <span class="datatableheader">Jude Gomes, </span>
A single function should help in removing the , in both cases and display the result as
<span class="datatableheader">No results found </span>
<span class="datatableheader">Jude Gomes </span>
Appreciate for any help.
Thanks
$(".datatableheader").html ($(".datatableheader").html().replace(",",""));
It's not widely recognized that .html accepts a callback function:
$('.datatableheader').html(function(i,old) {
return old.replace(/, ?/g, '');
});​
http://jsfiddle.net/3fBY4/1/
you can try this also
var parts = id.split(':'); //because u have case1: or case2:
// it will split into string in array//
$('#parts[1]').replace(",",""));
//try to print that it will work
nice question.

Categories