CODEWITHSUNDEEP
angularbootstrap-modalpopupwindow
ani
ani

Reputation: 516

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.

Upvotes: 3

Views: 47312

Answers (2)

Noor Ahmed
Noor Ahmed

Reputation: 1617

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));
  }
}

Upvotes: 5

Ben Cameron
Ben Cameron

Reputation: 4413

Yes it is but it might be easiest to use a third party component such as PrimeNg... http://www.primefaces.org/primeng/#/dialog

It provides an easy to use popup component.

If you can't use a 3rd party component you could just use css styles to make a div act like the popup. When a button is clicked on the page you would make the div visible using *ngIf. The div would contain a button to also close the div if its visible.

You could use the css styles that are mentioned in this blog... http://www.w3schools.com/howto/howto_css_modals.asp

Upvotes: 2

Related Questions