I am using IONIC 4, I faced an issue in using . In my application I have 4 tabs and in each tabs we have a sub page. On navigating to 1st tab and we have a link to load sub-page, once we load the sub page and go to another page by clicking 2nd tab, after that when we agin click the first tab then it is showing the sub page at first time, and when we again click on the first tab then it loads the main page.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button [ngClass]=" activated === 1 ? 'selescted': '' " (click)="activateTab(1)">
<ion-label>Teams</ion-label>
<ion-icon *ngIf="activated === 1" src="../../assets/svg/team-active.svg"></ion-icon>
<ion-icon *ngIf="activated !== 1" src="../../assets/svg/team.svg"></ion-icon>
</ion-tab-button>
Related
I was able to successfully Add Select All functionality when checkbox is clicked. However I am unable to Uncheck All when all items are already selected
Here is the link to code - https://stackblitz.com/edit/angular-material-select-all-aota2app.component.html
Your function unselectAll() has never been called
<mat-checkbox (ngModelChange)="selected = !selected" [ngModel]="checked">Check/ Uncheck</mat-checkbox>
I have two time only calendar components which I used to be able to tab directly through with PrimeNG 5.
However with PrimeNG 9 with focusTrap set to false (e.g. [focusTrap]="false") and with onBlur closing the overlay (this.calendar1.overlayVisible = false;). 2 Tab presses are required to go to the next component, Shift-Tab works correctly.
The issue is when the tab is pressed, the up arrow for the time on the popup/overlay grabs focus and then the overlay is closed, so an additional tab is required to exit the time only calendar component, see this StackBlitz:
https://stackblitz.com/edit/primeng-calendar-demo-7qcnhr?file=src/app/app.component.html
How can I through the calendar components, can the popup/overylays not grab focus like it did in PrimeNG 5?
Any help would be appreciated.
The code of interest is :
app.component.html
<p-calendar #calendar1 [(ngModel)]="date" [timeOnly]="true" [focusTrap]="false" (onBlur)="hideCalendar(calendar1)"></p-calendar>
<p-calendar #calendar2 [(ngModel)]="date" [timeOnly]="true" [focusTrap]="false" (onBlur)="hideCalendar(calendar2)"></p-calendar>
app.component.ts
hideCalendar(calendar: Calendar) {
calendar.overlayVisible = false;
}
Cheers.
I have a focus trap that activates when an angular material dialog is opened. A parent component contains the cdkTrapFocus directive from the a11yModule (https://material.angular.io/cdk/a11y/api#CdkTrapFocus), and it's various children can have a varying number of inputs.
The focus trap works as expected when the dialog is opened, preventing the user from pressing tab or shift-tab to access items behind the dialog. However, when a user clicks on the grayed-out area behind the dialog, then presses shift-tab, they gain access to all items behind the dialog.
The focus trap remains broken until they press shift-tab (or tab) enough times to move the focus back inside the dialog. The correct behavior would be that the focus only ever stays trapped in the dialog, no matter what is clicked on inside or outside the dialog.
For the most part I have examined the link above to see what options there are to ensure focus remains trapped, but It has been difficult to determine what directives would be most useful for this problem. Below is the parent component html template.
<div class="dialog-frame dialog-fade dialog-backgray" [ngClass]="{ 'in': shown }" role="dialog">
<div class="dialog-main" [style.width]="dialogWidth" id="dialog-main" cdkTrapFocus>
<ng-template #element> </ng-template>
</div>
</div>
If anyone reading this has a solution to this, I would appreciate your help.
I ran into the shift-tab issue. The solution for me was to add a keydown listener, which prevents focus if the event path is not in the modal:
#HostListener('document:keydown', ['$event'])
onTab(event) {
if (event.key == 'Tab' && this.modalIsOpen) {
let path = event.composedPath();
let modal = path.find((element) => element.tagName && element.tagName.toLowerCase() == this.modalComponentTagName);
if (path && !modal) {
// Tabbing outside of the modal.
event.preventDefault();
this.focusOnFirstElementInModal();
}
}
}
For me this.modalIsOpen is this.document.body.classList.contains('modal-open'), this.modalComponentTagName is 'app-donate-modal', and this.focusOnFirstElementInModal() focuses on the modal's close button.
I have noticed that working with Ionic2 Framework when a new page with tabs loads, the first tab is active.
What I want, is to set all tabs inactive when the page loads for the first time. I tried [selectedIndex]=-1, but it didn't work.
My html concerning that part is:
<ion-tabs>
<ion-tab [root]="tab1" tabIcon="list" tabTitle="Categories"></ion-tab>
<ion-tab (ionSelect)="scanner()" tabIcon="barcode" tabTitle="Scan"></ion-tab>
<ion-tab (ionSelect)="buffer()" tabIcon="browsers" tabTitle="History"></ion-tab>
<ion-tab (ionSelect)="cart()" tabIcon="cart" tabTitle="Shop"></ion-tab>
</ion-tabs>
Is there any attribute that I can set so I implement that kind of behaviour or am I looking for the impossible?
Thanks in advance.
I am using Ionic 2.
I have a list of items, where I use <ion-item-options>. They work perfectly as documented here.
When a user slides the item to the left, the options are exposed.
Question
Is it possible to add that when the user long presses on the item, it also exposes the options?
Thanks
<ion-list>
<ion-item-sliding...
<ion-item...
.........
</ion-item>
<ion-buttons>
<button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
</ion-buttons>
</ion-item-sliding>
</ion-list>
The longer press (as said by it's name) can be called on by using (press) instead of (click). This way you can call a function when the ion-item has been pressed and toggle a boolean.
Next in your ion-item-options you can set an *ngIf="yourBoolean" and your options will be toggled