How to text wrap a string name

There is a string named bankAccountName that when it is too long runs into the date on a pdf report. I'm trying to figure out a way so it doesn't run into it. Would the best way be wrap that string? If so how do I do that? Is that done in the HTML or TypeScript?

Here is an image of the report with the bank account name running into the dates.



html

<report-filter-container
#filterContainer
(filtersReady)="getReport()"
(filterResults)="getReport()"
[backButton]="['/app/reports']"
[disableSubmit]="!reconciliationFilter?.filters?.reconciliationToShow"
[title]="'Bank Reconciliation'"
[submitButtonLabel]="'Load Reconciliation'">
<report-filter-reconciliation-selector #reconciliationFilter
[container]="filterContainer"
[selectedId]="selectedFromRoute"></report-
filter-reconciliation-selector>
<button class="btn btn-outline-secondary"
[disabled]="reconciliationFilter.noBankAccounts"
(click)="reconciliationFilter.reconciliationSelector.reconcileBankAccount()" >
{{ 'Reconcile Bank Account' }}
</button>
</report-filter-container>

<!-- one table with all the things -->
<div *ngIf="!isLoadingFilters" class="row footer-blue pt-3">
<div class="col-12">
<div class="card">
<div class="card-header w-100 justify-content-end d-flex">
<div *ngIf="!isLoadingReport" class="btn-group-sm text-secondary">
<button (click)="exportCSV()" class="btn btn-outline-secondary">
<i class="fa fa-download"></i>
Export
</button>
<button (click)="download()" class="btn btn-outline-secondary">
<i class="fa fa-file-pdf-o"></i>
Save as PDF
</button>
</div>
</div>

<div *ngIf="isLoadingReport" class="d-loading card-body">
<div class="loader">Loading...</div>
</div>

<div *ngIf="!isLoadingReport" class="pt-3">
<app-tabular-report
[columns]="columns"
[rows]="rows"
[subtitle]="selectedDateRange"
[summary]="summary"
[title]="'Bank Reconciliation: ' + bankAccountName"
></app-tabular-report>
</div>
</div>
</div>
</div>


ts

export class BankReconciliationComponent implements OnInit
{
@ViewChild('reconciliationFilter', {static: true}) reconciliationFilter:
ReconciliationSelectorComponent;

rows: TabularReportRow[];
columns: TabularReportColumn[];
summary: TabularReportSummary[];
reportTabs: CallbackTab[] = CloneService.clone(Tabs.ProfitVsLoss);

selectedDateRange = '';
isLoadingReport = true;
isLoadingFilters = true;

selectedFromRoute = null;
bankAccountName = '';

activeUnifiedBankAccounts: UnifiedBankAccount[] = [];

constructor(
private _reportsService: ReportsService,
private _scrollService: ScrollService,
private _csvExportService: CsvExportService,
private _activatedRoute: ActivatedRoute,
private _growler: GrowlerService,
) {
}

ngOnInit(): void {
// Scroll to top on view load.
this._scrollService.scrollToTop();
this._activatedRoute.queryParams.pipe(untilDestroyed(this)).subscribe(params => {
if (params.hasOwnProperty('reconciliationId')) {
this.isLoadingFilters = true;
this.selectedFromRoute = parseInt(params['reconciliationId'], 10);
}
});
}

getReport() {
const filters = {...this.reconciliationFilter.filters};
this.selectedDateRange = filters.reconciliationToShow?.label;
this.bankAccountName = filters.bankAccount?.friendlyName;

if (filters.reconciliationToShow) {
this.isLoadingFilters = false;
this.isLoadingReport = true;
this._reportsService.getBankReconciliationReport(false, {reconciliation:
filters.reconciliationToShow.id}).pipe(untilDestroyed(this)).subscribe({
next: (data: Object) => {
this.rows = data['rows'];
this.columns = data['columns'];
this.summary = data['summary'];

this.isLoadingReport = false;
}, error: () => {
this._growler.oops('Unable to load report data.');
},
});
}
}

download() {
const filters = {...this.reconciliationFilter.filters};
this._reportsService.getBankReconciliationReport(true, {reconciliation:
filters.reconciliationToShow?.id}).pipe(untilDestroyed(this)).subscribe({
next: (resp: any) => {
this._csvExportService.downloadFile(resp, 'bank-reconciliation.pdf',
'application/pdf');
}, error: (response: any) => {
this._growler.oops(response);
},
});
}

exportCSV() {
this._csvExportService.generateTabularReportCsv(this.columns, this.rows, 'bank-
reconciliation');
}
}

Continue reading...