How to detect change to a property in Angular
I have a component with a sub component timeline.
<app-timeline [(editing)]="editingDate"></app-timeline>
In the timeline component I have these properties:
@Input() editing: boolean; // <--- detect change on this
@Output() editingChange = new EventEmitter();
How can I check when a change to the editing property occurs from the timeline component? I need to emit the editing value whenever it changes.
Should I use a setter for the editing property then emit from there?
private _editing
set editing() { ... // emit }
Or is there another way? Probably a dumb question but its late and i'm tired :(
angular
asked Jan 19 at 11:55
mattmatt
587
add a comment |
I have a component with a sub component timeline.
<app-timeline [(editing)]="editingDate"></app-timeline>
In the timeline component I have these properties:
@Input() editing: boolean; // <--- detect change on this
@Output() editingChange = new EventEmitter();
How can I check when a change to the editing property occurs from the timeline component? I need to emit the editing value whenever it changes.
Should I use a setter for the editing property then emit from there?
private _editing
set editing() { ... // emit }
Or is there another way? Probably a dumb question but its late and i'm tired :(
angular
asked Jan 19 at 11:55
mattmatt
587
Refer : onChanges method, angular.io/api/core/OnChanges, this can get you which property is changed.
– Abhishek Kumar
Jan 19 at 11:58
2
Possible duplicate of How to detect when an @Input() value changes in Angular?
– Abhishek Kumar
Jan 19 at 12:01
I'm trying to send data from a component up through 2 components would it be better to use a service or should I emit through the 2 components?
– matt
Jan 19 at 12:18
making service is a better option.
– Abhishek Kumar
Jan 19 at 13:23
add a comment |
I have a component with a sub component timeline.
<app-timeline [(editing)]="editingDate"></app-timeline>
In the timeline component I have these properties:
@Input() editing: boolean; // <--- detect change on this
@Output() editingChange = new EventEmitter();
How can I check when a change to the editing property occurs from the timeline component? I need to emit the editing value whenever it changes.
Should I use a setter for the editing property then emit from there?
private _editing
set editing() { ... // emit }
Or is there another way? Probably a dumb question but its late and i'm tired :(
angular
asked Jan 19 at 11:55
mattmatt
587
I have a component with a sub component timeline.
<app-timeline [(editing)]="editingDate"></app-timeline>
In the timeline component I have these properties:
@Input() editing: boolean; // <--- detect change on this
@Output() editingChange = new EventEmitter();
How can I check when a change to the editing property occurs from the timeline component? I need to emit the editing value whenever it changes.
Should I use a setter for the editing property then emit from there?
private _editing
set editing() { ... // emit }
Or is there another way? Probably a dumb question but its late and i'm tired :(
angular
angular
asked Jan 19 at 11:55
mattmatt
587
asked Jan 19 at 11:55
mattmatt
587
asked Jan 19 at 11:55
mattmatt
587
asked Jan 19 at 11:55
mattmatt
587
asked Jan 19 at 11:55
mattmatt
587
587
Refer : onChanges method, angular.io/api/core/OnChanges, this can get you which property is changed.
– Abhishek Kumar
Jan 19 at 11:58
2
Possible duplicate of How to detect when an @Input() value changes in Angular?
– Abhishek Kumar
Jan 19 at 12:01
I'm trying to send data from a component up through 2 components would it be better to use a service or should I emit through the 2 components?
– matt
Jan 19 at 12:18
making service is a better option.
– Abhishek Kumar
Jan 19 at 13:23
add a comment |
Refer : onChanges method, angular.io/api/core/OnChanges, this can get you which property is changed.
– Abhishek Kumar
Jan 19 at 11:58
2
Possible duplicate of How to detect when an @Input() value changes in Angular?
– Abhishek Kumar
Jan 19 at 12:01
I'm trying to send data from a component up through 2 components would it be better to use a service or should I emit through the 2 components?
– matt
Jan 19 at 12:18
making service is a better option.
– Abhishek Kumar
Jan 19 at 13:23
Refer : onChanges method, angular.io/api/core/OnChanges, this can get you which property is changed.
– Abhishek Kumar
Jan 19 at 11:58
Refer : onChanges method, angular.io/api/core/OnChanges, this can get you which property is changed.
– Abhishek Kumar
Jan 19 at 11:58
2
2
Possible duplicate of How to detect when an @Input() value changes in Angular?
– Abhishek Kumar
Jan 19 at 12:01
Possible duplicate of How to detect when an @Input() value changes in Angular?
– Abhishek Kumar
Jan 19 at 12:01
I'm trying to send data from a component up through 2 components would it be better to use a service or should I emit through the 2 components?
– matt
Jan 19 at 12:18
I'm trying to send data from a component up through 2 components would it be better to use a service or should I emit through the 2 components?
– matt
Jan 19 at 12:18
making service is a better option.
– Abhishek Kumar
Jan 19 at 13:23
making service is a better option.
– Abhishek Kumar
Jan 19 at 13:23
add a comment |
2 Answers
2
active
oldest
votes
The ngOnChanges can be used exactly for this
First make sure your component implements the ngOnChanges like this
export class TimelineComponent implements OnChanges
Then implement the ngOnChanges method like this
ngOnChanges(changes: SimpleChanges) {
if (changes.editing) {
console.log(changes.editing.currentValue);
}
}
Any time any input was changed it will enter the ngOnChanges method. This is also why the if statement was added since if any other input was changed the editing property won't exist on the changes object.
For primitive values it will trigger on any change. For reference values you need to change the actual reference, just changing a property of the object you have in the input won't work.
answered Jan 19 at 14:02
JelleJelle
465110
add a comment |
I don't think you need two-way binding(again it's up to you and the requirement)
Just use property binding instead...
<app-timeline [editing]="editingDate"></app-timeline>
Whenever editing sets then you have to emit the Output()
@Output() editingChange = new EventEmitter();
public get editing(): boolean {
return this._editing;
}
@Input()
public set editing(edit: boolean) {
if (edit) {
this._editing = edit;
this.editingChange.emit("something");
}
}
answered Jan 19 at 18:00
smart74smart74
421315
add a comment |
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%2f54266806%2fhow-to-detect-change-to-a-property-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The ngOnChanges can be used exactly for this
First make sure your component implements the ngOnChanges like this
export class TimelineComponent implements OnChanges
Then implement the ngOnChanges method like this
ngOnChanges(changes: SimpleChanges) {
if (changes.editing) {
console.log(changes.editing.currentValue);
}
}
Any time any input was changed it will enter the ngOnChanges method. This is also why the if statement was added since if any other input was changed the editing property won't exist on the changes object.
For primitive values it will trigger on any change. For reference values you need to change the actual reference, just changing a property of the object you have in the input won't work.
answered Jan 19 at 14:02
JelleJelle
465110
add a comment |
The ngOnChanges can be used exactly for this
First make sure your component implements the ngOnChanges like this
export class TimelineComponent implements OnChanges
Then implement the ngOnChanges method like this
ngOnChanges(changes: SimpleChanges) {
if (changes.editing) {
console.log(changes.editing.currentValue);
}
}
Any time any input was changed it will enter the ngOnChanges method. This is also why the if statement was added since if any other input was changed the editing property won't exist on the changes object.
For primitive values it will trigger on any change. For reference values you need to change the actual reference, just changing a property of the object you have in the input won't work.
answered Jan 19 at 14:02
JelleJelle
465110
add a comment |
The ngOnChanges can be used exactly for this
First make sure your component implements the ngOnChanges like this
export class TimelineComponent implements OnChanges
Then implement the ngOnChanges method like this
ngOnChanges(changes: SimpleChanges) {
if (changes.editing) {
console.log(changes.editing.currentValue);
}
}
Any time any input was changed it will enter the ngOnChanges method. This is also why the if statement was added since if any other input was changed the editing property won't exist on the changes object.
For primitive values it will trigger on any change. For reference values you need to change the actual reference, just changing a property of the object you have in the input won't work.
answered Jan 19 at 14:02
JelleJelle
465110
The ngOnChanges can be used exactly for this
First make sure your component implements the ngOnChanges like this
export class TimelineComponent implements OnChanges
Then implement the ngOnChanges method like this
ngOnChanges(changes: SimpleChanges) {
if (changes.editing) {
console.log(changes.editing.currentValue);
}
}
Any time any input was changed it will enter the ngOnChanges method. This is also why the if statement was added since if any other input was changed the editing property won't exist on the changes object.
For primitive values it will trigger on any change. For reference values you need to change the actual reference, just changing a property of the object you have in the input won't work.
answered Jan 19 at 14:02
JelleJelle
465110
answered Jan 19 at 14:02
JelleJelle
465110
answered Jan 19 at 14:02
JelleJelle
465110
answered Jan 19 at 14:02
JelleJelle
465110
465110
add a comment |
add a comment |
I don't think you need two-way binding(again it's up to you and the requirement)
Just use property binding instead...
<app-timeline [editing]="editingDate"></app-timeline>
Whenever editing sets then you have to emit the Output()
@Output() editingChange = new EventEmitter();
public get editing(): boolean {
return this._editing;
}
@Input()
public set editing(edit: boolean) {
if (edit) {
this._editing = edit;
this.editingChange.emit("something");
}
}
answered Jan 19 at 18:00
smart74smart74
421315
add a comment |
I don't think you need two-way binding(again it's up to you and the requirement)
Just use property binding instead...
<app-timeline [editing]="editingDate"></app-timeline>
Whenever editing sets then you have to emit the Output()
@Output() editingChange = new EventEmitter();
public get editing(): boolean {
return this._editing;
}
@Input()
public set editing(edit: boolean) {
if (edit) {
this._editing = edit;
this.editingChange.emit("something");
}
}
answered Jan 19 at 18:00
smart74smart74
421315
add a comment |
I don't think you need two-way binding(again it's up to you and the requirement)
Just use property binding instead...
<app-timeline [editing]="editingDate"></app-timeline>
Whenever editing sets then you have to emit the Output()
@Output() editingChange = new EventEmitter();
public get editing(): boolean {
return this._editing;
}
@Input()
public set editing(edit: boolean) {
if (edit) {
this._editing = edit;
this.editingChange.emit("something");
}
}
answered Jan 19 at 18:00
smart74smart74
421315
I don't think you need two-way binding(again it's up to you and the requirement)
Just use property binding instead...
<app-timeline [editing]="editingDate"></app-timeline>
Whenever editing sets then you have to emit the Output()
@Output() editingChange = new EventEmitter();
public get editing(): boolean {
return this._editing;
}
@Input()
public set editing(edit: boolean) {
if (edit) {
this._editing = edit;
this.editingChange.emit("something");
}
}
answered Jan 19 at 18:00
smart74smart74
421315
answered Jan 19 at 18:00
smart74smart74
421315
answered Jan 19 at 18:00
smart74smart74
421315
answered Jan 19 at 18:00
smart74smart74
421315
421315
add a comment |
add a comment |
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%2f54266806%2fhow-to-detect-change-to-a-property-in-angular%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
Refer : onChanges method, angular.io/api/core/OnChanges, this can get you which property is changed.
– Abhishek Kumar
Jan 19 at 11:58
2
Possible duplicate of How to detect when an @Input() value changes in Angular?
– Abhishek Kumar
Jan 19 at 12:01
I'm trying to send data from a component up through 2 components would it be better to use a service or should I emit through the 2 components?
– matt
Jan 19 at 12:18
making service is a better option.
– Abhishek Kumar
Jan 19 at 13:23