How to listen for style changes within model init function

[codei20]

I am trying to listen to style changes. Here is my code:
`
export default (editor: any) => {
console.log('Grapesjs, adding type - '+ GJSTagNames.SectionHeader) ;

editor.Components.addType(GJSTagNames.SectionHeader, {
extend: 'react-component',
model: {
defaults: {
component: BusinessHeader,
stylable: ['background-color'],
resizable: false,
editable: false,
draggable: false,
droppable: false,
removable: false,
attributes: {
showHours: true,
},
toolbar: [],
traits: [
{
type: 'checkbox',
label: 'Show hours',
name: 'showHours',
}
]
},

  init(){
    console.log(`GrapesJS, ${GJSTagNames.SectionHeader} model initialized`);
    // @ts-ignore
    this.listenTo(this, 'style:property:update', this.handleStyleChange);
    
    // @ts-ignore
    this.listenTo(this, 'change:attributes', this.handleAttributeChange);
  },

  handleStyleChange() {
    console.log('Model Style updated ');
  },
  handleAttributeChange() {
    console.log('Model Attributes updated ');
  },      
},
isComponent: (el: { tagName: string; }) => {
    
    return el.tagName === GJSTagNames.SectionHeader.toUpperCase();
}

});
};
`
What I am looking for:
Any time I change the background-color, I want to handle the event. But my "handleStyleChange" callback is not called.

Listening to change in attribute is working.

Any help how to listen to style changes ?

[ronaldohoch]

Hello!

@gustavohleal and i are looking for a similar solution.

I have a workaround:

        init() {
            editor.on('component:styleUpdate', this.handleStyleChange);
            // this.listenTo(this, 'change:attributes', this.handleStyleChange);
        },
        handleStyleChange(model, style){
            console.log(editor.getSelected(),model,style);
            if(editor.getSelected().cid==model.cid){
              //do something
            }
        }

If Gustavo find other way we will update here.
Or also Arthur..