I try to understand why this code doesn't work in angular

HTML:

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

TYPESCRIPT

@Component({
  selector: 'app-create',
  templateUrl: './createponent.html',
  styleUrls: ['./createponent.css']
})

export class CreateComponent {

  constructor() {}

}


function myFunction(hello: string) {
  console.log(hello);
}

The error in console when I click

Uncaught ReferenceError: myFunction is not defined
    at HTMLButtonElement.onclick (create:1)
onclick @ create:1

I know, (click) works perfect, but i need understand why cant use pure javascript in angular project

PLEASE don't put me -1 I Am learning, Am not perfect =(

I try to understand why this code doesn't work in angular

HTML:

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

TYPESCRIPT

@Component({
  selector: 'app-create',
  templateUrl: './create.ponent.html',
  styleUrls: ['./create.ponent.css']
})

export class CreateComponent {

  constructor() {}

}


function myFunction(hello: string) {
  console.log(hello);
}

The error in console when I click

Uncaught ReferenceError: myFunction is not defined
    at HTMLButtonElement.onclick (create:1)
onclick @ create:1

I know, (click) works perfect, but i need understand why cant use pure javascript in angular project

PLEASE don't put me -1 I Am learning, Am not perfect =(

• javascript
• html
• angular
• typescript

5 Answers 5

Yes, just like any other event.

<button (click)=”handleClick($event)” type=”button”>Button</button>

handleClick(event: Event) {
  console.log(‘Click!’, event)
}

Angular CLI builds your code with webpack under the hood. Each ts file is transpiled by TypeScript to js and all code in this js file has separated scope.

So your myFunction is not globally available. It is not created as window.myFunction property.

Anyway you can try defining that function as a window property manually and this should work:

window['myFunction'] = function myFunction(hello: string) {
  console.log(hello);
}

Per angular docs

When writing a binding, be aware of a template statement's execution context. The identifiers in a template statement belong to a specific context object, usually the Angular ponent controlling the template

Per MDN web docs

The onclick property of the GlobalEventHandlers mixin is the EventHandler for processing click events on a given element.

Conclusion => It es down to encapsulation or scope. When onclick is used, the browser attempts to find myFunction() in the global context where it does not exist since it is registered in the ponent scope. Thus, pure javascript is allowed in angular. Angular is just trying to "help" in this instance.

You need to define myFunction inside the createComponent class because when you click, then the function bind to the event would be searched in the ponent class instead of the whole ts file.

Please use like this;

HTML page

<button (click)="myFunction('hello')">Click me</button>

TypeScript - CreateComponent

Note: Define myFunction inside the createComponent class

myFunction(hello: string) {
    console.log(hello);
}

Important: Please note that ,you can write plain old JavaScript in a TypeScript project without any problems since JavaScript is a subset of TypeScript ,you only need some steps if you are planning to use an external JavaScript library with TypeScript.

Read this : https://www.techiediaries./use-external-javascript-libraries-typescript-projects/