Angular how to redirect to a tab

Question

I have a page which has got 5 tabs. There is another page which contains the links pointing to these tabs. Whenever a user clicks a link on this page, corresponding tab should be opened on angular application page.

The tab are working fine when user manunally clicks on a tab but I am unable to find how can I select a tab by default.

Add in app.js:

$routeProvider.when('/trend', {
    templateUrl:'partials/trend.html'
}).when('/deepdive', {
    templateUrl:'partials/deepdive.html'
}).when('/driversNdrainers', {
    templateUrl:'partials/DriversNDrainers.html'
}).when('/timeline', {
    templateUrl:'partials/timeline.html'
}).otherwise("/trend");

index page:

<div header></div>
<div class="row">    
<div class = "col-md-12" ng-include="'partials/home.html'"></div> 
</div>
<div footer></div>

The home controller creates the tabs dynamically. Home.html

<div class="" fade-in ng-controller="HomeCtrl">
<ul class="nav nav-pills">
  <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}"  id="{{tab.id}}"
  ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>
<div ng-view></div>`enter code here`

Controller:

var homectrl = myApp.controller('HomeCtrl', ['$scope', '$routeParams', '$location','$state', function ($scope, $routeParams,$location,$state) { $scope.tabs = [ { link : '#/trend', label : 'Trend', id: "trendLink"}, { link : '#/deepdive', label : 'Deep Dive' , id:"deepdriveLink"}, { link : '#/driversNdrainers', label : 'Drivers & Drainers', id:"ddLink" }, { link : '#/timeline', label : 'Timeline' , id: "timelineLink"}, { link : '#/zoomin', label : 'Zoom In', id: "zoominLink" } ];

$scope.selectedTab = $scope.tabs[0];    

$scope.setSelectedTab = function(tab) {
    $scope.selectedTab = tab;
};

$scope.tabClass = function(tab) {
    return $scope.selectedTab == tab? "active": "";
};
angular.element(document).ready(function () {
   $.each($scope.tabs,function(i){
    if(this.link==location.hash){
        $scope.setSelectedTab(this);
        //$state.go("/trend");
        return;
    } 
});
});

}]);

What I see here is that the tab is selected but the content inside tab is not loaded.

Answer 1

Your code inside jQuery is not executed in Angular's digest cycle. Try adding $scope.$apply(); right after $scope.setSelectedTab(this);

To understand why you should do this read: "Scope Life Cycle" at https://docs.angularjs.org/guide/scope

Answer 2

Here is the solution you can refer to stackblitz

I had to do some modification in its function to achieve the result as per my requirement.

modified solution:

moveToSelectedTab(tabName: string) {

for (let i = 0; i < document.querySelectorAll('[aria-selected]').length; i++) {
  let element = document.querySelectorAll('[aria-selected="false"]')[i];
  if (element != undefined) {
    if ((<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).innerHTML == tabName) {
      (<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).click();
      
    }
  }
}}  

HTML

<ul class="nav nav-tabs" id="editorTab" role="tablist">
  <li class="nav-item active" role="presentation">
    <a class="nav-link active" id="bannerArea-tab" data-toggle="tab" href="#bannerArea" role="tab"
       aria-controls="bannerArea" aria-selected="true">General Information</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="cardArea-tab" data-toggle="tab" href="#cardArea" role="tab"
       aria-controls="cardArea" aria-selected="false">Banner Content</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="mainArea-tab" data-toggle="tab" href="#mainArea" role="tab"
       aria-controls="mainArea" aria-selected="false">Main Content</a>
  </li>
</ul>
<div class="tab-content" id="editorTabContent">
  <div class="tab-pane fade show active col-sm-12" id="bannerArea" role="tabpanel" aria-labelledby="bannerArea-tab">
     <div class="form-group">
      
    </div>
    <div class="text-right margin-top-xl">
     
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('Banner Content')">Next<i class="material-icons">arrow_forward</i></button>
    </div>
  </div>
  <div class="tab-pane fade show active col-sm-12" id="cardArea" role="tabpanel" aria-labelledby="cardArea-tab">
    <div class="form-group">
      
    </div>
    
    <div class="text-right margin-top-xl">
     
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('Main Content')">Next<i class="material-icons">arrow_forward</i></button>
    </div>
  </div>
  <div class="tab-pane fade col-sm-12" id="mainArea" role="tabpanel" aria-labelledby="mainArea-tab">
    
    <div class="text-right margin-top-xl">
      <button class="btn-icon-confirm" (click)="moveToSelectedTab('General Information')"><i class="material-icons">check</i></button>
    </div>
  </div>
</div>