ng2-translate

using ng2-translate to translate ag-grid-ng2 column headers

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>&nbsp; {{ 'Add' }}</button>
                <button class="btn btn-secondary" type="button" (click)="editConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-edit"></i>&nbsp; {{ 'Edit' | translate }}</button>
                <button class="btn btn-secondary" type="button" (click)="deleteConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-trash"></i>&nbsp; {{ '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?

Solution

  • You can see the ag-grid angular examples (Rich Grid with markup) on ag-grid site. In this example in header.component.ts change

    <div class="customHeaderLabel">params.displayName</div>

    to

    <div class="customHeaderLabel">{{params.displayName | translate}}</div>

    and in rich-grid-declarative.component.html change

    <ag-grid-column headerName="Name" field="name" [width]="150" [pinned]="true" ></ag-grid-column>

    to

    <ag-grid-column headerName="HEADER.NAME" field="name" [width]="150" [pinned]="true" ></ag-grid-column>

    where 'HEADER.NAME' id for translated string in i18n translation files (e.g. en.json, fr.json, ...)