Using modals is one of the most popular UX concepts, which almost every application uses. In most cases, we’ll open the modal only when a user triggers a specific action.

If we think about it, it would be a waste to add the modal’s code to our initial bundle, because each client would have to download and parse it, even though they probably wouldn’t have cause to use it.

A better course of action would be to lazy load the modal’s code when the user initiates the action. Let’s see how easy it is to do that with Ivy:

import { Dialog } from '@ngneat/dialog';

@Component({
  template: `<button (click)="openModal()">Manage</button>` 
})
class UsersComponent {

  constructor(private dialog: Dialog) {}

  async openModal() {
    const { UsersManagerComponent } = import(
      /* webpackPrefetch: true */ 
      './users-manager/users-manager.component'
    );
  
    this.dialog.open(UsersManagerComponent);
  }
}

#angular #javascript #developer