EasyUI Forum

General Category => EasyUI for Angular => Topic started by: Swany on April 23, 2018, 01:44:14 PM

Title: Stop the TabPanelComponent from closing after the X is clicked.
Post by: Swany on April 23, 2018, 01:44:14 PM

I don't see a before tab closing event. So is there another way to stop the tab panel component from closing after the X is pressed. Example is if the user clicks on the X and we check to see if the form is dirty. If it is than show a message box and keep the tab from closing if they select to stop closing the tab.

Title: Re: Stop the TabPanelComponent from closing after the X is clicked.
Post by: jarry on April 23, 2018, 11:37:00 PM

You can custom the tab panel header. Define your own 'closeTab' method to close the panel.

Code:

<eui-tab-panel #p1>
	<ng-template euiHeaderTemplate>
		<span class="tabs-title tabs-closable">tab2</span>
		<a href="javascript:;" class="tabs-close" (click)="closeTab(p1)"></a>
	</ng-template>
</eui-tab-panel>

Code:

closeTab(panel){
	panel.close();
}

Title: Re: Stop the TabPanelComponent from closing after the X is clicked.
Post by: Swany on April 24, 2018, 08:26:36 AM

Works great thank you for your help.