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.

Improve this question
5
  • What error is it reporting and has the JQuery loaded yet? Confirm that before proceeding into anything. Commented May 26, 2017 at 20:41
  • " $(...).modal is not a function" - the error which I get Commented May 26, 2017 at 20:56
  • That's because JQuery is not loaded. That's why. Commented May 26, 2017 at 21:11
  • @koech :- thank you for your comments. ... .below is my index.html I have added "<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/…>" into my index.html within the <body>..</body>. Is this the right way to load jQuery ? Commented May 26, 2017 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. Commented May 26, 2017 at 21:17

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Why using jquery? 

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

Give Angular Material dialog a try!

Improve this answer

Comments

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 $;
Improve this answer

5 Comments

tried this .. didn't work .. error message is "$(...).modal is not a function"
load it within the head of your index.htm
i tried loading this within the head section of index.html .. still I get the same error.
Sorry, I forgot to add, you need to declare var $ on your .ts file.
even after "declare var $;" before @Component decorator in app.component.ts file .. i get the same error

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.