import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID, ViewChild, AfterViewInit, Input, TemplateRef, ElementRef, ContentChildren, QueryList, ContentChild, ChangeDetectorRef, OnChanges } from '@angular/core';
import { TabComponent, TabModule } from '@syncfusion/ej2-angular-navigations';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-orb-frame-tab-menu',
imports: [TabModule, CommonModule],
templateUrl: 'orb-frame-tab-menu.component.html',
styleUrls: ['orb-frame-tab-menu.component.scss']
})
export class OrbFrameTabMenuComponent implements OnChanges {
@Input() aba1!: any;
@Input() aba2!: any;
@ViewChild('hiddenTab', { static: false }) tabObj!: TabComponent;
public tabs: any[] = [];
public headerText: any[] = [
{ 'text': 'Tabela' },
{ 'text': 'Formulario' }
];
constructor(private cdr: ChangeDetectorRef) {}
ngOnChanges() {
this.cdr.detectChanges();
}
onTabCreated(event: any): void {
const tabElement = document.getElementById('hiddenTab');
if (tabElement) {
// Remove listeners de touch/mouse que causam swipe
tabElement.addEventListener('touchstart', (e) => e.stopImmediatePropagation(), true);
tabElement.addEventListener('touchmove', (e) => e.stopImmediatePropagation(), true);
tabElement.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);
tabElement.addEventListener('mousemove', (e) => e.stopImmediatePropagation(), true);
}
}
// Adiciona uma nova aba dinamicamente
addTab(tabTitle: string, tabContent: TemplateRef<any>, code: any) {
const newTab = {
header: { 'text': tabTitle },
content: tabContent,
index: code
};
this.headerText.push(newTab.header);
this.tabs.push(newTab);
// Retorna o índice da nova aba
return this.headerText.length - 1;
}
// Remove uma aba pelo índice
changeTab(code: any) {
const tabIdx = this.tabs.findIndex(tab => tab.index === code);
if (tabIdx !== -1 && this.tabObj) {
this.tabObj.selectedItem = tabIdx;
}
}
// Remove uma aba com base no "index" (code)
removeTab(code: any) {
const tabIdx = this.tabs.findIndex(tab => tab.index === code);
if (tabIdx !== -1) {
this.headerText.splice(tabIdx, 1);
this.tabs.splice(tabIdx, 1);
this.cdr.detectChanges();
}
}
getOpenTabs(): any {
return this.tabs;
}
}
<ejs-tab #hiddenTab id="hiddenTab" cssClass="hidden-tab" [animation]='{ previous: { effect: "None" }, next: { effect: "None" } }' (created)="onTabCreated($event)">
<e-tabitems>
<!-- Abas dinâmicas -->
<e-tabitem *ngFor="let tab of tabs; let i = index" [header]='tab.header'>
<ng-template #content>
<div class="content-item">
<ng-template [ngTemplateOutlet]="tab.content"></ng-template>
</div>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
