title: Login Form In Angular Using Modal [Bootstrap]
body: <p>I am a newbie to Angular, and I am using bootstrap for the Ui. Now I am stuck at a point. I have to create a login form in angular and I want it to be a modal. I am using a separate component for the login modal.
  I have a header component which has the button, and the login component with the modal body. So my main question is how do I open the logincomponent (as a modal) by button click in the header component.</p>
  
  <p>Header Component:
  Html:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
    &lt;a class="navbar-brand" href="#"&gt;{{ title }}&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
      aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item" routerLinkActive="active"&gt;
          &lt;a class="nav-link" routerLink="/home"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" routerLinkActive="active"&gt;
          &lt;a class="nav-link" routerLink="/about"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" routerLinkActive="active"&gt;
          &lt;a class="nav-link" routerLink="/menu"&gt;Menu&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" routerLinkActive="active"&gt;
          &lt;a class="nav-link" routerLink="/contact"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="navbar-nav ml-auto"&gt;
        &lt;li class="nav-item mr-2"&gt;
          &lt;a class="nav-link" (click)="openLoginForm()" data-toggle="modal"
            data-target="#staticBackdrop"&gt;Login&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" (click)="openSignUpForm()"&gt;Sign Up&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="jumbotron jumbotron-fluid"&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="display-4" style="font-weight: 400;"&gt;{{ title }}&lt;/h1&gt;
      &lt;p class="lead"&gt;We take inspiration from the World's best cuisines and create a unique fusion experience. Our
        lipsmacking creation will tickle your culinary senses!&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { LoginComponent } from '../login/login.component';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
    title = 'Restaurant';
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    openLoginForm(): void {}
  
    openSignUpForm(): void {}
  
  }
  </code></pre>
  
  <p>Login Component: 
  Html file:</p>
  
  <pre><code>&lt;div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
      aria-labelledby="staticBackdropLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="staticBackdropLabel"&gt;Modal title&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  ...
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Understood&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor() {}
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>