I have upgraded my Angular version to 11. And now wherever we are using (select) event under in , the respective method in component file is not being called. Below are files:
admin.component.html
<div >
<div >
<div ><h3>Admin</h3></div>
</div>
<div>
<tabset >
<tab heading="User Access Data Files" (select)="loadUserAccessData()">
<app-userAccessData></app-userAccessData>
</tab>
<tab heading="Approval Data Files" (select)="loadApprovalData()">
<app-approvalData></app-approvalData>
</tab>
<tab heading="Archival / Purge Reports" (select)="loadArchivalData()">
<app-archivalReports></app-archivalReports>
</tab>
<tab heading="Operational Metrics" (select)="loadOperationalMetricsData()">
<app-operationalMetrics></app-operationalMetrics>
</tab>
<!-- <tab heading="Pending Approval Data" (select)="loadPendingApprovalsData()">
<app-pendingApprovalData></app-pendingApprovalData>
</tab> -->
</tabset>
</div>
</div>
admin.component.ts
import {Component, OnInit, Input, ViewChild} from '@angular/core';
import {DataService} from '../../shared/services/data.service';
import {UserAccessDataTabComponent} from "./user-access-data-tab/user-access-data-tab.component";
import {ApprovalDataTabComponent} from "./approval-data-tab/approval-data-tab.component";
import {ArchivalReportsTabComponent} from "./archival-reports-tab/archival-reports-tab.component";
import {OperationalMetricsTabComponent} from "./operational-metrics-tab/operational-metrics-tab.component";
// import {PendingApprovalDataTabComponent} from "./pending-approval-data-tab/pending-approval-data-tab.component";
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
})
export class AdminComponent implements OnInit {
@Input('config') config;
@ViewChild(UserAccessDataTabComponent, { static: true }) userAccessDataObj: UserAccessDataTabComponent;
@ViewChild(ApprovalDataTabComponent, { static: true }) approvalDataObj:ApprovalDataTabComponent;
@ViewChild(ArchivalReportsTabComponent, { static: true }) archivalReportsDataObj:ArchivalReportsTabComponent;
@ViewChild(OperationalMetricsTabComponent, { static: true }) operationMetricsObj: OperationalMetricsTabComponent;
// @ViewChild(PendingApprovalDataTabComponent) pendingApprovalsObj: PendingApprovalDataTabComponent;
constructor(private _dataService: DataService) {
}
ngOnInit() {
}
loadUserAccessData() {
this.userAccessDataObj.getUserAccessDataJSON();
}
loadApprovalData() {
this.approvalDataObj.getApprovalDataJSON();
}
loadArchivalData() {
this.archivalReportsDataObj.getArchivalReportsJSON();
}
loadOperationalMetricsData() {
this.operationMetricsObj.getOperationalMetricsDataJSON();
}
// loadPendingApprovalsData() {
// this.pendingApprovalsObj.getPendingApprovalDataJSON();
// }
}
package.json
"name": "portal",
"version": "0.0.0",
"description": "portal",
"scripts": {
"ng": "ng",
"lint": "ng lint",
"lint:fix": "ng lint portal --fix ",
"start": "ng serve",
"test:watch": "ng test --watch",
"test": "ng test --watch=false",
"test-coverage": "ng test --watch=false --code-coverage",
"test:headless": "ng test --watch=false --karma-config src/karma.phantomjs.conf.js",
"build:prod": "ng build",
"pree2e": "webdriver-manager update --proxy http://proxy.jpmchase.net:8443 --versions.chrome=2.35",
"e2e": "ng e2e --webdriver-update false",
"build:skip": "ng version",
"build:ssap": "ng build",
"build:local": "ng build",
"build:test": "ng build"
},
"author": "",
"license": "SEE LICENSE IN LICENSE.txt",
"private": true,
"dependencies": {
"@angular/animations": "11.2.14",
"@angular/cdk": "11.2.13",
"@angular/common": "11.2.14",
"@angular/compiler": "11.2.14",
"@angular/core": "11.2.14",
"@angular/forms": "11.2.14",
"@angular/platform-browser": "11.2.14",
"@angular/platform-browser-dynamic": "11.2.14",
"@angular/router": "11.2.14",
"@ct-tuxedo/angular": "5.0.0",
"@ct-tuxedo/tuxedo-bootstrap": "5.0.0",
"@fortawesome/fontawesome-free": "^5.7.2",
"@ng-idle/core": "8.0.0-beta.4",
"@ng-idle/keepalive": "8.0.0-beta.4",
"ag-grid": "^18.1.2",
"ag-grid-angular": "^18.0.1",
"angular-file-saver": "^1.1.3",
"angular-split": "^1.0.0-beta.9",
"angular-split-ng6": "^1.0.0-rc.5",
"bootstrap": "^4.4.1",
"classlist.js": "1.1.20150312",
"core-js": "2.5.4",
"deep-extend": "0.6.0",
"file-saver": "^1.3.8",
"jquery": "^3.3.1",
"ng2-dragula": "^2.1.1",
"ng2-file-upload": "^1.3.0",
"ng2-tree": "^2.0.0-alpha.10",
"ngx-bootstrap": "5.2.0",
"ngx-cookie-service": "10.0.1",
"ngx-treeview": "6.0.2",
"pdfjs-dist": "~2.5.207",
"popper.js": "^1.16.1",
"rxjs": "6.6.7",
"tslib": "^2.0.0",
"yarn": "1.22.4",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.14",
"@angular/cli": "^11.2.14",
"@angular/compiler-cli": "11.2.14",
"@angular/language-service": "11.2.14",
"@swimlane/ngx-datatable": "16.0.3",
"@types/file-saver": "0.0.1",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"sass": "^1.25.0",
"ts-node": "5.0.1",
"tslint": "~6.1.0",
"typescript": "4.0.7"
},
"resolutions": {
"**/tar": "^4.4.8",
"**/adm-zip": "^0.4.9",
"**/glob-parent": "^3.1.0",
"**/serialize-javascript": "^1.4.0",
"**/ssri": "^6.0.1",
"**/trim-newlines": "^1.0.0",
"**/ansi-regex": "^4.1.0",
"**/nth-check": "^2.0.1",
"**/set-value": "^2.0.1",
"**/unset-value": "^1.0.0",
"**/json-schema": "0.4.0",
"**/ejs": "^2.5.7",
"**/node-forge": "^0.10.0",
"**/minimist": "~0.0.1",
"**/async": "^2.6.4",
"**/scss-tokenizer": "^0.2.3"
}
}
In the above html when clicking on tab Approval Data Files, loadApprovalData() method is not getting called.
CodePudding user response：
Based on your ngx-bootstrap version
The event is renamed to (selectTab) rather than select , This was introduced from version 4 onwards 4.3.0
Releated PR
<div>
<tabset >
<tab heading="User Access Data Files" (selectTab)="loadUserAccessData()">
<app-userAccessData></app-userAccessData>
</tab>
<tab heading="Approval Data Files" (selectTab)="loadApprovalData()">
<app-approvalData></app-approvalData>
</tab>
<tab heading="Archival / Purge Reports"(selectTab)="loadArchivalData()">
<app-archivalReports></app-archivalReports>
</tab>
<tab heading="Operational Metrics" (selectTab)="loadOperationalMetricsData()">
<app-operationalMetrics></app-operationalMetrics>
</tab>
<!-- <tab heading="Pending Approval Data"
(selectTab)="loadPendingApprovalsData()">
<app-pendingApprovalData></app-pendingApprovalData>
</tab> -->
</tabset>
</div>