Call function that's within ngAfterViewInit from outside ngAfterViewInit

Issue

As the title suggests, I'm trying to call a function that is within ngAfterViewInit from outside of it. I can't move the function as it uses HTML elements that are only available once ngAfterViewInit has fired.

So, ideally this would work (but it doesn't):

ngAfterViewInit(): void {
  --stuff--
  function foo() {
    --do stuff--
  }
}

public DoSomething() {
  --more stuff--
  foo();
}

Solution

If you want to use the this keyword in the function, you'll want an arrow function:

foo?: () => void;

ngAfterViewInit(): void {
  --stuff--
  this.foo = () => {
    //`this` refers to the component
    --do stuff--
  }
}

public DoSomething() {
  --more stuff--
  if (this.foo) this.foo();
}

Answered By - Chris Hamilton