{"id":12691,"date":"2025-07-10T05:21:43","date_gmt":"2025-07-10T05:21:43","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12691"},"modified":"2025-07-10T05:23:47","modified_gmt":"2025-07-10T05:23:47","slug":"error-typeerror-is-not-a-function-in-angular-6","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/error-typeerror-is-not-a-function-in-angular-6","title":{"rendered":"Angular 6: ERROR TypeError is Not a Function"},"content":{"rendered":"

Here are general reasons why the error TypeError: “x.y is not a function” can occur in Angular or JavaScript, even if the function appears to be implemented:<\/p>\n

1. Incorrect Context (this)<\/h3>\n

The method loses its binding to the original object, often due to how it’s passed or used (e.g. in a callback or event handler).<\/p>\n

2. Object Is Not Initialized Properly<\/h3>\n

The object (x in x.y) is undefined or incorrectly assigned, so the method doesn\u2019t exist on it at runtime.<\/p>\n

3. Method Not Available on the Actual Object<\/h3>\n

Even though the method is implemented in a class, the instance being used is not of that class or is a plain object missing the method.<\/p>\n

4. Typographical Error<\/h3>\n

There may be a typo in the method name when it’s being called, or a mismatch in casing.<\/p>\n

5. Method Not Bound or Declared Properly<\/h3>\n

The function may be declared incorrectly \u2014 for example, as a standalone function instead of as a method within a class, so it\u2019s not available on the object.<\/p>\n

6. Asynchronous Timing Issue<\/h3>\n

The object or component is not fully initialized (e.g., data is not yet loaded), so the method isn\u2019t present when accessed.<\/p>\n

Here is the code which has issue<\/p>\n

class:<\/strong><\/p>\n

\r\nexport class Device {\r\n id: number; \r\ndeviceID: string; \r\nname: string; \r\nlocation: string;\r\ndeviceType: string;\r\n subType: string; \r\nvalueNamingMap: Object; \r\naddKeysToObj(deviceValues: object): void {\r\n    for (let key of Object.keys(deviceValues).map((key) => { return key })) {\r\n         if (!this.valueNamingMap.hasOwnProperty(key)) {\r\n              this.valueNamingMap[key] = '';\r\n       }\r\n          console.log(this, deviceValues);\r\n     }\r\n}\r\n<\/pre>\n
And that is the call:<\/strong><\/p>\n
\r\nexport class BatterieSensorComponent implements OnInit { \r\n@Input() device: Device; \r\npublic result: Page = new Page(); \/\/[..] \r\nngOnInit() { \r\n   this.valueService.list('', this.device).subscribe( res => { \r\n   console.log(this.device); \/\/ NEW edit 1 \r\n   This.result = res; if (this.result.count > 0) {            this.device.addKeysToObj(this.result.results[0]); \r\n} } ) \r\n} \r\n}\r\n<\/pre>\n
Solution : <\/h3>\n
Add this method to ensure any object passed in becomes a full Device instance with methods:<\/p>\n
\r\nexport class Device {\r\n  id: number;\r\n  deviceID: string;\r\n  name: string;\r\n  location: string;\r\n  deviceType: string;\r\n  subType: string;\r\n  valueNamingMap: Object = {};\r\n  addKeysToObj(deviceValues: object): void {\r\n    for (let key of Object.keys(deviceValues)) {\r\n      if (!this.valueNamingMap.hasOwnProperty(key)) {\r\n        this.valueNamingMap[key] = '';\r\n      }\r\n    }\r\n    console.log(this, deviceValues);\r\n  }\r\n  static fromPlain(obj: Partial): Device {\r\n    return Object.assign(new Device(), obj);\r\n  }\r\n}\r\n<\/pre>\n
Use Device.fromPlain() before calling any methods<\/strong> on the device input.<\/p>\n
\r\nexport class BatterieSensorComponent implements OnInit {\r\n  @Input() device: Device;\r\n  public result: Page = new Page();\r\n  ngOnInit() {\r\n    \/\/ Ensure the `device` is a true Device instance\r\n    this.device = Device.fromPlain(this.device);\r\n    this.valueService.list('', this.device).subscribe(res => {\r\n      this.result = res;\r\n      if (this.result.count > 0) {\r\n        this.device.addKeysToObj(this.result.results[0]);\r\n      }\r\n    });\r\n  }\r\n}\r\n<\/pre>\n
\"Also
<\/p>
Also Read:<\/h3>Angular Hydration<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
Here are general reasons why the error TypeError: “x.y is not a function” can occur in Angular or JavaScript, even if the function appears to be implemented: 1. Incorrect Context (this) The method loses its binding to the original object, often due to how it’s passed or used (e.g. in a callback or event handler). […]<\/p>\n","protected":false},"author":1,"featured_media":12692,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-12691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12691"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12691"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12691\/revisions"}],"predecessor-version":[{"id":12694,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12691\/revisions\/12694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12692"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}