Buttons, css styles sheets not loading on hitting reload

[Cesar Smerling]

Hello, I updated to the latest the syncfusion libraries, and the styles of my icons stop working. The version of buttons is 19.3.53.

The problem appear after update, it was working fine. When I hit reload in a page of the project the styles of the button are not applied, in the devtools I cannot see them applied to the buttons, and the span for the icon also is not there. (Picture 1).
When I navigate to another url and come back the style sheets are there (Picture 2)
Why is that? What change between versions?
I attached the pictures.

Attachment: Desktop_6ff9fa03.7z

[Cesar Smerling]

I downgraded to 19.2.47 and works fine.

"@syncfusion/ej2-angular-buttons": "19.2.47",

[Gayathri KarunaiAnandam]

Hi Cesar Smerling, 

We have checked your reported query. We are unable to replicate the reported issue in the latest version 19.3.53. Please check the below code snippet. 

Code: 

<button 

             

            ejs-button 

            cssClass="e-flat" 

            [isToggle]="true" 

            [isPrimary]="true" 

            iconCss="e-btn-sb-icons e-play-icon" 

          ></button> 

          <button 

            ejs-button 

            cssClass="e-flat" 

            iconCss="e-btn-sb-icons e-open-icon" 

            [isPrimary]="true" 

            iconPosition="Right" 

          ></button> 

          <button 

            ejs-button 

            cssClass="e-flat" 

            iconCss="e-icons e-edit-icon" 

            [isPrimary]="true" 

            iconPosition="Right" 

          ></button> 

For your reference, please check the below sample link. 

Sample in 19.3.53: https://stackblitz.com/edit/angular-hdhzwd?file=package.json 

Output: 

 

Please check the sample and if you are still facing issue, kindly share the below details. 

• If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample.
• If you are using customization, please share the customization code.
• Please share the Syncfusion theme you are using.

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Gayathri K 

[Cesar Smerling]

Sorry, I cannot shared company code. And don't have the time the try an example.

Could be angular dependencies, we are using angular 11.2.13. Last version of syncfusion support angular 11?

[Gayathri KarunaiAnandam]

Hi Cesar, 

We have checked your reported query. We would like to let you know that Syncfusion supports Angular 13. Please check the below links. 

https://www.syncfusion.com/kb/12911/how-to-get-started-easily-with-syncfusion-angular-13-datagrid 

https://ej2.syncfusion.com/angular/documentation/button/getting-started/ 

We have checked your reported issue in Angular 11. But we are unable to replicate the issue. 

Package.json: 

"dependencies": { 

    "tslib": "2.3.0", 

    "zone.js": "0.11.4", 

    "@angular/forms": "11.2.13", 

    "@angular/common": "11.2.13", 

    "@angular/router": "11.2.13", 

    "@angular/compiler": "11.2.13", 

    "@angular/animations": "11.2.13", 

    "@angular/platform-browser": "11.2.13", 

    "@angular/platform-browser-dynamic": "11.2.13", 

} 

Sample: https://stackblitz.com/edit/angular-hdhzwd-m9vxhc?file=package.json 

Please check the above links and get back to us with more information based on that we will provide solution quickly. 

Regards, 

Gayathri K 

[Cesar Smerling]

Hello, I updated the base angular package to the latest (19.3.59) and now the buttons are working correctly.
I found this in the updates references, maybe this was the problem:

Common

BUG FIXES

• F170730 - Resolved Button component not properly rendered while using ncstate popover third party.

The problem is that the <span> inside the button tag is not created correctly (maybe when IconCss property is set).  Also this problem still persist in the dropdown buttons.  I manage to create an angular directive to solve the problem:

@Directive({
    selector: '[ejs-dropdownbutton]',
})
export class EjsDropdownButtonFixerDirective implements AfterViewInit {
    constructor(@Host() private ejsButton: DropDownButtonComponent, private renderer: Renderer2) {}

    ngAfterViewInit(): void {
        setTimeout(() => renderButton(this.ejsButton, this.renderer, true), 100);
    }
}

export const renderButton = (ejsButton: ButtonComponent | DropDownButtonComponent, renderer: Renderer2, isDropDown = false): void => {
    let toReRender = false;
    const cssClass = ejsButton.cssClass;
    const hasSpan = !!ejsButton.element.getElementsByTagName('span')[0];

    if (!hasSpan) {
        renderer.addClass(ejsButton.element, 'e-btn');
        ejsButton.cssClass = cssClass;
        toReRender = true;
        if (ejsButton.iconCss) {
            renderer.addClass(ejsButton.element, 'e-icon-btn');
        }
    }

    if (toReRender) {
        ejsButton.render();
        if (isDropDown) {
            const spanElement = ejsButton.element.getElementsByTagName('span')[1];
            if (spanElement) renderer.removeChild(ejsButton.element, spanElement);
        }
    }
};

I hope this helps to improve the dropdown buttons.

[Gayathri KarunaiAnandam]

Hi Cesar, 

We have validated the reported issue. In source level we wouldn’t achieve this, because we have triggered the component side initialization based on element present in the DOM. But in this case sample element is present in the DOM while clicking the toggle button, so that we have faced style missing in this case. 

Regards, 

Gayathri K