Angular 2 popup window


I am trying to create a popup window which asks for login details on button click.

my app.component looks like

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: `mytemplate.html`
 })
export class AppComponent {}

in index.html i referred to jquery and bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

mytemplate.html:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="login-form">
<div class="modal-body">

<input id="username"  type="text" placeholder="Username" >
<input id="password" type="password" placeholder="Password">

</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>

</div>
</form>
</div>

</div>

</div>
</div>

This works perfectly for me . but i want to know is it possible to do the same purely Using angular2-modal ? if so can someone guide me how to do so.


Answers:


I have used angular2/modal and its good. You have to create a custom modal window to achieve the output of upper code. Place your Login code in a separate component (login.component.ts) and then use this component as a custom modal.

Follow this plunker: http://embed.plnkr.co/mbPzd8/ . Be sure to use [email protected] and add the angular2-modal module in your AppModule after installing.

Create a Login component with the following ts and template:

    import { Component } from '@angular/core';
    import { DialogRef, ModalComponent, CloseGuard } from 'angular2-modal';
    import { BSModalContext } from 'angular2-modal/plugins/bootstrap';

    @Component({
      selector: 'login',
      styles: [],
      template: `<div class="modal-content">
                 <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Login</h4>
                 </div>
                 <div class="modal-body">
                 <form id="login-form">
                 <div class="modal-body">

                 <input placeholder="Username" [(ngModel)]="model.username" name="username" #username="ngModel" required>
                </input>
                  <input placeholder="Password" [(ngModel)]="model.password" name="password" #password="ngModel" required>
                </input>

                </div>
                <div class="modal-footer">
                <div>
                <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
                </div>`
    })
    export class LoginModal implements CloseGuard, ModalComponent<CustomModalContext> {
      context: CustomModalContext;

      public username: string;
      public password: string;

      constructor(public dialog: DialogRef<CustomModalContext>) {
        this.context = dialog.context; // this is the dialog reference
        dialog.setCloseGuard(this);
      }
    }

And now in app component, lets call this modal window.

import { Component } from '@angular/core';
import { LoginModal } from './login.component.ts';
import { Overlay, overlayConfigFactory } from 'angular2-modal';
import { Modal, BSModalContext } from 'angular2-modal/plugins/bootstrap';

@Component({
  selector: 'my-app',
  template: `<button (click)="openLoginDialog()">Login Modal</button>`
 })
export class AppComponent {
  constructor(public modal: Modal) {
  }

  openLoginDialog() {
    return this.modal.open(LoginModal,  overlayConfigFactory({}, BSModalContext));
  }
}