internal javascript not works in angular2

Question

I am trying to load internal javascript in angular2. When i click on lable nothing happens. Here is my code.

      <div class="login-page" style="margin-top:12%">

      <div class="form" id="login">

        <form class="register-form">
          <h3 style="display:inline-block"><span class="glyphicon glyphicon-log-in" ></span></h3> <h1  style="display:inline-block">Sign Up</h1>
          <input type="text" placeholder="first name"/>
          <input type="text" placeholder="last name"/>
          <input type="text" placeholder="email address"/>
          <input type="password" placeholder="password"/>
          <input type="text" placeholder="mobile"/>
          <button>create</button>
          <p class="message" (click)="clicked($event)">Already registered? <a href="#">Sign In</a></p>

        </form>
        <form class="login-form">
          <h3 style="display:inline-block"><span class="glyphicon glyphicon-log-in" ></span></h3> <h1  style="display:inline-block">Login</h1>
          <input type="text" placeholder="username"/>
          <input type="password" placeholder="password"/>
          <button>login</button>

          <p class="message" (click)="clicked($event)">Not registered? <a href="#" class="message">Create an account</a></p>
        </form>
      </div>
    </div>

 import {Component} from '@angular/core';

 @Component({
  selector: 'home',
  styleUrls: ['./home.css'],
  templateUrl: './home.html'
 })
 export class Home {
 clicked(event) {
  $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
 }
}

Now, in console i am getting this error.

 [default] /var/www/ap/angular2-seed-master/src/app/home/home.ts:10:3 
 Cannot find name '$'.

Is there any thing wrong. Please suggest me.

Have you included jQuery library as its not pure java script code.. — ranjeet8082, Sep 27 '16 at 06:10
Why are you using jQuery and `$(document).ready` in an Angular app? — , Sep 27 '16 at 06:28
i want to fire that click event. so that i used it. Acutually i have simple html page. now i want to merge/convert or link with angular2. on my simple html page it works fine. with angular2 it doesn't works. should i use (click)="messagefun()" such type? — Harish Mahajan, Sep 27 '16 at 06:34

score 1 · Answer 1 · answered Sep 27 '16 at 06:25

1

Script tags in component templates are just purged without further notice.

You need to use other mechanisms like require() to add scripts to components or add it to index.html directly.

answered Sep 27 '16 at 06:25

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Sep 27 '16 at 06:26

1

I think you are trying to add javascript code inside component templates. This is not correct way to do it. Instead of it, try to do this using Angular2 way like this :

import { ElementRef } from '@angular/core';
...
constructor(private elementRef : ElementRef) {
}

ngAfterViewInit() {
    jQuery(this.elementRef.nativeElement).find('message').on('click', () => {
    //do something here
    });
}

The ElementRef class is a reference for the component itself in the DOM. So we're able to filter the search to this component.

answered Sep 27 '16 at 06:26

Hardipsinh Jadeja

1,180
1
13
30

1

Why do you want to use this : $('form').animate({height: "toggle", opacity: "toggle"}, "slow"); You can use angular animate. Ideally you should never used $ like this. Follow [angular](https://docs.angularjs.org) doc for more info – Mrugank Dhimmar Sep 27 '16 at 08:26
@Hardipsingh:- I tired your code. But in console it gives following error. Cannot find name 'jQuery'. – Harish Mahajan Oct 06 '16 at 06:09

score 0 · Answer 3 · answered Sep 27 '16 at 06:41

0

On p tag add click event. onclick="animateForm()"

In index.html file add the function

<script type="text/javascript">
  function animateForm() {
    alert("click");
      $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
}

</script>

answered Sep 27 '16 at 06:41

ranjeet8082

2,269
1
18
25

yes, i already try this. and it works. but this is not perfect solution for me. because there is more pages. – Harish Mahajan Sep 27 '16 at 06:47

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

Remember this is TypeScript and not JavaScript. Have you added the Jquery type definition file in your typings?

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

Or you can refer to this issue. On how to use Jquery with Angular 2

How to use jQuery with Angular2?

edited May 23 '17 at 11:46

Community

1
1

answered Sep 27 '16 at 07:49

rahil471

304
2
7

score 0 · Answer 5 · answered Oct 02 '17 at 07:22

Dude i have try everything and fail. But i share my solution for you :

put the jquery code outside the export class. Like this :

import {Component} from '@angular/core';
**import * as $ from 'jquery';** //THis is Important

@Component({
  selector: 'home',
  styleUrls: ['./home.css'],
  templateUrl: './home.html'
 })
 export class Home {
}


 clicked(event) {
  $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
 }

And Always remember to add : import * as $ from 'jquery';

internal javascript not works in angular2

5 Answers5

Linked