Display parts of string bolded in kendo-expansionpanel title

[Missing User]

Hello everyone, I have a kendo-expansionpanel defined like this:

  <kendo-expansionpanel gdArea="filters" [title]="expandedState ? initialPannelTitle : pannelTitleFilters" [(expanded)]="expandedState">

- initialPannelTitle is a simple string that doesn't need to be formatted

- pannelTitleFilters is a string that consists of multiple key: values, here's an example of how it can look (style included):

EXTRA: ALL - Initial state: executed - STAINING: all - acceptance date: today - location: milan

I've been asked to make everything that specifies the filter bold, so the result would be something like:

EXTRA: ALL - INITIAL STATE: EXECUTED - STAINING: ALL - ACCEPTANCE DATE: TODAY - LOCATION: MILAN

I am struggling to find a way to do that: [innerHTML] instead of [title] breaks the component, as it removes the styles and it doesn't make possible to expand or collapse the panel.

NOTE: the string is generated using the function below, so it'd be possible for me to put some "special characters" (eg: **) to surround the parts that need to be bolded, but I didn't find any pipe that would make the text bolded without the use of innerHTML. How can I solve this?

    for (let [key, value] of Object.entries(obj)) {
      // Filter out falsey values
      if (Boolean(value)) {
        // Manage multiselect string
        if (Array.isArray(value)) {
          let tmp = value.join();
          // Truncate string if it exceeds max length
          if (tmp.length > maxStringLenght) {
            value = tmp.substring(0, maxStringLenght).concat('...');
          } else {
            value = tmp;
          }
        }
        // eg: LOCATION: MILAN - 
        title += `${key}: ${value}${separator}`
      }
    }
    // Remove last separator
    return title.trim().substring(0, title.length - 2);
  }

[Preslava]

Hi Marco,

The ExpansionPanel component provides an option for customizing its title. This can be done through the use of ExpansionPanelTitleDirective, like this:

<ng-template kendoExpansionPanelTitleDirective>
     <div class="header-content">
          <kendo-icon name="globe"></kendo-icon>
          <span>Colombia</span>
     </div>
</ng-template>

Here is an example demonstrating this approach:

https://stackblitz.com/edit/angular-49npaj?file=app/app.component.ts

More information on this topic can be found here:

https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/title/#toc-title-template

I hope this helps. Let me know how this goes.

Regards,
Preslava
Progress Telerik

[Missing User]

Hello Preslava. Thanks for your answer. I was able to solve my problem!

I'll leave my solution here in case anyone else finds themselves in the same situation: 

Step 1: I modified the function that creates the string in this way

title += `<b>${key}</b>: ${value}${separator}`

Step 2: I changed my panel to this:

  <kendo-expansionpanel [(expanded)]="expandedState">
    <ng-template kendoExpansionPanelTitleDirective>
      <div class="k-pannel-title" [innerHTML]="expandedState ? initialPannelTitle : pannelTitleFilters"></div>
    </ng-template>
    .... // other stuff here
  </kendo-expansionpanel>

So, [innerHTML] converts the <b> to bold and removes every style from the string, but by adding the class="k-pannel-title" to the div, I can simply re-apply the styles I want without any problem!

Thanks again and have a nice day :)