I want to show the ionic date picker when I click string. But instead of that date picker is showing in the page without clicking anything
here is the stackBlitz
here is my code :
<ion-datetime placeholder="pick the date"></ion-datetime>
in TS file I just use above code. I wanted to see the date picker when i click the "pick the date " string
You could wrap an ion-input or ion-button in ion-datetime.
something like that:
<!-- Datetime in overlay -->
<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal trigger="open-modal">
<ng-template>
<ion-content>
<ion-datetime></ion-datetime>
</ion-content>
</ng-template>
</ion-modal>
more in the documentation:
https://ionicframework.com/docs/api/datetime
Related
Is it possible to render regular HTML code in ionic? The reason behind is i want to render a chart, that is generated by a python code (Using Altair)
Thanks.
You can render regular html in ionic.
Let's assume you want to render the chart into an ion-item
The code goes something like this
<ion-list>
<ion-item>
<!-- Some code, you may use *ngFor to display the entire data -->
Example: <div class="exClass"><!-- May be a table -->{{ someData }}</div>
</ion-item>
</ion-list>
I'm using IONIC framework for create an APP, but I have a little issue whit a "datetime" component the values are showed in two lines.
<ion-list-header>
<ion-label>Datos de nacimiento</ion-label>
</ion-list-header>
<ion-list>
<ion-label>Fecha de Nacimiento:</ion-label>
<ion-datetime value="{{fechaNaci | date: 'yyyy-MM-dd'}}" display-format="YYYY MMMM DD"></ion-datetime>
</ion-list>
</ion-content>```
I expect the output should be displayed on the yellow rectangle instead of green one:
[enter image description here][1]
[1]: https://i.stack.imgur.com/RLVr6.jpg
Hi I was checing the documentation about ionic and I found my issue I forget add and ion-item between ion-list and my ion-label something very simple.
I am using ionic toggle, and below is the simple code:
<ion-item>
<ion-label>test</ion-label>
<ion-toggle checked="true"></ion-toggle>
</ion-item>
Now, label and toggle are in one line, I want the label and toggle both open a new line with 100% width, how can I do that? Thanks
Just put them outside the ion-item like this:
<div>
<ion-label>test</ion-label>
<ion-toggle checked="true"></ion-toggle>
</div>
I'm Trying to hide/show elements of a ion-list depending of a boolean variable which is changed when a button is clicked.
The problem is that if I try with *ngIf="{{editMode}}" the ionic serve --lab shows blank screen on browser.
<ion-item-sliding *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-item>
<ion-icon item-left name="rose" *ngIf="{{editMode}}"></ion-icon>
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</ion-item>
And if i try with *ngIf="'editMode'" the result of click on button is nothing.
When I click on a nav bar button the boolen variable is modified to true/false.
What would be wrong?
Check here
You have to do *ngIf="editMode"
*ngIf="'editMode'" - Here you are just taking the string editMode which is truthy and button will not work.
I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only