Mixing
ngOnChanges doesn't trigger changes
https://next.plnkr.co/edit/0LHeJ3Fyz5gdjJqQ?open=lib%2Fapp.ts&deferRun=1
Here's a plunkr. It's just for example.
In real project i got something like
<input [(ngModel)]='_data.name' [name]='name' />
I pass some data for input by using ngOnInit lifehook
And i cant understand why my ngOnChanges hook doesn't trigger changes when i write something in my <input>
The _data takes data from json/server by using services http request, then i get name in my <input>, or something on
The question is: how to detect changes with ngOnChange lifehook in my situation
I try to set [name]='name' and then take it using @Input like that
@Input() name: string;
Then in ngOnChanges
ngOnChanges(changes: SimpleChanges) {
console.log(changes.name.currentValue);
}
Why i do not see anything in my console? Why ngOnChanges is not working this way?
I need to take value from my input, then detect it changes using ngOnChanges
No errors in console, no data, just nothing, empty
angular
asked Nov 19 '18 at 13:45
Yar Sol
112
add a comment |
https://next.plnkr.co/edit/0LHeJ3Fyz5gdjJqQ?open=lib%2Fapp.ts&deferRun=1
Here's a plunkr. It's just for example.
In real project i got something like
<input [(ngModel)]='_data.name' [name]='name' />
I pass some data for input by using ngOnInit lifehook
And i cant understand why my ngOnChanges hook doesn't trigger changes when i write something in my <input>
The _data takes data from json/server by using services http request, then i get name in my <input>, or something on
The question is: how to detect changes with ngOnChange lifehook in my situation
I try to set [name]='name' and then take it using @Input like that
@Input() name: string;
Then in ngOnChanges
ngOnChanges(changes: SimpleChanges) {
console.log(changes.name.currentValue);
}
Why i do not see anything in my console? Why ngOnChanges is not working this way?
I need to take value from my input, then detect it changes using ngOnChanges
No errors in console, no data, just nothing, empty
angular
asked Nov 19 '18 at 13:45
Yar Sol
112
why are you want to usengOnChanges?, instead listenonChange,inputorkeyupevents on your input
– Artyom Amiryan
Nov 19 '18 at 13:56
add a comment |
https://next.plnkr.co/edit/0LHeJ3Fyz5gdjJqQ?open=lib%2Fapp.ts&deferRun=1
Here's a plunkr. It's just for example.
In real project i got something like
<input [(ngModel)]='_data.name' [name]='name' />
I pass some data for input by using ngOnInit lifehook
And i cant understand why my ngOnChanges hook doesn't trigger changes when i write something in my <input>
The _data takes data from json/server by using services http request, then i get name in my <input>, or something on
The question is: how to detect changes with ngOnChange lifehook in my situation
I try to set [name]='name' and then take it using @Input like that
@Input() name: string;
Then in ngOnChanges
ngOnChanges(changes: SimpleChanges) {
console.log(changes.name.currentValue);
}
Why i do not see anything in my console? Why ngOnChanges is not working this way?
I need to take value from my input, then detect it changes using ngOnChanges
No errors in console, no data, just nothing, empty
angular
asked Nov 19 '18 at 13:45
Yar Sol
112
https://next.plnkr.co/edit/0LHeJ3Fyz5gdjJqQ?open=lib%2Fapp.ts&deferRun=1
Here's a plunkr. It's just for example.
In real project i got something like
<input [(ngModel)]='_data.name' [name]='name' />
I pass some data for input by using ngOnInit lifehook
And i cant understand why my ngOnChanges hook doesn't trigger changes when i write something in my <input>
The _data takes data from json/server by using services http request, then i get name in my <input>, or something on
The question is: how to detect changes with ngOnChange lifehook in my situation
I try to set [name]='name' and then take it using @Input like that
@Input() name: string;
Then in ngOnChanges
ngOnChanges(changes: SimpleChanges) {
console.log(changes.name.currentValue);
}
Why i do not see anything in my console? Why ngOnChanges is not working this way?
I need to take value from my input, then detect it changes using ngOnChanges
No errors in console, no data, just nothing, empty
angular
angular
asked Nov 19 '18 at 13:45
Yar Sol
112
asked Nov 19 '18 at 13:45
Yar Sol
112
asked Nov 19 '18 at 13:45
Yar Sol
112
asked Nov 19 '18 at 13:45
Yar Sol
112
asked Nov 19 '18 at 13:45
Yar Sol
112
112
why are you want to usengOnChanges?, instead listenonChange,inputorkeyupevents on your input
– Artyom Amiryan
Nov 19 '18 at 13:56
add a comment |
why are you want to usengOnChanges?, instead listenonChange,inputorkeyupevents on your input
– Artyom Amiryan
Nov 19 '18 at 13:56
why are you want to use
ngOnChanges ?, instead listen onChange, input or keyup events on your input– Artyom Amiryan
Nov 19 '18 at 13:56
why are you want to use
ngOnChanges ?, instead listen onChange, input or keyup events on your input– Artyom Amiryan
Nov 19 '18 at 13:56
add a comment |
2 Answers
2
active
oldest
votes
That's because the relation between two components is not well implemented.
We should have a deal firstly that @input() decorators are implementend only in a child component, that means, you have to make your changes in the father component and pass those changes to the child so it will invoke its ngOnChanges method. That is to say:
in your Father component:
@Component({
selector: 'my-app',
template: `
<div>
<example [name]="name"></example> <!-- Here you intend to call your child -->
<input [(ngModel)]="name"/>
</div>
`,
})
export class App {
name: string;
constructor() {
this.name = `Angular! v${VERSION.full}`;
}
}
And Remove that <input [(ngModel)]="name"/> from Example template.
A working stackblitz.
answered Nov 19 '18 at 14:04
selem mn
4,86541939
add a comment |
@input is only to communicate with outer component not for own template. Instead you can use ngModelChange
import {Component, NgModule, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'
@Component({
selector: 'example',
template: `
<input [(ngModel)]='name' (ngModelChange)="onChanges()" />
`,
})
export class Example implements OnInit{
private _value: string;
name: string;
// @Input() name: string; <--- no need
constructor() {
}
ngOnInit() {
this.name = 'qwe';
}
onChanges() {
console.log(this.name);
}
}
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
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%2f53375987%2fngonchanges-doesnt-trigger-changes%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
That's because the relation between two components is not well implemented.
We should have a deal firstly that @input() decorators are implementend only in a child component, that means, you have to make your changes in the father component and pass those changes to the child so it will invoke its ngOnChanges method. That is to say:
in your Father component:
@Component({
selector: 'my-app',
template: `
<div>
<example [name]="name"></example> <!-- Here you intend to call your child -->
<input [(ngModel)]="name"/>
</div>
`,
})
export class App {
name: string;
constructor() {
this.name = `Angular! v${VERSION.full}`;
}
}
And Remove that <input [(ngModel)]="name"/> from Example template.
A working stackblitz.
answered Nov 19 '18 at 14:04
selem mn
4,86541939
add a comment |
That's because the relation between two components is not well implemented.
We should have a deal firstly that @input() decorators are implementend only in a child component, that means, you have to make your changes in the father component and pass those changes to the child so it will invoke its ngOnChanges method. That is to say:
in your Father component:
@Component({
selector: 'my-app',
template: `
<div>
<example [name]="name"></example> <!-- Here you intend to call your child -->
<input [(ngModel)]="name"/>
</div>
`,
})
export class App {
name: string;
constructor() {
this.name = `Angular! v${VERSION.full}`;
}
}
And Remove that <input [(ngModel)]="name"/> from Example template.
A working stackblitz.
answered Nov 19 '18 at 14:04
selem mn
4,86541939
add a comment |
That's because the relation between two components is not well implemented.
We should have a deal firstly that @input() decorators are implementend only in a child component, that means, you have to make your changes in the father component and pass those changes to the child so it will invoke its ngOnChanges method. That is to say:
in your Father component:
@Component({
selector: 'my-app',
template: `
<div>
<example [name]="name"></example> <!-- Here you intend to call your child -->
<input [(ngModel)]="name"/>
</div>
`,
})
export class App {
name: string;
constructor() {
this.name = `Angular! v${VERSION.full}`;
}
}
And Remove that <input [(ngModel)]="name"/> from Example template.
A working stackblitz.
answered Nov 19 '18 at 14:04
selem mn
4,86541939
That's because the relation between two components is not well implemented.
We should have a deal firstly that @input() decorators are implementend only in a child component, that means, you have to make your changes in the father component and pass those changes to the child so it will invoke its ngOnChanges method. That is to say:
in your Father component:
@Component({
selector: 'my-app',
template: `
<div>
<example [name]="name"></example> <!-- Here you intend to call your child -->
<input [(ngModel)]="name"/>
</div>
`,
})
export class App {
name: string;
constructor() {
this.name = `Angular! v${VERSION.full}`;
}
}
And Remove that <input [(ngModel)]="name"/> from Example template.
A working stackblitz.
answered Nov 19 '18 at 14:04
selem mn
4,86541939
edited Nov 19 '18 at 14:10
answered Nov 19 '18 at 14:04
selem mn
4,86541939
answered Nov 19 '18 at 14:04
selem mn
4,86541939
answered Nov 19 '18 at 14:04
selem mn
4,86541939
4,86541939
add a comment |
add a comment |
@input is only to communicate with outer component not for own template. Instead you can use ngModelChange
import {Component, NgModule, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'
@Component({
selector: 'example',
template: `
<input [(ngModel)]='name' (ngModelChange)="onChanges()" />
`,
})
export class Example implements OnInit{
private _value: string;
name: string;
// @Input() name: string; <--- no need
constructor() {
}
ngOnInit() {
this.name = 'qwe';
}
onChanges() {
console.log(this.name);
}
}
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
add a comment |
@input is only to communicate with outer component not for own template. Instead you can use ngModelChange
import {Component, NgModule, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'
@Component({
selector: 'example',
template: `
<input [(ngModel)]='name' (ngModelChange)="onChanges()" />
`,
})
export class Example implements OnInit{
private _value: string;
name: string;
// @Input() name: string; <--- no need
constructor() {
}
ngOnInit() {
this.name = 'qwe';
}
onChanges() {
console.log(this.name);
}
}
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
add a comment |
@input is only to communicate with outer component not for own template. Instead you can use ngModelChange
import {Component, NgModule, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'
@Component({
selector: 'example',
template: `
<input [(ngModel)]='name' (ngModelChange)="onChanges()" />
`,
})
export class Example implements OnInit{
private _value: string;
name: string;
// @Input() name: string; <--- no need
constructor() {
}
ngOnInit() {
this.name = 'qwe';
}
onChanges() {
console.log(this.name);
}
}
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
@input is only to communicate with outer component not for own template. Instead you can use ngModelChange
import {Component, NgModule, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'
@Component({
selector: 'example',
template: `
<input [(ngModel)]='name' (ngModelChange)="onChanges()" />
`,
})
export class Example implements OnInit{
private _value: string;
name: string;
// @Input() name: string; <--- no need
constructor() {
}
ngOnInit() {
this.name = 'qwe';
}
onChanges() {
console.log(this.name);
}
}
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
answered Nov 19 '18 at 13:57
Sheik Althaf
26717
26717
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53375987%2fngonchanges-doesnt-trigger-changes%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
why are you want to use
ngOnChanges?, instead listenonChange,inputorkeyupevents on your input– Artyom Amiryan
Nov 19 '18 at 13:56