Angular two way data binding in child componentAngular2 two-way data bindingPerformance: Two way data binding using @Input and getters/settersAngular HTML bindingWhy does Angular 2 binding not work in this case? (sub component input field)Angular 2 - how to pass data to a child component without rendering the child component twice?Angular NgModel two-way binding unit testHow to pass value from parent component to child in routing: Angular 2Pass data to file child.component.ts file not child templateAngular 5 - get all component names with order number for a given page/viewAngular 4 select box two way data bindingHow to pass formarray to other componentDoes @Input give a two way binding?
Can I submit a paper computer science conference using an alias if using my real name can cause legal trouble in my original country
Why did St. Jerome use "virago" in Gen. 2:23?
What is the evidence on the danger of feeding whole blueberries and grapes to infants and toddlers?
Designing a prison for a telekinetic race
Unbiased estimator of exponential of measure of a set?
How do we test and determine if a USB cable+connector is version 2, 3.0 or 3.1?
Saying something to a foreign coworker who uses "you people"
Is "stainless" a bulk or a surface property of stainless steel?
Sinc interpolation in spatial domain
awkward stretchy fingering
What happened after the end of the Truman Show?
Why Won't my Serial Read value stay the same
Repurpose telephone line to ethernet
Why don't politicians push for fossil fuel reduction by pointing out their scarcity?
How can I train a replacement without letting my bosses and the replacement knowing?
Number of matrices with bounded products of rows and columns
Check disk usage of files returned with spaces
Radix2 Fast Fourier Transform implemented in C++
Why should P.I be willing to write strong LOR even if that means losing a undergraduate from his/her lab?
How impossible would a bioluminescent plant-based lifeform be?
Why do balloons get cold when they deflate?
How to detect a failed AES256 decryption programmatically?
Are unaudited server logs admissible in a court of law?
Land Registry Clause
Angular two way data binding in child component
Angular2 two-way data bindingPerformance: Two way data binding using @Input and getters/settersAngular HTML bindingWhy does Angular 2 binding not work in this case? (sub component input field)Angular 2 - how to pass data to a child component without rendering the child component twice?Angular NgModel two-way binding unit testHow to pass value from parent component to child in routing: Angular 2Pass data to file child.component.ts file not child templateAngular 5 - get all component names with order number for a given page/viewAngular 4 select box two way data bindingHow to pass formarray to other componentDoes @Input give a two way binding?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I'm trying to do two way databinding using the banana in box sytax, and I need to pass a value down to a component (compone) then to another component (comptwo) where it will be edited.
My expectation was that the binding will enable the changes to be reflected in the app.component. However, I'm unable to do this.
I've used the example from this stackoverflow response, although it is not the voted answer to the question. I've seen this being represented in other blogs.
I've created a stackblitz of my issue. I'm just after help and possible explanation of what I'm doing wrong ?
Edited : to include code snippets from stackblitz:
App.Component.ts
export class AppComponent
public _Name = 'Angular';
app.component.html
From app.component.html : _Name
compone.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
compone.component.html
...
<p>
compone works!
<app-comptwo [(Name)]="_Name"></app-comptwo>
_Name
</p>
...
comptwo.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
comptwo.component.html
...
<p>
comptwo works! <input [(ngModel)]="_Name">
_Name
</p>
...
As it can be seen above, app.component is where the field originates from. It is passed into compone, and then into comptwo. Comptwo component is where the field is being modified via an input tag.
angular asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
add a comment |
I'm trying to do two way databinding using the banana in box sytax, and I need to pass a value down to a component (compone) then to another component (comptwo) where it will be edited.
My expectation was that the binding will enable the changes to be reflected in the app.component. However, I'm unable to do this.
I've used the example from this stackoverflow response, although it is not the voted answer to the question. I've seen this being represented in other blogs.
I've created a stackblitz of my issue. I'm just after help and possible explanation of what I'm doing wrong ?
Edited : to include code snippets from stackblitz:
App.Component.ts
export class AppComponent
public _Name = 'Angular';
app.component.html
From app.component.html : _Name
compone.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
compone.component.html
...
<p>
compone works!
<app-comptwo [(Name)]="_Name"></app-comptwo>
_Name
</p>
...
comptwo.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
comptwo.component.html
...
<p>
comptwo works! <input [(ngModel)]="_Name">
_Name
</p>
...
As it can be seen above, app.component is where the field originates from. It is passed into compone, and then into comptwo. Comptwo component is where the field is being modified via an input tag.
angular asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
2
Although you provided stackblitz which is very good also please provide some code here
– Reza
Mar 27 at 14:18
Hi good point, I avoided adding the code here because at times StackOverflow complains that there is more code than an explanation.
– user3836415
Mar 28 at 0:35
add a comment |
I'm trying to do two way databinding using the banana in box sytax, and I need to pass a value down to a component (compone) then to another component (comptwo) where it will be edited.
My expectation was that the binding will enable the changes to be reflected in the app.component. However, I'm unable to do this.
I've used the example from this stackoverflow response, although it is not the voted answer to the question. I've seen this being represented in other blogs.
I've created a stackblitz of my issue. I'm just after help and possible explanation of what I'm doing wrong ?
Edited : to include code snippets from stackblitz:
App.Component.ts
export class AppComponent
public _Name = 'Angular';
app.component.html
From app.component.html : _Name
compone.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
compone.component.html
...
<p>
compone works!
<app-comptwo [(Name)]="_Name"></app-comptwo>
_Name
</p>
...
comptwo.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
comptwo.component.html
...
<p>
comptwo works! <input [(ngModel)]="_Name">
_Name
</p>
...
As it can be seen above, app.component is where the field originates from. It is passed into compone, and then into comptwo. Comptwo component is where the field is being modified via an input tag.
angular asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
I'm trying to do two way databinding using the banana in box sytax, and I need to pass a value down to a component (compone) then to another component (comptwo) where it will be edited.
My expectation was that the binding will enable the changes to be reflected in the app.component. However, I'm unable to do this.
I've used the example from this stackoverflow response, although it is not the voted answer to the question. I've seen this being represented in other blogs.
I've created a stackblitz of my issue. I'm just after help and possible explanation of what I'm doing wrong ?
Edited : to include code snippets from stackblitz:
App.Component.ts
export class AppComponent
public _Name = 'Angular';
app.component.html
From app.component.html : _Name
compone.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
compone.component.html
...
<p>
compone works!
<app-comptwo [(Name)]="_Name"></app-comptwo>
_Name
</p>
...
comptwo.component.ts
...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
this._Name = value;
this.NameChange.emit(value);
get Name():string
return this._Name;
...
comptwo.component.html
...
<p>
comptwo works! <input [(ngModel)]="_Name">
_Name
</p>
...
As it can be seen above, app.component is where the field originates from. It is passed into compone, and then into comptwo. Comptwo component is where the field is being modified via an input tag.
angular angular asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
edited Mar 28 at 0:46
user3836415
asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
asked Mar 27 at 14:07
user3836415user3836415
4005 silver badges16 bronze badges
4005 silver badges16 bronze badges
2
Although you provided stackblitz which is very good also please provide some code here
– Reza
Mar 27 at 14:18
Hi good point, I avoided adding the code here because at times StackOverflow complains that there is more code than an explanation.
– user3836415
Mar 28 at 0:35
add a comment |
2
Although you provided stackblitz which is very good also please provide some code here
– Reza
Mar 27 at 14:18
Hi good point, I avoided adding the code here because at times StackOverflow complains that there is more code than an explanation.
– user3836415
Mar 28 at 0:35
2
2
Although you provided stackblitz which is very good also please provide some code here
– Reza
Mar 27 at 14:18
Although you provided stackblitz which is very good also please provide some code here
– Reza
Mar 27 at 14:18
Hi good point, I avoided adding the code here because at times StackOverflow complains that there is more code than an explanation.
– user3836415
Mar 28 at 0:35
Hi good point, I avoided adding the code here because at times StackOverflow complains that there is more code than an explanation.
– user3836415
Mar 28 at 0:35
add a comment |
1 Answer
1
active
oldest
votes
If you are using setter/getter, you have to bind events to them (in this case Name, not directly to model field (_Name). Getters/setters wont be called otherwise if you are binding to private _Field as you are literally bypassing setters.
https://stackblitz.com/edit/angular-awlpfh
Result of using propert bindings:
Edited:
compone.component.html is altered from :
<app-comptwo [(Name)]="_Name"></app-comptwo>
to this:
<app-comptwo [(Name)]="Name"></app-comptwo>
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
ah, ok. i see the difference incompone.component.htmlandcomptwo.component.html. thank you!
– omikes
Mar 27 at 16:05
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55379259%2fangular-two-way-data-binding-in-child-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you are using setter/getter, you have to bind events to them (in this case Name, not directly to model field (_Name). Getters/setters wont be called otherwise if you are binding to private _Field as you are literally bypassing setters.
https://stackblitz.com/edit/angular-awlpfh
Result of using propert bindings:
Edited:
compone.component.html is altered from :
<app-comptwo [(Name)]="_Name"></app-comptwo>
to this:
<app-comptwo [(Name)]="Name"></app-comptwo>
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
ah, ok. i see the difference incompone.component.htmlandcomptwo.component.html. thank you!
– omikes
Mar 27 at 16:05
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
|
show 2 more comments
If you are using setter/getter, you have to bind events to them (in this case Name, not directly to model field (_Name). Getters/setters wont be called otherwise if you are binding to private _Field as you are literally bypassing setters.
https://stackblitz.com/edit/angular-awlpfh
Result of using propert bindings:
Edited:
compone.component.html is altered from :
<app-comptwo [(Name)]="_Name"></app-comptwo>
to this:
<app-comptwo [(Name)]="Name"></app-comptwo>
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
ah, ok. i see the difference incompone.component.htmlandcomptwo.component.html. thank you!
– omikes
Mar 27 at 16:05
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
|
show 2 more comments
If you are using setter/getter, you have to bind events to them (in this case Name, not directly to model field (_Name). Getters/setters wont be called otherwise if you are binding to private _Field as you are literally bypassing setters.
https://stackblitz.com/edit/angular-awlpfh
Result of using propert bindings:
Edited:
compone.component.html is altered from :
<app-comptwo [(Name)]="_Name"></app-comptwo>
to this:
<app-comptwo [(Name)]="Name"></app-comptwo>
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
If you are using setter/getter, you have to bind events to them (in this case Name, not directly to model field (_Name). Getters/setters wont be called otherwise if you are binding to private _Field as you are literally bypassing setters.
https://stackblitz.com/edit/angular-awlpfh
Result of using propert bindings:
Edited:
compone.component.html is altered from :
<app-comptwo [(Name)]="_Name"></app-comptwo>
to this:
<app-comptwo [(Name)]="Name"></app-comptwo>
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
edited Mar 28 at 6:00
user3836415
4005 silver badges16 bronze badges
4005 silver badges16 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
answered Mar 27 at 14:19
AntoniossssAntoniossss
18.5k2 gold badges26 silver badges61 bronze badges
18.5k2 gold badges26 silver badges61 bronze badges
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
ah, ok. i see the difference incompone.component.htmlandcomptwo.component.html. thank you!
– omikes
Mar 27 at 16:05
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
|
show 2 more comments
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
ah, ok. i see the difference incompone.component.htmlandcomptwo.component.html. thank you!
– omikes
Mar 27 at 16:05
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
what file contains the changed code? i am curious about how this works.
– omikes
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
template files.
– Antoniossss
Mar 27 at 15:45
ah, ok. i see the difference in
compone.component.html and comptwo.component.html. thank you!– omikes
Mar 27 at 16:05
ah, ok. i see the difference in
compone.component.html and comptwo.component.html. thank you!– omikes
Mar 27 at 16:05
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Since it solves the issue, you can mark it as acceppted.
– Antoniossss
Mar 27 at 18:40
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
Hi @Antoniossss thanks for your help with this. So as I understand the in Compone template you are using the Input set/get (<app-comptwo [(Name)]="Name"></app-comptwo>) from Compone instead of the model field. Do you know of any resources that goes in depth into how this is all working - I'm still struggling to understand the roles of the getter/setter and EventEmitter.
– user3836415
Mar 28 at 0:31
|
show 2 more comments
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55379259%2fangular-two-way-data-binding-in-child-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Although you provided stackblitz which is very good also please provide some code here
– Reza
Mar 27 at 14:18
Hi good point, I avoided adding the code here because at times StackOverflow complains that there is more code than an explanation.
– user3836415
Mar 28 at 0:35