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
Related
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
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?
https://i.stack.imgur.com/NnhMY.png
https://i.stack.imgur.com/NIYZm.png
I took this from a site and I'm trying to have one like this only on the right side of my page. In my page i have a header,footer and in the content area i have this ion slide box where the images will be sliding one after the other. so i want a right carousel like in the second image link..
According to the Ionic Docs you can. The ion-slide-boxelement comes with the $ionicSlideBoxDelegate service that provides helper methods to control the slides.One of these helper functions on the service is next(). this allows you to go to next slide on a button click event.All you need to do is position your button as required and use the code as below(slightly modified from documentation).
USAGE:
//Your view
<ion-view>
<ion-slide-box>
<ion-slide>
<div class="box blue">
Slide 1
</div>
</ion-slide>
<ion-slide>
<div class="box red">
Slide 2!
</div>
</ion-slide>
</ion-slide-box>
//Your button
<button ng-click="nextSlide()" class = "button-icon ion-chevron-right"></button>
</ion-view>
//In your controller
function MyCtrl($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
}
I am trying to get a wrapper element around an image including its caption in the single view in tt_news for Typo3 6.1. How would I do that?
So far I only figured out how to do that for either all images
plugin.tt_news.displaySingle.imageWrapIfAny = ...
or the caption itself
plugin.tt_news.displaySingle.caption_stdWrap.dataWrap = ...
. But I have no clue how to create a wrapper for each single image including its caption...
Thanks in advance!
I know this is quite old, but as a follow-up that works in TYPO3 6.x you can use:
displaySingle.image.wrap = <div class="news-img">|
displaySingle.caption_stdWrap >
displaySingle.caption_stdWrap.wrap = <p class="news-single-imgcaption">|</p></div>
So each image and caption gets wrapped by <div class="news-img">...</div>
The following HTML will be provided by the below TS:
<div class="newsImage">
<div class="imageHolder">
<img />
</div>
<div class="captionHolder">
Caption
</div>
</div>
TypoScript:
displaySingle {
imageWrapIfAny = <div class="newsImage">|</div>
image {
file.maxW >
file.maxH >
file.width = 220
stdWrap.wrap = <div class="imageHolder">|</div>
altText.field = imagealttext
}
caption_stdWrap >
caption_stdWrap.wrap = <div class="captionHolder">|</div>
}