Это мой index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Concrete</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<button class="btn btn-md btn-primary" id="btn-test">Click this!</button>
</body>
</html>
Это мой app.component.ts
<app-nav></app-nav>
<div class="container-fluid">
<section class="content-wrapper">
<h1>{{title}}</h1>
<h2>asd</h2>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/heroes">Heroes</a>
</nav>
<button class="btn btn-md btn-primary" id="btn-test">Click this!
</button>
<router-outlet></router-outlet>
<app-messages></app-messages>
</section>
</div>
У меня есть файл scipt custom.js, включенный в angular.json (ранее angular-cli.json).
custom.js
$('button#btn-test').on('click',function() {
alert("success");
});
У меня также есть стили и скрипты jquery и bootstrap, включенные в angular.json.
Кнопка работала, когда находилась внутри index.html, но когда я перенес ее в app.component.html, она больше не будет работать. Почему кнопка не работает? Я пропустил какую-либо строку кодов? Нужно ли импортировать что-нибудь еще, когда я уже включил свои скрипты и стили в angular.json?
Заранее спасибо