Call method from another method in one class (this.function does not work)

Question

I am developing my first app in Angular and I stuck with problem even it was mentioned many times in StackOverflow and Internet pages , but in my case it does not work. Here is my shorten code :

export class PropertiesComponent implements OnInit, AfterViewInit {

  constructor(private renderer: Renderer2) {
    this.todoForm = document.getElementById('todo-form');
    this.session1 = sessionStorage.getItem('name');
    this.addInput = document.getElementById('add-input');
    this.todoList = document.getElementById('todo-list');
    this.todoItems = document.querySelectorAll('.todo-item');
    this.oldAddress = '';  
  };

  ngOnInit() {
    document.addEventListener('DOMContentLoaded', function () {
      this.todoForm.addEventListener('submit', this.addTodoItem);
      this.todoItems.forEach(item => this.bindEvents(item));
    });
    this.addresses = this.fetchUserAddreses();
  };
  createElement(tag, properties, ...children) {
    //code here
    return element;
  };

  createTodoItem(title) {
    //code here
    return listItem;
  };

  bindEvents(todoItem) {
    const editButton = todoItem.querySelector('.edit');
    const deleteButton = todoItem.querySelector('.delete');
    editButton.addEventListener('click', this.editTodoItem);
    deleteButton.addEventListener('click', this.deleteTodoItem);
  };

  addTodoItem(event) {
    //code here
  };

  editUserAddress(oldAddress: any, newAddress: any) {
    //code here
  };

  editTodoItem() {
    //code here
    const title = listItem.querySelector('.title');
    ** this.editUserAddress(this.oldAddress, title.innerText); ** //!! error this.editUserAddress(); is not a function
  };

  fetchUserAddreses() {
    //code here
  }
  addUserAddress(event: any) {
    //code here
  }
}

Problem is in this line this.editUserAddress(this.oldAddress, title.innerText); //!! error this.editUserAddress is not a function I could show my full code if needed.

You should read some tutorials because the way you get element references and bind click events is NOT Angular. Once you write some basic code, this error will also go away. — Carsten, Aug 12 '19 at 08:52

score 0 · Answer 1 · answered Aug 12 '19 at 08:29

0

Try with arrow function, which will bind the function to current instance

editTodoItem = () => {
    const title = listItem.querySelector('.title');
    this.editUserAddress(this.oldAddress, title.innerText);
}

answered Aug 12 '19 at 08:29

Sajeetharan

216,225
63
350
396

Call method from another method in one class (this.function does not work)

1 Answers1