NbTabComponent.active is Triggered Every Frame
- 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
Evaluación
Este issue todavía no se ha evaluado.