Open bootstrap modal on page load angular 2

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.