Default tab items load when page loads.

Question

I have a tab control which has four tab items name called conten0,conten1,conten2,conten3. I need to show the default tab items content2 as default items to show when the user comes to the page. I tried to add the class to the tab and tab items. but facing a problem.

  ngAfterViewInit(){
   $("#tab_default").attr("aria-activedescendant","e-item_2");
      
   $("#e-item_2").addClass("e-item e-active e-content e-control e-touch");
   }

Deepa Loganathan · Answer

Hi Sarvana,  
 
 
Thank you for contacting Syncfusion support.  
 
 
You can activate a specific tab item upon initial rendering by setting the selectedItemproperty instead of adding class attributes as given in the below code.  
 
 
 
export class ResponsiveTabComponent implements ngOnInit { 
 
     
    @ViewChild('adaptiveTab')tabObj: TabComponent; 
   
  ngOnInit(): void 
    ngOnInit() { 
 
   this.tabObj.selectedItem = 2; 
    
  } 
    // Mapping Tab items Header property    
    public headerText: Object = [{ text: 'HTML' }, { text: 'C Sharp(C#)' }, { text: 'Java' }, { text: 'VB.Net' }, 
        { text: 'Xamarin' }, { text: 'ASP.NET' }, { text: 'ASP.NET MVC' }, { text: 'JavaScript' }]; 
 
     public index = 2; 
} 
 
 
We have prepared a sample based on your requirement.  
 
 
https://stackblitz.com/edit/angular-epv3yr-qvvvzm?file=responsive-modes.component.ts  
 
 
Please check and get back to us if you need any further assistance 
 
 
Regards,  
 
Deepa L.