If I have something like this:

import { Component, output } from '@angular/core';

@Component({...})
export class MyComponent {
  success= output<{message: string, response: SomeModelNotExported}>;
}

I am currently doing a Type extraction via indexed access and conditional inference

 onSuccess(event: MyComponent['success'] extends OutputEmitterRef<infer T> ? T : never) { // type is inferred here as {message: string, response: SomeModelNotExported} 
    ...
 }

It just looks too bloody. Is there a more friendlier approach to this? Am I missing some already available types exported by Angular?

If I have something like this:

import { Component, output } from '@angular/core';

@Component({...})
export class MyComponent {
  success= output<{message: string, response: SomeModelNotExported}>;
}

I am currently doing a Type extraction via indexed access and conditional inference

 onSuccess(event: MyComponent['success'] extends OutputEmitterRef<infer T> ? T : never) { // type is inferred here as {message: string, response: SomeModelNotExported} 
    ...
 }

It just looks too bloody. Is there a more friendlier approach to this? Am I missing some already available types exported by Angular?

• angular
• typescript

• I'm curious how angular infers the raw value type from the template when you are using the $event in the output binding as well. – Alex Pappas Commented Feb 20 at 5:51

1 Answer 1

You can explicitely define a type, which accepts the generic as an input, then use this generic type across your component.

export type OutputType<T> = {
  message: string;
  response: T;
};

@Component({ selector: 'my-component', template: '' })
export class MyComponent<TResponse> {
  success = output<OutputType<TResponse>>();

  onSuccess(event: OutputType<TResponse>) {
    console.log(event.message);
  }
}