undefined Output should show error in the parent template

Which @angular/* package(s) are relevant/releated to the feature request?

core

Description

I believe I have all the template strict checks enabled, and I was expecting to have a template error at my parent component telling me that my child component does not have certain output if there is a typo in its name.

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Output() outputFromChild = new EventEmitter<string>();
}

<app-child (outputFromChildWithATypo)="handleOutputAtParent($event)"></app-child>

Proposed solution

The compiler should warn about a non-existing output in the component element.

Alternatives considered

Please let me know if this error check already exists, I may just be missing enabling it. I tried googling for it but could not find anything relevant.

[JoostK]

There is indeed a gap in type-checking here. The misnamed output does have a valid target though: the app-child DOM element that is rendered. We don’t currently check output against the DOM schema, so any unknown output is not reported.

You can partially workaround using "strictDomEventTypes": true, as that would have made $event of the DOM’s native Event type.

[ippeiukai]

Just an idea:

Like attributes ([attr.foo]) vs input properties ([foo]) , we could

• bind (event.click) to DOM events
• bind (click) to ‘click’ output property only (in future, but only deprecate DOM event usage for a while)
• add an angularCompilerOption to strictly detect unknown output property (opt-in for existing projects for a while)

Thoughts behind: Checking against DOM schema would be impractical given that custom DOM events of any arbitrary name can be dispatched by any library. Especially interoperability with WebComponents may be of concern as CustomEvents are one of their primary interface. Having separate syntax (pseudo binding) for DOM event names would be much more beneficial.