Augmenting the title of a JqxDocking window

Question

I was looking at the documentation for the JqxDocking Angular component, located here: https://www.jqwidgets.com/angular-components-documentation/documentation/jqxdocking/angular-docking-api.htm?search=

I was trying to find a means to dynamically edit containers in a JqxDocking Component

The issue I currently have is that a window cannot have a title assigned a property.

<div>{{title}}</div>

which creates issues when it comes to localization. I cant abstract away the string to say:

<div>{{ title | translate }}</div>

Below is a sample I was working with.

<jqxDocking #docking [orientation]='"horizontal"' [width]="'100%'" [mode]="'docked'" [theme]="'dark'">
    <div> <!-- 1ST column -->
        <div id="window1" style="height: 270px;">
            <div>My Title!</div>
            <div>Sample Content!</div>
        </div>
    </div>
</jqxDocking>

The above works to display a little container. The issue I have run into like i said was localization. So it i wanted do either assign it to a property, OR translate it with a pipe, it will not work.

class MyComponent implements OnInit {
    title: string = "My Title"
    @ViewChild('docking') jqxDocking: jqxDockingComponent;
    constructor(private translate: TranslationService){}
    ngOnInit(){}
}

and in the markup, would update from <div>My Title!</div> to <div>{{title}}</div>

It seems that what may be happening is the the Docking Component uses the information on load but never subscribes to anything, so once it is set, it is set.

This does not work for me as I need to have it be more dynamic.

I was hoping there was a property I could leverage, or a method such that I could look up and augment the Windows currently leveraged JqxDocking.

Has anyone encountered similar and how did you resolve it?

Answer 1

Since the Dom structure is required, you wont be able to add components, as much as add directives, since a component will adjust the dom.

On a per component basis though, I created a setter/getter for the input title string.

@Input() set title (value : string){
  this._title = value;
  this._setText();
}
get title () { return this._title; }
_title: string = "";

private _setText() {
  this.host.nativeElement.children[0].textContent = this.translate.instant(this._title);
}

constructor(private host: ElementRef, private translate: TranslateService) { }

That way, the correct location is updated, and it happens whenever the title changes.