A Comprehensive Guide to Implementing Modal Dialogs in Angular 2.0

Introduction

In modern web development, modal dialogs are essential for user interactions, such as confirming actions, displaying detailed information, or collecting user input. With the release of Angular 2.0, many developers face challenges migrating from Angular 1.0, especially when integrating third-party UI libraries like Bootstrap. This article aims to provide a complete solution for implementing modal dialogs in Angular 2.0 without relying on jQuery or Bootstrap.js, using only Bootstrap CSS to preserve animations.

Core Implementation Approach

Based on the best answer, we first define a reusable modal component. This component leverages Angular's structural directives and style bindings to handle show and hide logic.

Here is a basic implementation of the modal component:

@Component({
  selector: 'app-modal',
  template: `
    <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
         [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <ng-content select=".app-modal-header"></ng-content>
          </div>
          <div class="modal-body">
            <ng-content select=".app-modal-body"></ng-content>
          </div>
          <div class="modal-footer">
            <ng-content select=".app-modal-footer"></ng-content>
          </div>
        </div>
      </div>
    </div>
  `
})
export class ModalComponent {
  public visible = false;
  public visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

In this component, we use the visible and visibleAnimate properties to control the display and animation of the modal. The show method first sets visible to true, then uses setTimeout to delay setting visibleAnimate to trigger CSS animations. The hide method does the opposite, first hiding the animation and then the modal entirely. The onContainerClicked method allows users to close the dialog by clicking on the modal background, implemented by checking the class name of the event target.

Using the Modal Component

In a parent component, we can call the modal component's methods via a template reference variable. Here is an example:

@Component({
  selector: 'app-component',
  template: `
    <button type="button" (click)="modal.show()">test</button>
    <app-modal #modal>
      <div class="app-modal-header">
        header
      </div>
      <div class="app-modal-body">
        Whatever content you like, form fields, anything
      </div>
      <div class="app-modal-footer">
        <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </app-modal>
  `
})
export class AppComponent {}

Here, we use #modal to create a template reference variable and bind (click) events to call the show and hide methods. Modal content is projected into specific slots using <ng-content>, enabling high customizability.

Styling and Animation Handling

To properly display the modal backdrop, add the following CSS:

.modal {
  background: rgba(0,0,0,0.6);
}

This code adds a semi-transparent black background to the modal overlay. Animation effects rely on Bootstrap CSS classes like fade and in, dynamically bound via Angular's [ngClass] for smooth transitions.

Support for Multiple Modals

This solution naturally supports multiple modals displayed simultaneously, with the onContainerClicked method ensuring only the top modal responds to click events. This is useful in complex applications, such as when confirming multiple actions in sequence.

Adaptation for Bootstrap 4

For developers using Bootstrap 4, change [ngClass]="{'in': visibleAnimate}" to [ngClass]="{'show': visibleAnimate}", as Bootstrap 4 updates the animation class from in to show. This highlights the solution's extensibility and adaptability to CSS framework changes.

Comparison with Other Approaches

Referencing other answers, such as using the ng2-bs3-modal library, simplifies integration but introduces external dependencies. Simple implementations based on *ngIf are straightforward but lack animation and multi-modal support. The core solution in this article strikes a good balance between flexibility, performance, and maintainability.

In-Depth Analysis: Dynamic Component Loading

The referenced article discusses a method for dynamically creating modals via a service, using ViewContainerRef and Compiler services. This approach is suitable for scenarios where modal content must be decided at runtime. For example:

export class ModalService {
  private vcRef: ViewContainerRef;
  private injector: Injector;

  create<T>(module: any, component: any, parameters?: Object): Observable<ComponentRef<T>> {
    let componentRef$ = new ReplaySubject();
    this.compiler.compileModuleAndAllComponentsAsync(module).then(factory => {
      let componentFactory = factory.componentFactories.filter(item => item.componentType === component)[0];
      const childInjector = ReflectiveInjector.resolveAndCreate([], this.injector);
      let componentRef = this.vcRef.createComponent(componentFactory, 0, childInjector);
      Object.assign(componentRef.instance, parameters);
      componentRef$.next(componentRef);
      componentRef$.complete();
    });
    return componentRef$;
  }
}

This method allows for advanced use cases, such as passing input parameters and callback functions, but increases complexity. Developers should choose between static components and dynamic loading based on project requirements.

Best Practice Recommendations

In real-world projects, it is advisable to encapsulate the modal component in a shared module for reuse across multiple feature modules. Additionally, consider using Angular's dependency injection to manage modal services, ensuring singleton patterns and ease of testing. For animation performance, avoid using setTimeout in frequently triggered functions; instead, use AnimationBuilder or optimize with CSS animations.

Conclusion

This article provides a detailed guide to implementing modal dialogs in Angular 2.0, with a strong recommendation for the dependency-free solution based on Bootstrap CSS. This approach supports custom content, multiple modal overlays, and offers excellent maintainability and performance. By incorporating dynamic component loading techniques, developers can further extend functionality to suit complex application scenarios. We hope this article serves as a practical resource for your Angular development endeavors.