Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Setter @Input binding not working after upgrading to 2.2.3 from 2.1.2 #13108

Copy link
Copy link
@michalboska

Description

@michalboska
Issue body actions

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
In a component class

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';

@Component({
	selector: 'navigation-sections',
	template: require('./navigation-sections.template.html'),
	styles: [
		require('./navigation-sections.style.scss')
	]
})

export class NavigationSectionsComponent implements OnInit {
	@Input() sections:Array<string>;
	private _selectedSection: number;
	@Output() onSelectSection = new EventEmitter<number>();

	constructor () {}

	ngOnInit(): void {
		if (!this._selectedSection) {
			this._selectedSection = 0;
		}
	}

	get selectedSection():number{
		return this._selectedSection;
	}

	@Input("selectedSection")
	set selectedSection(value:number){
		console.log("Setter called");
        this._selectedSection=value;
	}

	selectNavigationSection(value:number,event): void{
		if (event.currentTarget.classList.contains('complete')) {
		 	this.onSelectSection.emit(value);
		 	this._selectedSection = value;
		 }
	}
}

after using the component like this:

<navigation-sections [sections]="sections"
							 [selectedSection]="selectedSection"
							 (onSelectSection)="onSelectSection($event)">
		</navigation-sections>

following error is thrown:

error_handler.js:48 EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'selectedSection' since it isn't a known property of 'navigation-sections'.
1. If 'navigation-sections' is an Angular component and it has 'selectedSection' input, then verify that it is part of this module.
2. If 'navigation-sections' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
	<div class="col-xs-12">
		<navigation-sections [sections]="sections"
							 [ERROR ->][selectedSection]="selectedSection"
							 (onSelectSection)="onSelectSection($event)">
		</naviga"): GlobalHomeTherapiesComponent@3:8

If i use the @Input annotation directly on the property (the component class looks as follows), then there is no error and property is bound successfully:

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';

@Component({
	selector: 'navigation-sections',
	template: require('./navigation-sections.template.html'),
	styles: [
		require('./navigation-sections.style.scss')
	]
})

export class NavigationSectionsComponent implements OnInit {
	@Input() sections:Array<string>;
	private _selectedSection: number;
	@Input()
	private selectedSection:number = 0;
	@Output() onSelectSection = new EventEmitter<number>();

	constructor () {}

	ngOnInit(): void {
		if (!this._selectedSection) {
			this._selectedSection = 0;
		}
	}

	selectNavigationSection(value:number,event): void{
		if (event.currentTarget.classList.contains('complete')) {
		 	this.onSelectSection.emit(value);
		 	this._selectedSection = value;
		 }
	}
}

Expected behavior
Setter @Input binding should work as per https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/icPStVKWyT4cNSHxYvU3?p=preview

Please tell us about your environment:

  • OS: Win10

  • Package manager yarn, npm

  • Angular version: 2.2.3

  • Browser: all

  • Language: TypeScript 2.1.1

  • Node (for AoT issues): node --version = 4.4.2

Reactions are currently unavailable

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimeIssues related to the framework runtime

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.