Is there any way to get the active tab index in Ionic 2? I have searched, in Ionic 1 there is $ionicTabsDelegate.
Pass the event object to your method:
<ion-tabs (ionChange)="tabSelected($event)">
The event object is actually the selected Tab:
tabSelected(tab: Tab) {
console.log(tab.index);
}
Your navController should link to the nested Tab which has a property 'index'.
console.log((<Tab>this.navCtrl).index);
I think this is a little hacky so I'm happy to see other answers. But for the moment you could try that :)
You can add an ID to the tabs element e.g. <ion-tabs #myTabs> and use #ViewChild('myTabs') myTabs: Tabs; to get a reference to the HTML tabs element. In the controller you can call this.myTabs.getSelected() which has an index property, which return the active tab's index
Related
I'm developing tabs component and I want Angular to render and initialize only active tab instead of all tabs. How can it be done?
<my-tabs>
<my-tab [tabTitle]="'Tab1'">
<some-component></some-component>
</my-tab>
<my-tab [tabTitle]="'Tab2'">
<some-component2></some-component2>
</my-tabs>
Basicaly In this case the first tub is active, so <some-component></some-component> should be initialized, but <some-component2></some-component2> shouldn't as Tab2 is not active
Use *ngIf on the component. When the value if false, the component will be removed from the DOM, and therefore not initialised. Something roughly like:
<my-tab [tabTitle]="'Tab1'">
<some-component *ngIf="tabOneActive" ></some-component>
</my-tab>
Hi I am working on a Angular4 application and for UI I am using Primeng.
I have a multi-select element which behaves pretty much the same as it does over here https://www.primefaces.org/primeng/#/multiselect
The only thing I want different is on the drop-down, when "X" (close) button is clicked, I want it to clear all the selection instead of closing the drop-down itself.
Is there any way to achieve that in primeng ?
Help is appreciated !
You can manually trigger the checkbox in the left by jquery.
declare var jquery:any;
declare var $ :any;
$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')
or you make the value of the p-multiselect equal to [].
Ex.
//html
<p-multiSelect #multiselect>
<button type="button" (click)="functionToClear(multiselect)"</button>
</p-multiselect>
//ts
functionToClear(multiselect): void {
multiselect.value = [];
}
It isn't possible, but you can clear all the selection by clicking the checkbox in the left corner twice.
While it isn't a supported functionality of the Multiselect PrimeNg component, if you really want it to do that, you would have to manually edit the component, multiselect.js, and modify the close(event) function to do what you want.
you can use formGroup and try to clear value following way:
html:
<ng-multiselect-dropdown [(ngModel)]="data"
[data]="fetchedData" [settings]="customeSettings"
formControlName="myControl">
</ng-multiselect-dropdown>
.ts:
this.form_name.controls.myControl.setValue("");
normally the multi-select input in primeng is binded to a property that holds the selected members, usually an array.
you can use a reset button for example that when clicked, it will empty that propery/array and this will clear all the selected check boxes of the multi-select.
Since PrimeNg version 13, you can use [showClear]="true" property to display an 'X' icon next to the control value.
Simple and short question, but I'm not so sure about a good answer. ;)
Is it somehow possible to add a Listener to the root items of a menu bar?
I'd like to click the Edit item and a event should be fired.
From Vaadin API documentation :
You can set commands to be fired on user click by implementing the MenuBar.Command interface.
Create a class that implements MenuBar.Command interface and then add the root item by calling MenuBar.addItem
You can also skip the class creation like this:
myMenuBar.addItem("My Item", new MenuBar.Command() {
void menuSelected(MenuBar.MenuItem selectedItem) {
// Handle selection
}
});
If you are doing in xaml, can't you just do in the element, something like <Menu... OnClick="...">
I have used a datagrid and one button in control bar. by clicking button the application goes edit state from base state.
My question is how can i use popup for editing selected record of datagrid instead of changing state.
please give me any example with code that describe how pop ups can be used in flex 3 application.
I got answer for above problem.
First we have to create custom component for popup named MyPopup
And in application:
import components.popups.MyPopup;
public var pop:MyPopup;
public function Show_Pop():void
{
pop= PopUpManager.createPopUp(this,MyPopup,true) as MyPopup;
PopUpManager.centerPopUp(pop);
}
calling function:
<mx:Button click="Show_Pop()" id="btn1" label="show Popup"/>
I am adding a right click functionality on individual nodes of a treeView in my C# code.
The options like "Add", "Delete", "Rename" should pop up when the user right clicks in those nodes on the tree. Now depending on the node that is being clicked, I am filling up the menu as using the following statememnts:
contextMenuStrip1.Items.Add("Add");
Then if a different nodes is right clicked I use the following:
contextMenuStrip1.Items.Add("Rename");
There are some nodes where both the items have to be shown:
contextMenuStrip1.Items.Add("Add");
contextMenuStrip1.Items.Add("Delete");
How do I write seperate event handlers for Add and Delete when both of them exist in the context menustrip. I am not able to differentiate whether "Add" or "Delete" was clicked. Currently I am using the "ItemClicked" event on the ContextMenuStrip to execute my piece of code in the event handler for "Add" but this evemt also gets raised when "Delete" is clicked. Any help would be appreciated.
Thanks,
Viren
Instantiate your context menu strip. In that you will add your three ToolstripMenuItems. Each toolstrip menu item will have it's own OnClick method. Change the visibility property of an item depending on what your context requires.