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
– ranjeet8082, Commented Sep 27, 2016 at 6:10
Why are you using jQuery and $(document).ready in an Angular app? — user663031
– user663031, Commented Sep 27, 2016 at 6: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
– Harish Mahajan, Commented Sep 27, 2016 at 6:34

Günter Zöchbauer · Accepted Answer · 2016-09-27 06:25:13Z

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, 2016 at 6:25

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hardipsinh Jadeja · Accepted Answer · 2016-09-27 06:26:35Z

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, 2016 at 6:26

Hardipsinh Jadeja

1,3191 gold badge16 silver badges34 bronze badges

2 Comments

Mrugank Dhimmar Over a year ago

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 doc for more info

Harish Mahajan Over a year ago

@Hardipsingh:- I tired your code. But in console it gives following error. Cannot find name 'jQuery'.

ranjeet8082 · Accepted Answer · 2016-09-27 06:41:35Z

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, 2016 at 6:41

ranjeet8082

2,3891 gold badge21 silver badges26 bronze badges

1 Comment

Harish Mahajan Over a year ago

yes, i already try this. and it works. but this is not perfect solution for me. because there is more pages.

Community · Accepted Answer · 2017-05-23 11:46:47Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered Sep 27, 2016 at 7:49

rahil471

3143 silver badges7 bronze badges

Comments

Andre Ramadhan · Accepted Answer · 2017-10-02 07:22:08Z

0

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';

answered Oct 2, 2017 at 7:22

Andre Ramadhan

4272 silver badges14 bronze badges

Collectives™ on Stack Overflow

internal javascript not works in angular2

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related