<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.
Related
This is a circular menu. In the options to open with the touch on the floating button but I get :
ERROR TypeError: Cannot read property 'getElementById' of undefined
when I run my code. Also the menu is already open when I load this page. I want it to be closed and open when it's clicked on.
<a class="floating-btn" (click)="document.getElementById('circularMenu1').classList.toggle('active');">
<a><ion-icon name="menu"></ion-icon></a>
</a>
<menu class="items-wrapper">
<ion-icon name="home"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-icon name="heart"></ion-icon>
<ion-icon name="help"></ion-icon>
</menu>
</div>
please use this approach
in html
<a class="floating-btn" (click)="toggleMenu()">
<a><ion-icon name="menu"></ion-icon></a>
</a>
<menu [ngClass]="{'active': isOpen}">...</menu >
in ts
isOpen = false; // set it to false initially
toggleMenu(){
isOpen = !isOpen; // toggle it as you want
}
From your code, I'm unable to find the ID which you have mentions in that click event. Btw this is not a good practice to use en angular. As a solution, for the click event, you can call a function in the controller and set a variable based on the condition. Then after you can use NgClass property binging in order to close or open the menu.
Here is the reference for NgClass property.
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?
I have an *ngFor which gives me the certain item list of goods and I click a particular button to choose them. As I click my choose button, it temporarily disables the button till the time I get response from my back-end. As I get my response from back-end, the button becomes active to un-choose the item.
The issue I am facing here is, as I click the choose button, it makes all buttons of the list temporarily disabled. But what I want is to make only the clicked button disabled.
My HTML code snippet:
<ion-card *ngFor="let list of list_Array;>
<ion-card-content >
<p style="color: #666; " [innerHTML]="list.item"></p>
</ion-card-content>
<button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="ChooseButton">
<div class="chosen"
ng-class="{'chosen': isChosen}">
<p >choose</p>
</div>
</button>
<button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==false" [disabled]="ChooseButton" >
<div class="choosen"
ng-class="{'chosen': isChosen}">
<p >choose</p>
</div>
</button>
</ion-card>
Currently you have ChooseButton flag global, that's why as soon as you change that flag, it reflects everywhere in component context.
Make the ChooseButton property local to each collection element i.e. list.ChooseButton.
[disabled]="list.ChooseButton"
For applying the above you should change the activeButton function to below, before that pass list object on click of button like (click)="activeButton(list)"
Function
activeButton (item) {
item.ChooseButton = true;
console.log("listId", item._id);
}
Answer 1:
As #Pankaj Parkar's answer said - Each item in your list_Array needs to have it's own flag chooseButton, than having 1 common flag for all items to make only the clicked button disabled.
Now, say you have loaded your list_Array. You can use following for loop to add this property to it and set it to false initially:
for(var i = 0; i < list_Array.length; i++){
list_Array[i]['chooseButton'] = false;
}
Now, pass the list as parameter from your UI code to activeButton(list) method like : (click)="activeButton(list)" (Remember to pass an entire object here than list._id as you have done).
Now, in your method:
activeButton(list) {
list.chooseButton = !list.chooseButton;
}
Here, I have negated list.chooseButton to it's previous value (true -> false or false -> true). Hope this helps.
Answer 2:
You already have list.isAlreadyChosen present in your list_Array.
Just do [disabled]="!list.isAlreadyChosen" in first button and [disabled]="list.isAlreadyChosen" in second should solve your problem. Easy. ;)
Here is another way to achieve this:
//component
disableMe:boolean[];
disableThis(id){
this.disableMe[id] = !this.disableMe[id];
}
//template
<button ion-button color="secondary" clear (click)="activeButton(list._id); disableThis(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="disableMe[list._id]">
<div class="chosen"
ng-class="{'chosen': isChosen}">
<p >choose</p>
</div>
</button>
I am developing app in Ionic 2, and I want to display map in a modal. Problem is I can't get it to work. Same code works on normal page, but not in modal. I tried using web version of google maps API and even native cordova plugin, but result is the same, blank map in modal, working map on page. Any advice how to solve this?
You should set the underneath page to transparent.
Here is my working code for calling map modal
html
<ion-content [style.opacity]="isModal ? 0 : 1" padding>
<button ion-button item-right >
<ion-icon name="add" (click)="getLocation()"></ion-icon>
</button>
</ion-content>
typescript
getLocation() {
this.isModal = true;
let mapModal = this.modalCtrl.create(MapModalPage);
mapModal.onDidDismiss((data) => {
this.isModal = false;
if(data) {
this.location = data.location;
this.locImage = data.image;
}
});
mapModal.present();
}
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
});