Feature Request: Compiler verification of event binding names similar to property binding

@tbosch

I'm submitting a ...


[ ] Regression (behavior that used to work and stopped working in a new release)
[ ] Bug report 
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When parsing templates, Angular will complain if you attempt to bind to a property that isn't a known property:

`Can't bind to '${boundProp.name}' since it isn't a known property of '${elementName}'.`;

(

angular/packages/compiler/src/template_parser/template_parser.ts

Lines 740 to 751 in 5af143e

    
           let errorMsg = 
        
               `Can't bind to '${boundProp.name}' since it isn't a known property of '${elementName}'.`; 
        
           if (elementName.startsWith('ng-')) { 
        
             errorMsg += 
        
                 `\n1. If '${boundProp.name}' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.` + 
        
                 `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`; 
        
           } else if (elementName.indexOf('-') > -1) { 
        
             errorMsg += 
        
                 `\n1. If '${elementName}' is an Angular component and it has '${boundProp.name}' input, then verify that it is part of this module.` + 
        
                 `\n2. If '${elementName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.` + 
        
                 `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`; 
        
           }

)

This is really helpful when changing @Input() names on existing components. Is it possible to have similar verification for @Output() names?

cc: @tbosch

Getting runtime errors here as they're not caught by AOT. When we don't import a module containing an event binding directive, it just causes nothing to happen in production:

Example: https://stackblitz.com/edit/angular-ccug8k?file=app%2Fapp.component.html

Confirm directive:

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appConfirm]'
})
export class ConfirmDirective {

  @Output() appConfirm = new EventEmitter<boolean>();

  constructor() { }

  @HostListener('click')
  onClick() {
    const result = confirm('Are you sure?');
    this.appConfirm.next(result);
  }

}

Usage:

<button (appConfirm)="$event && hello()">Confirm greeting</button>

Relates to #3426

This is a duplicate of #3426

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Feature Request: Compiler verification of event binding names similar to property binding #17483

I'm submitting a ...

Current behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	let errorMsg =
	`Can't bind to '${boundProp.name}' since it isn't a known property of '${elementName}'.`;
	if (elementName.startsWith('ng-')) {
	errorMsg +=
	`\n1. If '${boundProp.name}' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.` +
	`\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
	} else if (elementName.indexOf('-') > -1) {
	errorMsg +=
	`\n1. If '${elementName}' is an Angular component and it has '${boundProp.name}' input, then verify that it is part of this module.` +
	`\n2. If '${elementName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.` +
	`\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.`;
	}

Feature Request: Compiler verification of event binding names similar to property binding #17483

Description

I'm submitting a ...

Current behavior

Activity

intellix commented on Jan 18, 2018

trotyl commented on Feb 17, 2018

pkozlowski-opensource commented on Oct 29, 2018

angular-automatic-lock-bot commented on Sep 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions