NGXF
  • 🚀Introduction
  • Get Started
    • Why
    • Installation
  • Concepts
    • Introduction
  • Features
    • Activated Route
    • Call
    • Init
    • Lazy
    • Keep Alive
    • Timeout
    • Track By Key
    • Repeat
    • Virtual Scroll
  • Server Interaction
    • Async
    • Cookies
    • Http
    • Socket.IO
  • Hooks
    • State Hook
    • Effect Hook
    • Reducer Hook
  • Recompose
    • Compose
  • API
    • NgxfModule
    • HttpDirective
    • RouteDirective
    • InitDirective
    • ComposeDirective
    • ReturnDirective
    • TimeoutDirective
    • CookiesDirective
    • AsyncDirective
    • LazyDirective
    • CallPipe
  • Recipes
    • Caching
    • Style Guide
  • Community
    • FAQ
    • Contributing
Powered by GitBook
On this page
  • 🔥Effect Hook in Template
  • 🔥 Effect Hook with Ivy
  1. Hooks

Effect Hook

It is how useEffect hook would look in Angular.

🔥Effect Hook in Template

An example in COMPONENT.component.ts.

@Component({
  selector: 'app-use-effect',
  templateUrl: './use-effect.component.html'
})
class Host {
  effect() {
    console.log('Lol');
    return () => {
      console.log(`I'm died!`);
    };
  }
}

An example in COMPONENT.template.html.

<ng-container *useEffect="effect; on [x]">
  Hello world!
</ng-container>

🔥 Effect Hook with Ivy

An example in COMPONENT.component.ts.

function effect() {
  console.log('Lol');
  return () => {
    console.log(`I'm died!`);
  };
}

@Component({
  selector: 'app-use-effect',
  template: ''
})
@UseEffect(effect, ['x'])
class Host {
  public x: string;
}
PreviousState HookNextReducer Hook

Last updated 6 years ago