javascript in Angular 4

Question

I am using angular 4 in visual studio code. I want to include a javascript function in my code .

home.component.html

 <html>
 <body>

 <button onclick="myFunction()">Click me</button>

 <p id="demo"></p>

 <script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
  </script>

</body>
</html>

But when i clicking on the button, then its showing error : "Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick"

you don't need html tag inside your component and angular has a way to implement events. Check this:angular.io/guide/user-input — Chellappan வ
– Chellappan வ, Commented Oct 30, 2018 at 4:40

Monarth Sarvaiya · Accepted Answer · 2018-10-30 04:57:06Z

1

You can also use script file into your angular project.

create js file and put your script code into it, and put that js file into assets folder.
Now goto root directory of your angular app, there you can find a file name .angular-cli.json

Now edit that file, find "scripts" and write "script": ["assets/your_script_file.js"].

Now you can call the functions written in that script in your html file.

answered Oct 30, 2018 at 4:57

Monarth Sarvaiya

1,1268 silver badges21 bronze badges

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

Comments

score 0 · Accepted Answer · 2018-10-30 04:54:48Z

0

You dont need to write javascript code in HTML file in angular.

There is seprate typescript file withextension .ts where you can put your javascript code in typescript style.

Use below structure for above code in angular :

home.component.html

 <button (click)="myFunction()">Click me</button>
 <p>{{demo}}</p>

home.component.ts

import {Component} from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: []
})
export class AppComponent {
 public demo: string;

myFunction(){
this.demo="Hello World";
}
}

Code online :https://stackblitz.com/edit/angular-gwrvbn?file=src%2Fapp%2Fapp.component.ts

edited Oct 30, 2018 at 4:54

answered Oct 30, 2018 at 4:47

user6299088

Collectives™ on Stack Overflow

javascript in Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related