Ref with TypeScrip

Help Requests
1

hello everybody,
I am experiencing a problem with the following code

-app.html

<template> <h1 view-model.ref="test" click.delegate="testAlert">${message}</h1> </template>

-app.ts

export class App { message = 'Hello World!'; testAlert(){ alert(this.test.textContent) } }

in the app.ts, I get this error “[ts] the property test does not exist in app”

When I create the same project using JavaScript instead of TypeScript, everything works correctly. Is there a bug in TypeScript that prevents me from using ref or is there something that I am not doing correctly?

Please Help

2

You’re seeing an error reported by the TypeScript compiler. When using JavaScript there is no compiler so you wont get an error. This is one of the pros of TypeScript!

The test property does not appear to exist in your App class so the compiler is correct by the looks of it.

1 Like
3

You need to add test as a property, something like this.

export class App {
  message = ‘Hello World!’;
  test: HTMLElement;
  testAlert(){
    alert(this.test.textContent)
  }
}

It would be nice if it “discovered” it somehow but you need to tell it.

1 Like
5

Try changing your binding to this click.delegate="testAlert()" and see if that does the trick. Also, you’ll want to add the test property to your view model as others have stated.

1 Like
6

Thanks, your suggestion worked

7

Thanks for the help. I appreciate your advice and assistance