I'm doing an online bookstore project where you can also mark a book as booked. So I would like to assign a function to a button "mark as booked", once this button is pressed that item will have to have the parameter booked and disappear from the page and go to the "reserved books" page. my data I take from a local json and I do not know how to assign the parameter "booked" and make the item disappear if he had this parameter.
example of my page
html code:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col *ngFor="let libro of libri; let i =index;" >
<div>
<ion-card-header><h1>{{libro.title}}</h1></ion-card-header>
<ion-card-header (ngModelChange)="setYear($event)"><h3 >Autore:{{libro.author}}</h3></ion-card-header>
<ion-card-header><h4>Anno:{{libro.year}}</h4></ion-card-header>
<div id="immagine">
<img src="../assets/{{libro.imageLink}}">
</div>
<button ion-button (click)="modificaItem(libro)" color="">Modify</button>
<button ion-button (click)="remove(i);" color="danger" >Mark as booked</button>
<button ion-button color="{{libro.prenotato ? 'danger' : 'secondary'}}">Status</button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
(click)="remove(i);" is a provvisory function
Related
i'm having a weird issue on my ionic app. i'm trying to create a modal page where user may enter opening hour of something. there is each day inside my json.
when i try to click the button to add another hour in the day, the function is fired 7 times (one for each day). I don't understand why
Do you have an idea ?
<ion-list *ngFor="let day of json.days">
<ion-list-header>
{{day.title}}
</ion-list-header>
<ion-grid>
<ion-row>
<ion-col col-6><ion-datetime displayformat="HH:mm" pickerformat="HH mm" placeholder="00:00" ></ion-datetime></ion-col>
<ion-col col-6><ion-datetime displayformat="HH:mm" pickerformat="HH mm" placeholder="00:00" ></ion-datetime></ion-col>
</ion-row>
</ion-grid>
<button ion-button clear (click)="addHours(day.id, $event)">test</button>
</ion-list>
addHours(id,event){
event.preventDefault();
event.stopPropagation();
for (let key in this.json.days) {
console.log(this.json.days[id]);
}
}
Thank you for your help
I want to do a simple if else in Angular template. I'm using Ionic framework. What I want to do is something like
if (val != null){
document.write("No value");
}
else{
document.write("Has value");
}
What I have now is
<ion-grid *ngIf="devices">
<!-- Show if devices exist -->
<ion-row>
<ion-col>
<ion-list>
<ion-item>
device 1
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<!-- Show if devices DO NOT exist -->
<ion-row>
<ion-col>
<button text-center ion-button round col-6 offset-3> Odśwież urządznia </button>
</ion-col>
</ion-row>
</ion-grid>
I wanted to do something like *ngIf!=null or *ngElse but these two do not work.
So my question is how do I do that?
You have to use in following way -
<div *ngIf="condition; else elseBlock">
Truthy condition
</div>
<ng-template #elseBlock>
False condition
</ng-template>
hope this will help you, let me know in case any issue?
I have a div that repeats using an *ngFor. So there are multiple div's on my page. Within each of these div's, there several more element's that also toggle. So we have collapsible fields within other collapsible fields. Each item allows the parent to collapse all children, but also the children to expand/collapse individually.
The problem is that when multiple item are generated using the *ngFor, the toggle function to expand/collapse the fields applies to all the items on the page. I want the toggle to work for only that specific item.
Here is a snippet of the HTML/AngularJS code:
<div padding>
<div *ngFor="let item of ItemsList">
<div>
<ion-grid>
<ion-row>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
<a *ngIf="!expandItem" (click)="toggleItem('down')">
<ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
</a>
<a *ngIf="expandItem" (click)="toggleItem('up')">
<ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
</a>
</ion-col>
</ion-row>
<div>
...
...
...
<ion-col>
<a *ngIf="!expandField1" (click)="toggleField1('down')">
<ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
</a>
<a *ngIf="expandField1" (click)="toggleField1('up')">
<ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
</a>
</ion-col>
<ion-grid *ngIf ="expandField1 || (expandItem && expandField1)">
<ion-row *ngFor="let subItem of item.subItem">
<ion-col>
{{subItem.name}}
</ion-col>
<ion-col>
{{subItem.name}}
</ion-col>
<ion-col>
{{subItem.name}}
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
Here is a snippet of the toggle functions
toggleItem(type: any) {
if (type == 'up') {
this.expandItem = false;
this.expandField1 = false;
} else {
this.expandItem = true;
this.expandField1 = true;
}
toggleField1(type: any) {
if (type == 'up') {
this.expandField1 = false;
} else {
this.expandField1 = true;
this.expandItem = true;
}
Any questions please ask.
you will have to use an array of expandItem and expandField1 to track opening and closing of each collapsible. For this you can use $index and then set array for it like expandItem[$index] = true for a particular collabsible on click.
I need to remove an ionic 2 card when someone clicks on the trash icon. The code I have so far gives a querySelector is null error when I run it.
The view html looks like this:
<ion-card *ngFor="#mediaItem of mediaItems" id="item{{mediaItem.id}}" class="media-item">
<ion-card-header class="title-header">
<div class="title-item">
{{mediaItem.title}}
</div>
<ion-icon name="trash" class="bookmark_trash_icon" (click)="removeItem(mediaItem.id)"></ion-icon>
</ion-card-header>
<ion-card-content class="outer-content" >
<img src='{{mediaItem.url}}'>
</ion-card-content>
<ion-item class="bookmark-media-item">
<!-- <button (click)="topup(mediaItem)" clear item-left> -->
<div style="float:left;">
<ion-icon name="heart"></ion-icon>
{{mediaItem.liked}}
<ion-icon name="close-circle"></ion-icon>
{{mediaItem.disliked}}
</div>
<a (click)="showUserProfile(mediaItem.owner, mediaItem.username)" style="float:left;">
{{mediaItem.username}}
</a>
<div style="float:right;">
<img src="img/tiny-v.png" class="bookmark-v-icon">
{{mediaItem.credits_left}}
</div>
</ion-item>
</ion-card>
My controller javascript code looks like this:
removeItem(theItemID) {
let cardToHide = '#item'+theItemID;
document.querySelector(cardToHide).style.display = 'none';
}
The error I get is
querySelector is null
You can send the object instead of the id by changing that part of the code:
(click)="removeItem(mediaItem)"
And then find that object in you mediaItems array and delete it from there. Then your view will be automatically updated.
First get the index of that object in the array, and then you can use the mediaItems.splice(index, 1) to delete it from the array:
removeItem(theItem) {
let index = this.mediaItems.indexOf(theItem);
this.mediaItems.splice(index,1);
}
I am fetching data from a REST API, and I am receive a JSON that has the following format:
[Object]
0:Object
createdAt:"2016-05-04T16:32"
list:Array[4]
0:"Mango"
1:"Apple"
2:"Banana"
3:"Kiwi"
Currently, the following is printed when calling that JSON in the HTML file:
Mango,Apple,Banana,Kiwi
Here is the JS code used to retrieve data from the REST API:
this.http.get('https://example.com/api').subscribe(data => {
this.categories = data.json().results;
});
The current HTML/Angular code:
<div *ngFor="#fruit of categories">
<ion-row>
<ion-col>
<div class="txt">{{fruit.list}}</div>
</ion-col>
</ion-row>
</div>
The final Result of what I want to achieve is the following:
<div>
<ion-row>
<ion-col>
<div class="txt">Mango</div>
</ion-col>
<ion-col>
<div class="txt">Apple</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div class="txt">Banana</div>
</ion-col>
<ion-col>
<div class="txt">Kiwi</div>
</ion-col>
</ion-row>
</div>
Can you please tell me how to achieve that? Do I need to change something on the JSON itself? Or it can be done simply by tweaking the *ngFor?
I would create a new object to gather elements:
this.service.getFruits().subscribe(categories => {
let fruits = categories.list;
let fruitsByGroup = [];
fruits.forEach((fruit, index) => {
let groupIndex = Math.floor(index/2);
if (index%2 === 0) {
fruitsByGroup[groupIndex] = [];
}
fruitsByGroup[groupIndex].push(fruit);
});
this.fruitsByGroup = fruitsByGroup;
});
Then I would iterate this way:
<div *ngFor="#fruitGroup of fruitsByGroup">
<ion-row *ngFor="#fruit of fruitGroup">
<ion-col>
<div class="txt">{{fruit.list}}</div>
</ion-col>
</ion-row>
</div>
You could do something like this using an ng-repeat:
<div>
<ion-row ng-repeat="fruit in categories.list">
<ion-col>
<div class="txt">{{fruit}}</div>
</ion-col>
</ion-row>
</div>
The main complication that will come out of this, is separating them out into different rows. If there aren't too many items you're dealing with, you could try something like this:
<div>
<ion-row ng-repeat="fruit in categories.list.slice(0,1)">
<ion-col>
<div class="txt">{{fruit}}</div>
</ion-col>
</ion-row>
<ion-row ng-repeat="fruit in categories.list.slice(2,3)">
<ion-col>
<div class="txt">{{fruit}}</div>
</ion-col>
</ion-row>
</div>
Does this answer your question?
You can do this using nested ngFor
<div *ngFor="#fruit of categories">
<ion-row>
<ion-col *ngFor="#item of fruit.list">
<div class="txt">
{{item}}
</div>
</ion-col>
</ion-row>
</div>
In you rest calling code
this.http.get('https://example.com/api').subscribe(data => {
this.categories = data.json().results[0].list;
});
In your HTML code
<div *ngFor="#fruit of categories">
<ion-row>
<ion-col>
<div class="txt">{{fruit[0]}}</div>
</ion-col>
</ion-row>
</div>