I want to take the values from database such as name,email and photo for a particular user and when he clicks the view button the same details should be seen in popup can i achieve in ionic2..
Any help will be appreciated..
You cannot do it using Alert component.If you need to do that then you have to use page component.On page component where you can show your images and all other db fetched stuff.
.html
<ion-content padding>
<img src="{{imageUrl}}" alt="image">
</ion-content>
.ts
this.imageUrl = imageUrl;
Related
I'm working on a form. One of the fields must ask the user to choose an image from a selection. I would like to achieve a similar result.
So I thought of an <ion-select> which would have a corresponding <ion-select-option> for each image, like this
<ion-item>
<ion-label>Images</ion-label>
<ion-select>
<ion-select-option>
<ion-img value="image1" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
<ion-select-option>
<ion-img value="image2" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
</ion-select>
</ion-item>
but I get the following result.
The problem is that the images are not displayed and that the ion-select dialog box is not very suitable for image selection. So I don't know if another ionic component would do a better job or if I should choose a non-ionic solution...
It is not possible to add images in ion-select-option but you can achieve the same thing by your own by :
create a page and make normal ion-list with a ngfor and inside
each item put an image and before it a radio button for single
choice or checkbox for multichoice.
open this page as modal and give this modal custom css in golobsl
.scss file as normal select alert like (width:450px;height:350px;).
when you open the modal send array that will contain images or
api link to requested when modal opens.
get the props of modal that is sent with it with navParams and
but that you will get what you wanted exactly.
And for any more info write a comment and will be with you anytime.
The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?
the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<!-- navigation button-->
<ion-menu-button></ion-menu-button>
<!-- optional back button-->
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ pageTitle | translate}}
</ion-title>
</ion-toolbar>
</ion-header>
In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?
I used
this.navCtrl.navigateForward('/term/' + term);
to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?
If there is no page in Stack then
<ion-back-button></ion-back-button>
will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.
<ion-back-button defaultHref="logout"></ion-back-button>
you need to be learned from here
https://ionicframework.com/docs/api/back-button
It will not visible if there will be no previous overlay/page to show
So you can set css
ion-back-button {
display: block;
}
Then add click event on element
<ion-back-button (click)="close()">
<ion-icon name="close"></ion-icon>
</ion-back-button>
Add on .ts file
click() {
this.modalCtrl.dismiss();
}
For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear
Is it root page? if so ion-back-button will not show up.
Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.
So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.
But still when clicking not loading to the href.
Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).
<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>
Added the Router Object to the constructor of this component
constructor(public router: Router) { }
If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.
Just need to add the color in scss file to show up.
ion-back-button{
--color: black;
}
And also don't forget to indicate the href, adding it html file
<ion-buttons slot="start">
<ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.
My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.
Changing
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>
To
<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...
fixed my issue.
I want to use scrollToTop in my ionic project . In my code scrollToTop working but i am want to show button when scroll the content in ionic . How to show sticky button in ionic please help me...
In images my button show at end want to show at middle and show when i am scrolling..
tab1.page.html
<ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">
<button class="scroll" (click)="ScrollToTop()">
<ion-icon name="arrow-dropup-circle"></ion-icon>
</button>
</ion-content>
tab1.page.ts
ScrollToTop(){
this.content.scrollToTop(1500);
}
For the "when I'm scrolling", you can detect if your heart icon is visible in your scroll-able card with something like:
How to Check if element is visible after scrolling?
I would like to have the "ion-android-sync" icon (http://ionicons.com)
My current code is
<button class="button" ng-click="loadEvents()">L</button>
What's the proper class structure for that?
Also, if I just load the css file advertised on ionicons.com is enough?
you can use ion-icon element to use ionic icons inside button.
I hope it will reach your requirement
for example, i will add facebook logo inside button
<button class="button" ng-click="loadEvents()"><ion-icon name="logo-facebook"></ion-icon></button>
I'm working on a site, where I have 3 images of an item displayed, but there are can be more than 3 images of an item. I want to use fancybox to display them, but I couldn't figure out how it could be done.
I know how to create a gallery "manually", but I don't know how to add images manually to an existing gallery which is identified by a class.
Thanks.
It doesn't look like there are any methods in Fancybox for programatically adding an image to a gallery. Perhaps you could contact the author and request it, or you could modify the script.
You will need to recreate the fancybox gallery each time you add a new image. As simshaun said, there is no method for adding new images to an existing fancybox gallery.
From the Fancybox example page, you need to have the same ref parameter on each image in order to create the gallery.
<div style="display: none;"> <a class="fancybox-effects-c"
href="images/test.jpg" data-fancybox-group="groupname" ><img
src="test.jpg" alt="" /></a> </div>
This should work as the image will be there and added to the fancybox but just not shown.