[ANGULAR] how to add custom class to footer items

[amit.sharma]

we want to add a custom class to this HTML

<footer class="b-taskboard-card-footer" role="presentation"></footer>

config code

 footerItems: {
    margin: {
      type: 'template',
      template: ({ value }: { value: any }): string => {
        var k = `<div class="">
                        <div class="custom-tooltip margin-modal-display" data-btip-scroll-action="realign">
                            <div class="custom-tooltip-data"> £ </div> 
                            <div class="icon-container">
                                <img src="${serverURL}/assets/images/next_arrow_box_btn.svg"/>
                            </div>
                        </div>
                    </div>`;
        return k;
      },
    },
    crmStatus: {
      type: 'template',
      template: ({ value }: { value: any }): string => {
        return `<div class="b-taskboard-taskitem b-taskboard-tags b-editable" data-btip="${value?.text}"            data-role="item-crmStatus" data-field="crmStatus" data-ref="crmStatus" role="presentation" style="">
                <div class="b-taskboard-tags-tag create-new-lead ${value?.class}" role="presentation">
                  ${value?.title}
                </div>
        </div>`;
      },
    },
    activityStatus: {
      type: 'template',
      template: ({ value }: { value: any }): string => {
        const activity = ACTIVITY_TYPE[value];
        const tooltip = ACTIVITY_TOOLTIP[value];
        const notScheduledKey = Object.keys(ACTIVITY_TYPE).find(
          (key) => ACTIVITY_TYPE[key] === 'NOTSCHEDULED'
        );

    if (value === Number(notScheduledKey)) {
      return `<div class="polygon-icon" data-btip="${tooltip}" >
              <p>!</p>
              <img src="${serverURL}/assets/images/${activity.toLowerCase()}-activities.svg" />
            </div>`;
    } else {
      return `<div class="icon" data-btip="${tooltip}" >
                <img src="${serverURL}/assets/images/${activity.toLowerCase()}-activities.svg" />
              </div>`;
    }
  },
},
  },

[johan.isaksson]

Hi,

Use a taskRenderer, it lets you manipulate the DomConfig that is used to create the element for a task. Something like this:

taskRenderer({ cardConfig }) {
    cardConfig.children.footer.class['my-cls'] = true;
}

https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/TaskBoard#config-taskRenderer