Ensures that output bindings are not aliased
-
Type: suggestion
-
🔧 Supports autofix (
--fix
) -
💡 Provides suggestions on how to fix issues (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions)
The rule does not have any configuration options.
The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.
❌ - Toggle examples of incorrect code for this rule
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
outputs: ['a: b']
~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
inputs: ['abort'],
'outputs': [boundary, `test: copy`],
~~~~~~~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
['outputs']: ['orientation: orientation'],
~~~~~~~~~~~~~~~~~~~~~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
[`outputs`]: ['orientation: orientation'],
~~~~~~~~~~~~~~~~~~~~~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component()
class Test {
@Custom() @Output(`change`) _change = getOutput();
~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive()
class Test {
@Output('change') change = (this.subject$ as Subject<{blur: boolean}>).pipe();
~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
selector: 'foo'
})
class Test {
@Output('fooColor') colors: string;
~~~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
'selector': 'foo'
})
class Test {
@Output('foocolor') color: string;
~~~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
selector: 'kebab-case',
})
class Test {}
@Injectable()
class Test {
@Output('kebab-case') blur = this.getOutput();
~~~~~~~~~~~~
}
✅ - Toggle examples of correct code for this rule
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Page({
outputs: ['play', popstate, `online`, 'obsolete: obsol', 'store: storage'],
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component()
class Test {
change = new EventEmitter();
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive()
class Test {
@Output() buttonChange = new EventEmitter<'change'>();
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
outputs,
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
outputs: [...test],
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
outputs: func(),
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
outputs: [func(), 'a'],
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({})
class Test {
@Output() get getter() {}
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
const change = 'change';
@Component()
class Test {
@Output(change) touchMove: EventEmitter<{ action: 'click' | 'close' }> = new EventEmitter<{ action: 'click' | 'close' }>();
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
const blur = 'blur';
const click = 'click';
@Directive()
class Test {
@Output(blur) [click]: EventEmitter<Blur>;
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
selector: 'foo[bar]'
})
class Test {
@Output() bar: string;
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
selector: '[foo], test',
})
class Test {
@Output('foo') label: string;
}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
selector: 'foo',
hostDirectives: [{
directive: CdkMenuItem,
outputs: ['cdkMenuItemTriggered: triggered'],
}]
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
selector: 'foo',
'hostDirectives': [{
directive: CdkMenuItem,
outputs: ['cdkMenuItemTriggered: triggered'],
}]
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Component({
selector: 'foo',
['hostDirectives']: [{
directive: CdkMenuItem,
outputs: ['cdkMenuItemTriggered: triggered'],
}]
})
class Test {}
{
"rules": {
"@angular-eslint/no-output-rename": [
"error"
]
}
}
@Directive({
selector: 'foo'
})
class Test {
@Output('fooMyColor') myColor: string;
}