README

PmModalProject

This project extends the angular material modal to add some features:

You can choose a modal size.
Has a circular list.
You can add modals to the list and choose what modal you want to see.
You can remove any modal from the list.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Modal sizes

You can use 4 different sizes. Modal sizes are defined as an enum, PmModalSize:

PmModalSize.Auto: Automatic material resize.
PmModalSize.Small: 35vw x 35vh modal.
PmModalSize.Medium: 65vw x 65vh modal.
PmModalSize.Fullscreen: 98vw x 98vh modal.

Use it on your app

Import the PmModalModule in the module where you are going to use it:

import { BrowserModule} from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
import { TestModalComponent } from ‘./modal-test/modal-test.component’;
import { PmModalModule } from ‘pm-modal’;

@NgModule({
  declarations: [
    AppComponent,
    TestModalComponent
  ],
  entryComponents: [
    TestModalComponent
  ],
  imports: [
    BrowserModule,
    PmModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open a new modal

You have to import the PmModalService to create new modals. This method needs a ComponentFactory, PmModalSize and an optional payload:

import { PmModalSize } from ‘pm-modal’;
import { Component, ComponentFactory, ComponentFactoryResolver } from ‘@angular/core’;
import { TestModalComponent } from ‘./modal-test/modal-test.component’;
import { PmModalService } from ’pm-modal’;

@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.scss’]
})
export class AppComponent {

  constructor(
    private modalService: PmModalService,
    private factoryResolver: ComponentFactoryResolver
  ) {}

  open() {
    const factory: ComponentFactory< any> = this.factoryResolver.resolveComponentFactory(TestModalComponent);
    this.modalService.create({factory, size: PmModalSize.Auto, payload: ‘test payload 1’});
    this.modalService.create({factory, size: PmModalSize.Small, payload: ‘test payload 2’});
    this.modalService.create({factory, size: PmModalSize.Medium, payload: ‘test payload 3’});
    this.modalService.create({factory, size: PmModalSize.Fullscreen, payload: ‘test payload 4’});
  }
}

PmModalService: all you need

The PmModalService has all the methods you can use:

Create: adds a new modal.
DismissCurrent: dismisses current modal.
DismissAll: clears the modal list.
GetCurrentPayload: returns the payload of the current modal. You can use it in the inserted component.
Next: shows next modal.
Previous: shows previous modal.
Dispose: returns the modals collection.

Usage no npm install needed!