Function not being recognised in Angular Project

Question

I basically have a button that once pressed will output whatever has been typed into the user input.

However my function that assigns the user input to a variable isn't being recognised for some odd reason?

app.component.html:

<div style="text-align:center">
<h1>Word Hider</h1>
 <p></p>
   <input type="text" class="wordHide" value="Insert Text">
 <p></p>
   <button  id='userIn' (click)='takeUserStr()'>Submit!</button>
<p></p>
   <button>Hide Word!</button>
<div>
  Your Word Is: {{ userWord }}
</div>
</div>

app.module.ts:

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule, OnInit } from '@angular/core';


import { AppComponent } from './app.component';


  @NgModule({
     declarations: [
     AppComponent,
   ],
 imports: [
  BrowserModule
  ],
 providers: [],
 bootstrap: [AppComponent]
  })
export class AppModule {
userWord = 'this is a test';
  ********************function***********************
  takeUserStr(event: any) {
    this.userWord = (<HTMLInputElement>event.target).value;
  }

}

You have to put your function in `AppComponent`, not in the module — bugs, May 01 '18 at 09:55

score 0 · Answer 1 · answered May 01 '18 at 09:55

0

You need to have the function declared in app.component.ts , also it should not take any parameter as you defined in HTML

takeUserStr() {
    this.userWord = (<HTMLInputElement>event.target).value;
}

answered May 01 '18 at 09:55

Sajeetharan

216,225
63
350
396

Just to add, I'm now getting "Cannot read property 'target' of undefined" – May 01 '18 at 10:00
Did you add it to the app.component.ts? Like @bugs suggested? – Rukshan Dangalla May 01 '18 at 10:03
@RukshanDangalla yep! – May 01 '18 at 10:23

Pankaj Parkar · Accepted Answer · 2018-05-01T10:14:20.770

Component are isolated in nature, they only understand whats present inside their context(this), whatever you kept in the own class. In addition to that it also recognises Input + Output bindings + Injectors

You have kept your function in AppModule, which isn't reachable on your component template. You should move out that function to your app.component.ts

Basically everything that is bounded to your component html, that you have to move inside app.component.ts

@Component({...})
export class AppComponent {
  userWord = 'this is a test';

  takeUserStr(event: any) {
     this.userWord = (<HTMLInputElement>event.target).value;
  }
}

Also pass $event object as in parameter of takeUserStr function.

(click)='takeUserStr($event)'

Though my recommendation to implement this scenario using @angular/forms, either model driven or template driven forms.

Check Use ngModel with Angular

Function not being recognised in Angular Project

2 Answers2