I have a JSON Parse in my project and its work fine
let data:Observable<any>;
data = this.http.get(API);
data.subscribe(result => {
this.items = result;
this.saveData();
});
HTML:
<ion-card *ngFor="let item of items">
<ion-card-content id="{{item.id}}">
....
....
</ion-card-content>
</ion-card>
Now I want a 'Favorite' function.
I have an icon with a click event.
How I do, that when anyone clicks on the icon he add the specific card to his favorites and he can show his favorites on another page?
Related
<ion-icon id= "list" name="list-sharp" onclick = "appear()"></ion-icon>
<ion-card id = "popup">
//other stuff
</ion-card>
appear(){
document.getElementById("popup").style.visibility = "visible";
}
The first part is in html the appear method is in typescript, and whenever i click on my list icon it gives me an error and says appear is not defined, anyone know why this is.
I have a clarification, Basically i am passing a list from parent page to Ionic modal. In modal, i will iterating over a list. i am basically modifying a property of an object on click of ion-item.
Below is the html code in the modal.
<ion-card *ngFor="let item of items">
<ion-row>
<ion-col size="3">
<ion-img width="80" height="80" [src]="item.imagePath"></ion-img>
</ion-col>
<ion-col size="7" >
<ion-label class="item-name">item.name</ion-label>
<ion-label class="item-price">item.cost</ion-label>
<ion-label class="item-date">item.date</ion-label>
</ion-col>
<ion-col size="2">
<ion-icon class="select-icon" name="add-circle" (click)="updateObj(item)"></ion-icon>
</ion-col>
</ion-row>
</ion-card>
In modal.component.ts
ngOnInit() {
this.items = this.navParams.get("items");
}
dismissModal(){
this.modalCtrl.dismiss();
}
updateObj(object){
if(object){
object.status = true
}
}
i am using navParams to get the list from parent page to the modal. When i click on ion-item i will be calling updateObj method where i am updating the status of object to true. Everything works fine.
But when i update the object in the modal, the original list sent to the modal also gets updated.
Could anyone explain why updating the list in the modal updates the original list. Is it bcoz of using navParams as it referers to the list?
In Parent.component.ts
async openSearchModal(){
const modal = await this.modalCtrl.create({
component: CouponSearchPage,
componentProps: { items: this.itemListData,
}
});
This is how i am passing the list to the modal from parent screen.
When you pass this.itemListData to modal, you are passing the reference of the object.
If you don't want to modify the actual object, you can pass a new object.
Try this:
const modal = await this.modalCtrl.create({
component: CouponSearchPage,
componentProps: { items: { ...this.itemListData},
}
});
I am facing a problem while using ionic 4, and ionic-select.
The problem comes when i have some data and i am binding the data.
In this example, i already have a pre selected data, when i do so the ion-select does not render properly.
<ion-item class="transparent">
<ion-label position='floating'>{{ 'GENDER_TXT' | translate}}</ion-label>
<ion-select interface="popover" color='medium' [(ngModel)]='Gender' formControlName='genderTxt'>
<ion-select-option *ngFor='let g of Genders' [value]='g'>{{g.GENDER}}</ion-select-option>
</ion-select>
</ion-item>
this.getGendersSub = this.proxy.Get_Genders(param).subscribe((data) => {
this.Genders = data;
this.Gender = this.Genders[0];
});
Demo Image
remove the ngmodel directive[(ngModel)]='Gender' when you use reactive form , you can set the selected value by update form control genderTxt value
this.getGendersSub = this.proxy.Get_Genders(param).subscribe((data) => {
this.Genders = data;
this.form.get(`genderTxt`).setValue(this.Genders[0]);
});
demo 🚀🚀
I have an Ionic 2 app that uses both a sidebar and tabs.
I have managed to create a link in the sidebar that sends the user back to the root page, but this kills the tabs. I would like the tabs to be persistent.
Here is what I have:
app.html
`<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item (click)="openPage(page)" *ngFor="let page of pages">
<span>{{page.title}}</span>
</ion-item>
</ion-list>
</ion-content>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
Then in my app.ts I have this function:
openPage(page) {
this.menu.close();
this.nav.setRoot(page.component);
}
So this does actually work, but I lose my tabs. Is there a better way to do this?
this.nav.setRoot(TabsPage);
TabsPage is the class name of your tabs page's component.
You could reference the ionic-conference-app. It works for me.
openPage(page){
this.menu.close();
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
}
I'm developing an mobile application using ionic. In this I'm trying to implement the delete feature like this :
As we see there is icon on left-side of the every list item, when clicked on that icon, list transitions to left-side and delete button gets displayed on the screen.
I want to implement the same feature..But not able to write the right CSS. Please guide me how should I make this work.
Here is the link to my plunkr
You can use ionic list directive.
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-info"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
Controller:
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});