How to Customize Bold ReportViewer Toolbar to Show Only Print and Refresh Buttons in Angular

I'm using the Angular Bold ReportViewer component, which displays all the toolbar options by default. I would like to customize the toolbar to display only the "Print" and "Refresh" buttons. How can I achieve this configuration? Here is my initial code angular component and html code

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Params } from '@angular/router';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { HttpClient } from '@angular/common/http';
import { ReportviewerService } from './reportviewer.service'

@Component({
selector: 'reports-reportviewer-dialog',
templateUrl: './reports-reportviewer-dialog.component.html',
styleUrls: [],
providers: []
})

export class ReportsReportviewerDialogComponent implements OnInit {
public serviceUrl: string;
public reportPath: string;
public parameters: any;
constructor(
private ReportviewerService: ReportviewerService,
@Inject('BASE_URL') private _baseUrl: string,
private route: ActivatedRoute) {
this.serviceUrl = _baseUrl + 'api/PMISReports'
this.reportPath = this.ReportviewerService.ReportName;
this.parameters = this.ReportviewerService.Parameters;
}
onAjaxRequest(event) {
if (sessionStorage.getItem('PMIS_currentUser').length > 0) {
var token = sessionStorage.getItem('PMIS_currentUser')
event.headers.push({ Key: 'Authorization', Value: 'Bearer ' + token });
// event.headers.push({ Key: 'ReportID', Value: uuid.v4() });
}

}
ngOnInit() {

}



Here is what I have done but still not getting the desired output

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Params } from '@angular/router';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { HttpClient } from '@angular/common/http';
import { ReportviewerService } from './reportviewer.service'

@Component({
selector: 'reports-reportviewer-dialog',
templateUrl: './reports-reportviewer-dialog.component.html',
styleUrls: [],
providers: []
})

export class ReportsReportviewerDialogComponent implements OnInit {
public serviceUrl: string;
public reportPath: string;
public parameters: any;
public toolbarSettings: any ;
public exportSettings: any;
public isPrintMode: boolean;
constructor(
private ReportviewerService: ReportviewerService,
@Inject('BASE_URL') private _baseUrl: string,
private route: ActivatedRoute) {
this.serviceUrl = _baseUrl + 'api/PMISReports'
this.reportPath = this.ReportviewerService.ReportName;
this.parameters = this.ReportviewerService.Parameters;
this.isPrintMode = true;
this.toolbarSettings = {
items: ['Print', 'Refresh']
};
this.exportSettings = {
exportOptions: ['Pdf'] // Limit export options to only PDF
};


}
onAjaxRequest(event) {
if (sessionStorage.getItem('PMIS_currentUser').length > 0) {
var token = sessionStorage.getItem('PMIS_currentUser')
event.headers.push({ Key: 'Authorization', Value: 'Bearer ' + token });
// event.headers.push({ Key: 'ReportID', Value: uuid.v4() });
}

}
ngOnInit() {

}




}


HTML


<div class="p-2">
<bold-reportviewer id="dashboard" [parameters] = "parameters" (ajaxBeforeLoad)="onAjaxRequest($event)" [reportServiceUrl]="serviceUrl" [reportPath]="reportPath" style="width: 100%;height: 500px">
</bold-reportviewer>
</div>





Continue reading...