I'm having trouble getting my onclick event to work in an Angular 2 application. Here is a snippet of my code:
HTML- (home.component.html): Code Snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Iroz-V3 - Sutherland Global Services</title>
<link href="../../Content/style.css" rel="stylesheet" />
<script src="../../Scripts/jquery.js"></script>
</head>
<body class="login_bg">
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div class="program-wrap">
<div class="log_wrap">
<div class="log_img"></div>
<ul class="log_list">
<li>
USER ID<br>
<input class="log_input" id="NtLogin" placeholder="NT Login ID" type="text">
</li>
<li>
PASSWORD<br>
<input class="log_input" placeholder="*******" type="password">
</li>
<li>
<input type="button" class="reset_but" value="Reset" />
<a class="india panel">
<input type="button" class="log_but" value="Login" (Click)="login_btnClick()" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
TS-(home.component.ts): TypeScript File
import { Component, OnInit} from "@angular/core";
@Component({
template: `app/Components/home.component.html`
})
export class HomeComponent implements OnInit{
ngOnInit() { }
public login_btnClick() {
console.log("function called");
alert("login");
}
}
The function is not being called and no errors are showing in the console.