I want to render ion-checkbox dynamically in my html page. I tried using below:
In .ts file:
sanitizeLetterBody = (letterBody): string => {
let replaceText = "<ion-item><ion-label><b>Read and approved with initials below. </b></ion-label><ion-checkbox class='letter-initials'></ion-checkbox></ion-item>";
return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
}
In .html file:
<ion-row>
<ion-col class="padding-top-10 padding-left-0 padding-right-0 padding-bottom-0">
<div class="letter-body white-space-pre-line" [innerHTML]="customLetterData.LetterBody | safeHtml:'html'"></div>
</ion-col>
</ion-row>
But, the checkbox did not render in the html page like below:
Then i tried using <input type='checkbox'> like below:
sanitizeLetterBody = (letterBody): string => {
let replaceText = " <input type='checkbox' class='check-pat-initials' name='test'><b>Read and approved with initials below.</b> ";
return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
}
The checkbox is rendered nicely but i can't check or un-check the checkbox. May be no events are binding in this fashion.
Why can't i check or un-check the checkbox which are rendered dynamically?
Is there any different approach to achieve this?
Related
How can I get first active image in ionic from restful service?
Explanation: I am trying to create Infinite Scrolling Photo in ionic and I need first image to have a class="first". Using let i = index how can I achieve this?
What I tried:
<div class="photobanner" *ngFor="let slideImage of items; let i = index">
<img class="first" src='{{slideImage[i].img}}' />
<img src='{{slideImage[i+1].img}}'>
</div>
You can do that with css. You select the first img child of the div photobanner
.photobanner > img:first-child {
//do what you want
}
Other solution, you can find here how to add condition in ngFor.
stackoverflow.com/questions/42931735/apply-a-condition-using-ngfor-and-ngif-in-angular
I want to be able to simply and reliable select these two alert buttons for e2e testing with protractor.
I can't use by.partialButtonText since the text is inside a span element.
<button type="button" class="alert-button ion-focusable ion-activatable sc-ion-alert-md" tabindex="0">
<span class="alert-button-inner sc-ion-alert-md">Yes</span>
<ion-ripple-effect class="sc-ion-alert-md md hydrated" role="presentation"></ion-ripple-effect>
</button>
<button type="button" class="alert-button ion-focusable ion-activatable sc-ion-alert-md" tabindex="0">
<span class="alert-button-inner sc-ion-alert-md">No</span>
<ion-ripple-effect class="sc-ion-alert-md md hydrated" role="presentation"></ion-ripple-effect>
</button>
Are they always displayed in that particular order in the DOM?
If that is the case, you could try the following:
const yesButton = element.all(by.css('.alert-button-inner.sc-ion-alert-md')).get(0);
const noButton = element.all(by.css('.alert-button-inner.sc-ion-alert-md')).get(1);
Those will get the <span> element.
Additionally, you could try to locate them more precisely with the following method:
const yesButton = element(by.cssContainingText('.alert-button-inner.sc-ion-alert-md', 'Yes'));
const noButton = element(by.cssContainingText('.alert-button-inner.sc-ion-alert-md', 'No'));
I am working on the Ionic Project and it that I have the contact page which is fetching the details from the API. I want to apply the hyperlink according to the details fetched like if it is a mobile number then tel is applied and for the email mailto is applied.
This is my contact.html:
<ion-content padding overflow-scroll="true">
<ion-grid align-items-center justify-content-center>
<ion-row align-items-center justify-content-center>
<ion-col class="mycol22" col-12 *ngFor="let contdetails of this.detailscontact">
<h3 class="myneh31">{{contdetails?.sub_head}}</h3>
<hr />
<p class="newmyp2">{{contdetails?.sub_content_first}}</p>
<a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_second}}</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The problem is that, How to decide whether to apply tel or mailto depending on the value fetched. This is my output according to the details fetched from the API. Now, I want to apply hyperlink depending upon the details fetched from the API. For Email: mailto will apply and for Mobile Number: tel will be applied.
Any help is much appreciated.
First you have to check if data is email type or not. Use this function as a email validator.
emailValidator(email:string): boolean {
var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!EMAIL_REGEXP.test(email)) {
return false;
}
return true;
}
And in your html page
To make yourself easy you can return string from emailValidator function:
emailValidator(email:string): string {
var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!EMAIL_REGEXP.test(email)) {
return 'mailto';
}
return 'tel';
}
and in HTML you can use
*ngIf should come handy:
... // or any boolean as condition
... // or any other condition
Im using algolia to perform a search on my website, but I realized one thing. Im using search box generator to customized my search input field. However the problems occur, when I try to apply autocomplete.js on my search input field
Initially, it looks like the one below,
but when I apply the autocomplete feature it will look like this
Code - HTML
<form id="search" novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google" style="margin-top: 7px;">
<div role="search" class="sbx-google__wrapper">
<input type="search" id="search_input" name="search" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input">
<button type="submit" title="Submit your search query." class="sbx-google__submit">
<svg role="img" aria-label="Search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" title="Clear the search query." class="sbx-google__reset">
<svg role="img" aria-label="Reset">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
</svg>
</button>
</div>
</form>
Code - JAVASCRIPT
autocomplete('#search_input',
{ hint: false }, {
source: autocomplete.sources.hits(index, {hitsPerPage: 5}),
//value to be displayed in input control after user's suggestion selection
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
console.log(suggestion)
return '<span>' +
suggestion._highlightResult.title.value + '</span>';
}
}
});
The custom search box is advised by algolia themselves, on the autocomplete documentation. I have no idea on how to solve this problem, seems like the js script overwrite the css styling. This only happen if I passed in the #search_input in the autocomplete function
Here is the js fiddle https://jsfiddle.net/Ldpqhkam/
Algolia autocomplete adds a span around the input and that's what breaks the design. It has inline style changing the display, you can override it to fix the design.
.algolia-autocomplete {
display: inline !important;
}
I have a slider gallery it contains links below the image. I want to
show a popup box with a form and the name of the image to be auto
selected in the popup form.
I have done till this
the popup box is appearing on the link clicked. I have also set the
link with value like this :
<a href="#?id=1" data-reveal-id="myModal" data-animation="fade" >Make an enquiry</a>
This is the code through which i am fetching the value of the link
<?php
if (isset($_GET['id'])){
if($_GET['id']=='1')
echo '<td><input type="text" name="product" style="width:200px; height:30px; !important" value="Testvalue"></td></tr>';
}
else{
echo '<td><input type="text" name="product" style="width:200px; height:30px; !important" ></td></tr>';
}
?>
But I am getting a blank textbox .. Where am I going wrong ???
It should be