Abp-button is not working inside abp-modal when abp-modal is used inside non-standalone component #10081

3 Answer(s)

• 

  0

  AI-Bot created 5 hours ago

  Support Team ABP Agent

  1. Solution

  • Root cause: In ABP v9.2+ Angular UI packages were migrated to standalone. If your app still uses NgModule-based components, ABP Angular elements like abp-button (emitting abpClick) and abp-modal (content projection, submit wiring) will only work if their standalone imports/providers are added to your module (or component) explicitly. Using (click) works because it’s plain Angular, but abpClick is an ABP output from the ButtonComponent and requires importing the ABP button component/directives into the module where it’s used.

  • Fix: Import the ABP Angular standalone components into your module via the provided module-level re-export (for non-standalone apps), or import the components directly in a standalone component’s imports.

  For a non-standalone component declared in an NgModule:

  // app.module.ts (or a feature module where your modal component is declared)
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  // Bring ABP Angular shared directives/components into module-based apps:
  import { AbpThemeSharedModule } from '@abp/ng.theme.shared'; // re-exported compatibility module
  
  import { MyFeatureComponent } from './my-feature.component';
  
  @NgModule({
    declarations: [MyFeatureComponent],
    imports: [
      CommonModule,
      AbpThemeSharedModule, // IMPORTANT: provides abp-button, abp-modal, directives like abpClose, abpPermission, etc.
    ],
  })
  export class MyFeatureModule {}
  

  If you don’t have AbpThemeSharedModule (depending on version), import the specific components into your module via their modules (compatibility packages) or switch your component to standalone and import the components there:

  // my-feature.component.ts (standalone variant)
  import { Component } from '@angular/core';
  import { ButtonComponent } from '@abp/ng.theme.shared/components/button';
  import { ModalComponent } from '@abp/ng.theme.shared/components/modal';
  
  @Component({
    selector: 'app-my-feature',
    standalone: true,
    imports: [ButtonComponent, ModalComponent],
    template: `
      <abp-modal [(visible)]="isOpen">
        <ng-template #abpHeader>Title</ng-template>
        <ng-template #abpBody>Body</ng-template>
        <ng-template #abpFooter>
          <abp-button (abpClick)="onSubmit()">Submit</abp-button>
        </ng-template>
      </abp-modal>
    `,
  })
  export class MyFeatureComponent {
    isOpen = true;
    onSubmit() { /* ... */ }
  }
  

  • Ensure you’re using the ABP button output:

  <!-- inside modal footer/body -->
  <abp-button (abpClick)="onSubmit()" [buttonType]="'button'">
    Save
  </abp-button>
  

  • Double-check that there isn’t an overlay or disabled state blocking clicks:

    • abp-modal’s [busy] input sets the projected abpSubmit button’s loading state and prevents closing; if you set [busy]="true" permanently, clicks may appear ignored. Make sure [busy] is false when you expect interaction.
    • If your footer uses a native button with [disabled], that will bypass abpClick because it won’t fire.

  • If you are wiring form submit:

    • Either use form="form-id" with a native button and handle (ngSubmit) on the form, or use abp-button with (abpClick). Mixing disabled states can give the impression of “no click”.

  • Summary checklist for module-based app:

    1. Import AbpThemeSharedModule (or the required ABP Angular compatibility modules) in the NgModule that declares the component using abp-modal/abp-button.
    2. Use (abpClick) on abp-button.
    3. Verify [busy] and disabled states aren’t blocking the event.

  2. Sources

  • Modal usage and footer/button patterns (validated):
    • https://abp.io/docs/latest/framework/ui/angular/modal

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  JanneHarju created 5 hours ago

  There is already ThemeSharedModule in module where my component is declared. Do you have other idea how can I possible handle this without changing to standalone components?

  Save Cancel
• 

  0

  sumeyye.kurtulus created an hour ago

  Support Team Angular Expert

  Hello, I have created a modal that has an abp-button element inside. However, I could not produce the same problem on my end. That would be the best if you could provide more details on your issue.

  

  Save Cancel