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.
Related
How to avoid triggering the div click event when clicking on ion-icon
<div(click)="goNext()">
<ion-icon name="close-circle-outline" size="large" (click)="dissmiss()"></ion-icon>
</div>
On the dissmiss function you have to write your icon code logic. after performing you have to place event.stopPropagation() at the end of dissmiss function to stop event to trigger the parent events.
like this:
function dissmiss(event){
// write code for icon close.
event.stopPropagation();
}
the above code runs the logic that you written for icon close and the stopped immediately at this function and will not go to the parent node click.
<div(click)="goNext()">
<ion-icon name="close-circle-outline" size="large" (click)="dissmiss($event)"></ion-icon>
</div>
And in the JS:
function dissmiss($event){
$event.stopPropagation();
}
<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 an primeng accordion and the accordion header has a checkbox control . Whenever i check/uncheck checkbox , the accordion tab is getting open/closed automatically
Is there any way to prevent expand/collapse on click on checkbox ? It should expand/collapse on header other than check/uncheck check box ?
This is happening due to Event Bubbling. For this need to stop eventPropagation by calling stopPropagation() of MouseEvent.
Accordion html code sample
<p-accordion>
<p-accordionTab header="Godfather I" [selected]="true">
<p-header>
<span>Godfather I
<input type="checkbox" (click)="onClick($event)">
</span>
</p-header>
Some Text
</p-accordionTab>
</p-accordion>
Corresponding component ts code.
onClick($event: MouseEvent){
$event.stopPropagation();
}
For Reference added stackblitz code sample.
This is how I solved this issue. This is happening because of Event Bubbling. So when you click on child element. Event propagate to its parent and so on. So Just use stop propagation on event. It will prevent the click event on your accordion. Below code for your reference.
Accordian with Check box code I used (onChange) method.
<p-accordionTab>
<p-header>
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-checkbox name="group1" #ck value="New York" label="New York" [(ngModel)]="selectedCities" (onChange)="checkChange($event)" inputId="ny"></p-checkbox></div>
</div>
</p-header>
</p-accordionTab>
component.ts
selectedCities: string[] = [];
//Simply you have to to stop propogation here.
checkChange(e:any){
console.log(e); // true or false.
event.stopPropagation(); // component will have direct access to event here.
}
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'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
});