I'm learning Ionic 3 and I want create a dynamic form.
A dynamic form for me is a form that increases when I press a FAB button (like alarm native app in Android), I read dynamic forms in angular page but I think it's not what I'm looking for.
This is my code, but I think my base idea is correct, it's possible create something like this in Ionic 3?
<ion-list id="horario-list9">
<ion-item-divider color="light" id="horario-list-item-divider3">
<ion-list-header>
<h2>{{titles[0]}}</h2>
</ion-list-header>
</ion-item-divider>
<ion-item id="horario-range1">
<ion-range style="padding-left:0px" [(ngModel)]="quantity1" min="0" max="6" step="1" color="balanced" value="0" name="ration1">
<ion-icon range-left>
<img src="assets/imgs/cup.svg" alt="" height="40px" width="40px">
</ion-icon>
<ion-label range-right>
<div *ngIf="quantity1; else other_quantity1">
<p style="font-size:40px;color:#AED581">{{quantity1/2}}</p>
</div>
<ng-template #other_quantity1>
<p style="font-size:40px;color:black">0</p>
</ng-template>
</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="md-time" style="font-size:50px"></ion-icon>
</ion-label>
<ion-datetime style="font-size:40px" displayFormat="HH:mm" pickerFormat="HH mm" [(ngModel)]="event.timeStarts1"></ion-datetime>
</ion-item>
<div class="spacer" style="width:300px;height:30px;" id="horario-spacer6"></div>
<ion-fab center>
<button ion-fab color="secondary"><ion-icon ios="ios-add" md="md-add"></ion-icon></button>
</ion-fab>
</ion-list>
This look like this My form in Safari
I want create a dynamic form, I need when I press my green button add new ion-item in my list, it's possible? Angular documentation failed to explain this question
Related
I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.
<ion-list text-wrap>
<ion-list-header>
...
</ion-list-header>
<ion-item *ngIf="classes?.length === 0">No Data</ion-item>
<ion-item-group *ngFor="let classObj of classes">
<ion-item-divider>...</ion-item-divider>
<ion-item-sliding *ngFor="let class of classObj?.classes">
<ion-item *ngFor="let class of classObj?.classes">
<ion-grid>
...
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary">
Change
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
I have no idea what went wrong. This happened to both Android and iOS
Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now
I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
I am working in Ionic app and I have used the ion-item in my app and I want select one item before moving to the next page but I am not able to select the item.
This is my shipping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end"></ion-checkbox>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the items in the loop. It is showing the data but the problem is that I am not able to select the item. I have also used the checkbox but when using the checkbox, it is not showing the p and h2 tags in the view.
This is result in the html, when using the checkbox it is not showing the p and h2 tag. When I am not using the checkbox, it is showing the p and h2 tag.
Any help is much appreciated.
Just Try This: It Works!
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, It will show the checkbox for all the items and the text also.
Hello I am trying to make a app that when a user click's the add button opens another page that list's of all installed app's on that device then by clicking on a single app adds that app to the main page in a listview of my app and then the user can go back to the main page and click that app and it opens it from my app. I am using ionic 3 and am using the AppAvilability plugin to list all installed apps
here's my code for the main page:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button ion-button icon-only solid>
<ion-icon name="add-circle"></ion-icon>
//add redirect to applist here
</button>
</ion-buttons>
<ion-title></ion-title>
<ion-buttons end>
<button ion-button icon-only solid>
<ion-icon name="remove-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding id="page1">
<div class="spacer" style="height:30;" id="page1-spacer6"></div>
<ion-list id="page1-list1">
<ion-item color="none" href-inappbrowser="http://www.google.com" id="page1-list-item5">
<ion-avatar item-left>
<img src="assets/img/FUhCAggEQECSHctkev1s_web.png" />
</ion-avatar>
<h2>
Internet
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer1"></div>
<ion-list id="page1-list2">
<ion-item color="none" id="page1-list-item6">
<ion-avatar item-left>
<img src="assets/img/SWDHBJ2JRJyhl2rDAbPe_email.png" />
</ion-avatar>
<h2>
Email
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer2"></div>
<ion-list id="page1-list3">
<ion-item color="none" on-click="goToMath()" id="page1-list-item7">
<ion-avatar item-left>
<img src="assets/img/eRWr6of9Sq2eRPvM4LjM_math.png" />
</ion-avatar>
<h2>
Math
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer3"></div>
<ion-list id="page1-list4">
<ion-item color="none" on-click="goToScience()" id="page1-list-item8">
<ion-avatar item-left>
<img src="assets/img/Xtvlww5aS4SeDvBnE1FJ_sci.png" />
</ion-avatar>
<h2>
Science
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer4"></div>
<ion-list id="page1-list5">
<ion-item color="none" on-click="goToHandwriting()" id="page1-list-item9">
<ion-avatar item-left>
<img src="assets/img/eeisx650TqaSAMPn9EH4_handwrittin.png" />
</ion-avatar>
<h2>
Handwriting
</h2>
</ion-item>
</ion-list>
<div class="spacer" style="height:12;" id="page1-spacer5"></div>
<ion-list id="page1-list6">
<ion-item color="none" on-click="goToFlashcards()" id="page1-list-item10">
<ion-avatar item-left>
<img src="assets/img/noKqBQE1QbKdexCASz5g_flashcards.png" />
</ion-avatar>
<h2>
Flashcards
</h2>
</ion-item>
</ion-list>
<div>
<img src="assets/img/My3SIjXBSFoRJZG6yaWI_haQq7TIJRYeYrFNGbcvw_books.png" style="display:block;width:auto;height:auto;margin-left:auto;margin-right:auto;" />
</div>
</ion-content>
I'm new to ionic so any links/code samples on how to do would be amazing!
Thanks in advance!
Store all the apps in some sort of array. For example, you could make an array of object were each app has certain properties (a name etc.). Using *ngFor, you could list these in a view.
To push a page onto the navigation based on an entry you will want to import the NavController and NavParams. After that, create a page from the CLI using ionic g page appPage Then, you can inject the NavController and call .push('appPage') when the user clicks a button. Here is where you will want to push some data to the Navparams (navigation parameters) about which page was clicked. You can google "Angular Tour of Heroes" and follow the "detail view" guide they have on there so that you can associate each page in the list with a name of some sort.
After that, simply design your HTML and Typescript for the AppPage page to get a clean looking detailed pageview.
I've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference
ionic-angular version is 2.0.0-rc.2
if I remove *ngFor, using a static list instead, it works fine. The following is the code snippet.
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.subject}}</h2>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon> Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
I notice problem with ion-item-sliding, when slide, it not keep slided item, so not allows to click ion-item-options button
The above code is tested and finally has run successfully with dynamic data from outside.
The problem is that when item is calling just add the little code. async pipe after the loop.
The Final code will be....
<ion-list>
<ion-item-sliding *ngFor="let item of items | async">
<ion-item>
<h2>{{item.subject}}</h2>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary">
<ion-icon name="mail"></ion-icon> Email
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Hopefully, Above code will work fine.