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.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 19, 2025, 10:09