Declaring Typed Function Input Properties on Our Angular Component | Task

Ole Ersoy
Mar - 29  -  1 min

Scenario

We have a fs-toolbar-menu component that has a logout menu item. When the user clicks the logout we want to call a function that is provied via the components AuthService constructor injected service.

<fs-toolbar-menu [logout]="this.a.logout"></fs-toolbar-menu>

Approach

Declared the property like this:

@Input()
logout: () => void

Constructor inject the AuthService like this (This is done in the component that uses the fs-toolbar-menu it its view - for example this could be app.component.ts):

constructor( public a: AuthService ) { }

Bind the logout property to the AuthService.logout function.

[logout]="this.a.logout"></fs-toolbar-menu>