akveo / akveo/nebular

NbTabComponent.active is Triggered Every Frame

Abierto
#2,368 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
8.1k
Forks
1.5k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### Issue type

**I'm submitting a ...** (check one with "x")

* [x ] bug report
* [ ] feature request

### Issue description

**Current behavior:**

There doesn't appear to be a way to set which tab (NbTabComponent) is initially active (dynamically) within an NbTabsetComponent without causing other issues.

If we use the following syntax in our template/html on a NbTabComponent selector:
```
[active]="isTabSelected('')"
```

The above component function (isTabSelected(..) ) will be called every frame - we just want a way to specify which tab is selected when the tabset is initially rendered.

If we attempt to set the active tab using code like the following:
```
this.tabsetEl.tabs.forEach( ( tab: NbTabComponent, index: number, array: any[] ) => {
if ( tab.tabTitle === previouslySelectedTab ) {
// same issue occurs if we use the following selectTab function on the NbTabsetComponent
//this.tabsetEl.selectTab( tab );
tab.active = true;
}
else{
tab.active = false;
}
} );
```

we get ExpressionChangedAfterItHasBeenCheckedError from any of the following functions:
```
ngAfterViewInit()
ngAfterContentInit()
ngAfterViewChecked()
```

If we try to use the above code in ngOnInit() - we'll get an undefined for the tabs in our NbTabSetComponent.

**Expected behavior:**

There should be a way to set which tab in a tab-set is the active tab when the page is initially rendered without having that code called every frame.

**Steps to reproduce:**

Grab the related code below and you can either see how the NbTabComponent active is being called every frame - or try using the aforementioned "set the active tab" code in any of the angular lifecycle functions and you'll see the ExpressionChangedAfterItHasBeenCheckedError error.

**Related code:**

If you'd prefer the code/templates in a stackblitz - here it is:
https://stackblitz.com/github/jvminzkz

The above link doesn't appear to work. So I downloaded the project and attached it:
[jvminzkz.github.zip](https://github.com/akveo/nebular/files/4631458/jvminzkz.github.zip)

template/html
```


some content


some other content

```

component

```

@Component( {
selector: 'my-tab-set-component',
templateUrl: './my-tab-set.component.html',
styles: []
} )
export class MyTabSetComponent implements OnInit { //}, AfterViewInit {//, AfterViewChecked {//, AfterContentInit {

@ViewChild( 'tabset', {static: true} ) tabsetEl!: NbTabsetComponent;

isTabSelected( tabTitle: string ) {
console.log( 'isTabSelected: tabTitle:', tabTitle, 'this.selectedTabTitle:', this.selectedTabTitle );
return ( this.selectedTabTitle === tabTitle );
}

}

```

### Other information:

**npm, node, OS, Browser**
```

Node, npm: `v12.16.2` and `6.14.5`
OS: macOS Mojave
Browser: Chrome
```

**Angular, Nebular**
```
Angular: 8.2.14
Nebular: 4.6.0
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.