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?

Go to accepted answer
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.

Assignee
User avatar Mehmet
Labels
ui-angular
Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11