Modal in Angular 2

This week was very hard for me, because I was a little sick, so I had no strength to work after work. But I tried to move forward with my app.

Under the assumption, the first step was to create a landing page, but later I decided to make a modal that will be used in the login/register. I said I would start with something that does not require creativity and design creation. So, I changed my plan and I built the first modal in angular 2.

So I started with installing the package:

    npm install angular2-modal --save

Later I had to configure the component and add:

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';

Class VievContainerRef represents a container where one or more Views can be attached.

In template I added:

<button (click)="onClick()">...</button>

and defined constructor:

export class AppComponent {
  constructor(overlay: Overlay, vcRef: ViewContainerRef, public modal: Modal) {
    overlay.defaultViewContainer = vcRef;
  }

I also defined onclick()

  onClick() {
    this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('Login')
        .body(`
            Zaloguj`)
        .open();
  }

I must also add something in app.module.ts

import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
@NgModule({
  imports: [ 
    ModalModule.forRoot(),
    BootstrapModalModule
  ]

And that’s it. Now I must add styles and make this app element look good.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s