ng2-router-modal

Angular2 module that integrates ng-bootstrap modal with ui-router state's tree.

DISCLAIMER! this module is still under high development; If you have suggestions and or problems feel free to post them on issues.

Features

• State's tree integration: open modal with uiSref; unique URL for page with modal opened; auto close modal backtrack.
• Async callback: register callback for onClose/onDismiss at parent state controller.
• Open modal with params: open modal without State Tree / Url integration ; access parameters inside the modal the same way;

Install

npm install ng2-router-modal

and add to AppModule and initialize modal states initialization at UIRouter config function,

1@NgModule({
2  imports: [
3    ... 
4    UIRouterModule.forRoot({
5        ...
6        config: function(router: UIRouter, injector: Injector){
7            let rmService = injector.get(RmService);
8            let states = injector.get(StateService).get();
9            rmService.initModalStates(states);
10            ...
11        }
12    }),
13    ResourceModule.forRoot()
14  ],
15})

How to use

Creating a simple Modal

Start by creating a service that extends RmService. Declare the modal params with @ModalParams and action specific params with @ModalAction annotations.

1import {RmModal, ModalParams, ModalAction} from "ng2-router-modal";
2import {ThingModalComponent} from "./thing-modal.component";
3
4import {NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
5
6@Injectable()
7@ModalParams({
8    name: 'thing',
9    component: ThingModalComponent
10})
11export class ThingModal extends RmModal {
12
13    @ModalAction({})
14    create: NgbModalRef;
15    
16    @ModalAction({
17        urlParams: '{id:int}'
18    })
19    update: NgbModalRef;
20    
21}

./thing-modal.component.ts is your regular component containing the ng-bootstrap Modal:

1@Component({
2    selector: 'thing-modal',
3    templateUrl: 'thing-modal.html',
4    ... 
5})
6export class ThingModalComponent implements OnInit{
7
8    constructor(private activeModal: NgbActiveModal, private rmService: RmService, ...) {
9    }
10    
11    ngOnInit(){
12        console.log(rmService.params.id); 
13    }
14    ... 
15}

add/link the modal to an existing state (./some-module.states.ts):

1name: 'somePage',
2url: '/somepage',
3component: SomepageComponent,
4data: {
5    ...
6    modals: [
7        ThingModal
8    ]
9}
10...

Open your modal at your-website/somepage/create-thing to create a new Thing or your-website/somepage/update-thing/123 to update an existing Thing. You can update the modal pragmatically via the state names (do not forget to pass the parameters).

1<a uiSref='somePage.createThing'>New Thing</a>
2<a uiSref='somePage.updateThing' [uiParams]='{id: 123}'>Update Thing 123</a>

Subscribing for onClose/onDismiss callback

The handler is called every time the modal/action is closed/dismissed. do not forget to unsubscribe the observers

1export class SomepageComponent implements OnDestroy {
2
3    constructor(private rmService: RmService ... ){
4        this.thingCloseSub = rmService.onClose(['createThing', 'updateThing']).subscribe((thing: any) => {
5               console.log(thing)
6        });
7        
8        this.thingDismissSub = rmService.onDismiss(['createThing']).subscribe((thing: any) => {
9           console.log('user dismissed modal when creating a thing');
10        });
11        ...        
12    }
13    
14    ngOnDestroy(): void {
15        this.thingCloseSub.unsubscribe();
16        this.thingDismissSub.unsubscribe();
17    }
18}
19...

Open modal with params

Using the open method you can use the returned promise or the onClose/onDismiss methods to receive the result.

1export class NavbarComponent {
2
3    constructor(private rmService: RmService ... ){}
4    
5    openThing(): void {
6        this.rmService.open(ThingModal, 'create', {someparam: 'some value'}).then(
7                thing => (console.log(thing),
8                msg => console.log('user dismissed modal with ' + msg )
9        );
10    }
11}
12...

(in progress)