3

I am working on an angular2 project and I have 2 components namely: home and first.

My home.component.html is as below :-

<div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand">Angular 2</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">

            <li>
              <a routerLink="Home">Home</a>
            </li>
            <li>
              <a routerLink="First">First</a>
            </li>

          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li><a href="#" data-toggle="modal" data-target="#login-modal" (click)="myFunc()">Login</a></li>
          </ul>

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

    <div class = "container">
      <router-outlet></router-outlet>
    </div>

<!-- Modal -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
          <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Login to Your Account</h1><br>
                  <form>
                    <input type="text" name="user" placeholder="Username">
                    <input type="password" name="pass" placeholder="Password">
                    <input type="submit" name="login" class="login loginmodal-submit" value="Login">
                  </form>

                  <div class="login-help">
                    <a href="#">Register</a> - <a href="#">Forgot Password</a>
                  </div>
                </div>
            </div>
          </div>

What I want to do is :

Whenever the user opens the website, the login-modal should show first. If the user is not logged-in, clicking on any link (Home,First or Login) should open the login-modal.

My problem is that I am not able to open the login modal, even when I click the "Login" link. Below is the content of my app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';

  ngOnInit(){
    alert("Loaded");
  }

  myFunc(){
   $("#login-modal").modal('show');
  }
}

I am able to get the alert but not the modal.

Please help.

UPDATE - adding my index.html

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>ClientApp</title>
  <base href="/">
  <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

With this I can see the modal but it show and disappears immediately.

Shiv Baral
  • 409
  • 4
  • 11
  • 18
  • What error is it reporting and has the JQuery loaded yet? Confirm that before proceeding into anything. – koech May 26 '17 at 20:41
  • " $(...).modal is not a function" - the error which I get – Shiv Baral May 26 '17 at 20:56
  • That's because JQuery is not loaded. That's why. – koech May 26 '17 at 21:11
  • @koech :- thank you for your comments. ... .below is my index.html I have added "" into my index.html within the ... Is this the right way to load jQuery ? – Shiv Baral May 26 '17 at 21:13
  • As long as you load the minified version of it it shouldn't be any problem because you're browser will cache that for you which is great. Some people are opinionated about this but I think it's just ok. – koech May 26 '17 at 21:17

3 Answers3

3

To make the modal display upon user first visiting the component:

Component's TS file:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
@ViewChild('openModal') openModal:ElementRef;

title = 'app works!';

ngOnInit(){
 this.openModal.nativeElement.click();
}

Component's HTML file:

<button id="openModal" #openModal [hidden]="true" 
 data-toggle="modal" data-target="#login-modal"></button>

This will open the modal upon the user first visiting the page. You'll have a ghost button that the user can not see, but will be activated by using this.openModal.nativeElement.click(). Lots of possiblities using this method to open the modal.

To open the same modal when the user clicks the login button:

HTML:

<li><a href="#" data-toggle="modal" data-target="#login-modal" 
(click)="myFunc()">Login</a></li>

TS: 

myFunc(){
  this.openModal.nativeElement.click();
}

This may not be the most elegant solution, but it definitely works and I use it quite often.

Jordan Cotton
  • 31
  • 3
1

Why using jquery? 

$("#login-modal").modal('show');

Give Angular Material dialog a try!

Uder Moreira
  • 865
  • 6
  • 17
  • 33
0

Add jquery cdn to the head of your index.html. Something like this:

<script
 src="https://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>

Don't forget to declare var $ at the top of your .ts file before @Component decorator .i.e.

declare var $;
koech
  • 566
  • 1
  • 5
  • 15