Execute custom Javascript function on button click in Angular 4

Question

I am beginner in Angular 4 and writing a login component in Angular 4. On click of a Forgot password I want to flip the controls on page to show Reset password elements. I have a javascript function created called rotateCard(this) which I want to call on button click. It is inline javascript in html. I have added html in component.html. below is the code.

but it is giving error as "ReferenceError: rotateCard is not defined"

<form (ngSubmit)="doLoginUser()" #login="ngForm" >

    <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card-container manual-flip">
                <div class="card">
                    <div class="front">
                        <div class="content">
                            <div class="main">
                                <img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
                                <form>
                                    <div class="form-group">
                                        <input type="text" class="form-control crm-field" placeholder="Email"
                                        id="inputEmail" name="username" ngControl="username" required
                                        autofocus [(ngModel)]="username">                                        
                                    </div>                                   
                                    <div class="form-group">
                                        <input type="password" class="form-control crm-field" name="password" placeholder="Password"
                                        id="inputPassword" ngControl="password" required [(ngModel)]="password">
                                    </div>                                   
                                    <button type="button" class="btn btn-primary btn-block orange-btn">LOGIN</button>
                                </form>
                                <button class="btn btn-simple login-link" onClick="rotateCard(this)">
                                    Forgot Password
                                </button>
                            </div>
                        </div>
                    </div> <!-- end login -->
                    <div class="back">
                        <div class="content">
                            <div class="main">
                                <img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
                                <p class="title">Forgot Password</p>
                                <form>
                                    <div class="form-group">
                                        <input type="text" class="form-control crm-field" name="email" placeholder="Email">
                                    </div>
                                    <button type="button" class="btn btn-primary btn-block orange-btn">RESET PASSWORD</button>
                                </form>
                                <button class="btn btn-simple login-link" onClick="rotateCard(this)">
                                    Login
                                </button>
                            </div>
                        </div>
                    </div> <!-- end forgot password -->
                </div> <!-- end card -->
            </div> <!-- end card-container -->
        </div> <!-- end col md 5 -->
    </div> <!-- end row -->
    <div class="space-200"></div>
    </div>

</form>

<script src="../../../../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../../../js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function rotateCard(btn){
        var $card = $(btn).closest('.card-container');
        console.log($card);
        if($card.hasClass('hover')){
            $card.removeClass('hover');
        } else {
            $card.addClass('hover');
        }
    }
</script>

Answer 1

I was able to resolve this in 3 steps.

1. I changed binding to (click)="rotateCard(this).
2. Added type="button" property to button.
3. Installed jquery through npm install and added those in to angular-cli.json

This helped loading the jquery and now the inner method written in component.ts is getting called.

Thank you everyone for responding.