This may be a stupid question, but I'm asking anyway!
I'm learning how to use Angular2, and as part of the project I'm working on there's a requirement to translate between English and other languages. I found the excellent ng2-translate, which works brilliantly to translate content in the html templates using the translate pipe.
In one part of the site there is a grid created using ad-grid-ng2. The column defs are created in the typescript component, and bound to the the HTML.
The component
export class ContactConnectionsComponent implements OnInit {
private connectionTypes: ConnectionType[];
private gridOptions: GridOptions = {};
private columnDefs = [
{ headerName: "Id", field: "id", hide: true },
{ headerName: "", field: "icon", cellRenderer: this.iconColumnRenderer, width: 32 },
{ headerName: "Type", field: "value", width: 100 },
{ headerName: this.translate.instant("Description"), field: "description", width: 400 }
]
constructor(
public modal: Modal,
private connectionTypesService: ConnectionTypesService,
private cultureService: CultureService,
private route: ActivatedRoute,
private router: Router,
private translate: TranslateService
) {
}
ngOnInit() {
this.getConnectionTypes();
this.translate.addLangs(["en", "fr"]);
this.translate.setDefaultLang('en');
let browserLang = this.translate.getBrowserLang();
this.translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
// omitted to save space
}
The html
<div class="animated fadeIn">
<span defaultOverlayTarget></span>
<select #langSelect (change)="translate.use(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>
<div class="card">
<div>
<div class="card-header">
<h6>{{ 'ContactConnections' | translate }}</h6>
<div class="btn-toolbar" align="right">
<button class="btn btn-secondary" type="button" (click)="newConnectionType()"><i class="fa fa-star"></i> {{ 'Add' }}</button>
<button class="btn btn-secondary" type="button" (click)="editConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-edit"></i> {{ 'Edit' | translate }}</button>
<button class="btn btn-secondary" type="button" (click)="deleteConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-trash"></i> {{ 'Delete' }}</button>
</div>
</div>
</div>
<br />
<div>
<ag-grid-ng2 #agGrid style="width: 100%; height: 350px" class="ag-bootstrap"
[gridOptions]="gridOptions"
[columnDefs]='columnDefs '
[rowData]="connectionTypes"
[showToolPanel]="showToolPanel"
enableColResize
groupHeaders
toolPanelSuppressGroups
toolPanelSuppressValues
headerHeight="36"
rowHeight="34"
rowSelection="single"
(rowSelected)="onRowSelected($event)"
(modelUpdated)="onModelUpdated()">
</ag-grid-ng2>
</div>
</div>
So my question is how do I get those headers to update when I change the value in the drop down? For example, if I changed the drop down from 'en' to 'fr', I would want my column header that reads 'Description' in English to change to 'La description' (bad translation, but it would be noticed!)
I've tried putting pipes on the HTML definition
[columnDefs]='columnDefs | translate'
which didn't work, and if I put it in the binding it errors.
I think I need to call an event in the component, but I'm not sure how to go about that. Can it even be done? I have seen some references suggesting that what I want to do is not possible in the current release.
Can anyone give me any pointers?