Open Closed

Angular UI blocking page mechanism during loading , saving #1203


User avatar
0
ademaygun created
  • ABP Framework version: v4.1.2
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

Does ABP(Angular) UI have a functionality after click on a button (save,load,delete) gives processing information and block some part of page with a spinning animation?


4 Answer(s)
  • User Avatar
    0
    Mehmet created

    Hi,

    You can use the abpLoading directive.

    See the usage:

    <div class="your-container" [abpLoading]="isLoading">
        some content here
    </div>
    
  • User Avatar
    0
    ademaygun created

    we tried abploading directive, it shows a very small spinner center of screen, we need blur affect like below

  • User Avatar
    0
    Mehmet created

    The directive project the LoadingComponent to the DOM. You can override classes in the LoadingComponent.

    See an example:

    .abp-loading {
      background: rgba(0, 0, 0, 0.4) !important;
    
      .abp-spinner {
        font-size: 30px !important;
        color: white;
      }
    }
    

    Add styles above to the styles.scss

    See the result:

    Or you can use a library like ngx-loading

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

    This question has been automatically marked as stale because it has not had recent activity.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 13, 2024, 06:09