Home Angular 8 Angular 9 bootstrap 4.5 popup login form

Angular 9 bootstrap 4.5 popup login form

by therichpost
0 comment

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 bootstrap popup login form.

Angular and Bootstrap combination is amazing, fast and user friendly. Also I shared, Angular Bootstrap register form.

Here are the complete steps and please do follow carefully:

1. Here are the basics commands to install angular 9 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url


2. After done with above, you need to run below commands to set bootstrap environment into your angular 9 application:

npm install --save bootstrap


3. Now you need to add below code into your angular.json file:

"styles": [
            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]


4. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


5. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angulartoastr';
  showModal: boolean;
  registerForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder) { }
    this.showModal = true; // Show-Hide Modal Check
  //Bootstrap Modal Close event
    this.showModal = false;

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]]
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
      this.showModal = false;


6. Now you need to add below code into src/app/app.component.html file:

  <div class="container">
  <h1 class="text-center">Login with bootstrap popup</h1>
  <button type="button" class="btn btn-primary" (click) = "show()">Login</button>
<!-- Creates the bootstrap modal where the image will appear -->
<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel">Login</h4>
    <div class="modal-body">
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                    <div *ngIf="f.email.errors.required">Email is required</div>
                    <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
            <div class="form-group">
                <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                    <div *ngIf="f.password.errors.required">Password is required</div>
                    <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
          <div class="form-group form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" name="remember"> Remember me
          <button type="submit" class="btn btn-primary">Submit</button>
    <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-dismiss="modal" (click) = "hide()">Close</button>


In the end, don’t forgot to run ng serve command. If you have any query then do comment below.


Thank you.

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.