Template doesn't know the changement of variable updated in window
up vote
1
down vote
favorite
The view can't update the value of status variable.
This is an extract of my code deleted the code not relevant:
component.ts
export class MyComponent implements OnInit {
private status: string;
ngOnInit() {
this.status = "abc"; // OK binding
window['onYouTubeIframeAPIReady'] = (e) => {
this.player = new window['YT'].Player('player', {
videoId: this.video.videoId,
events: {
'onStateChange': this.onPlayerStateChange.bind(this)
}
});
};
}
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.status= "xyz"; //Not possible binding
break;
}
component.html
<span>{{status}}</span> // it shows only abc, the expected is xyz
Anybody has an idea how can I update the variable in the window and it reflects on the view?
angular
asked Nov 12 at 14:36
Antoine V
4,9572424
add a comment |
up vote
1
down vote
favorite
The view can't update the value of status variable.
This is an extract of my code deleted the code not relevant:
component.ts
export class MyComponent implements OnInit {
private status: string;
ngOnInit() {
this.status = "abc"; // OK binding
window['onYouTubeIframeAPIReady'] = (e) => {
this.player = new window['YT'].Player('player', {
videoId: this.video.videoId,
events: {
'onStateChange': this.onPlayerStateChange.bind(this)
}
});
};
}
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.status= "xyz"; //Not possible binding
break;
}
component.html
<span>{{status}}</span> // it shows only abc, the expected is xyz
Anybody has an idea how can I update the variable in the window and it reflects on the view?
angular
asked Nov 12 at 14:36
Antoine V
4,9572424
did you tried life-cycle hooks
– Amir Fawzy
Nov 12 at 14:54
Can you make a stackblitz with the video example? Thewindow.onloadexample doesn't work because the event is not triggered (see this stackblitz). The window is probably already loaded when the event handler is set.
– ConnorsFan
Nov 12 at 15:15
Thewindow.onloadstill doesn't work, even withsetTimeout, because the event handler is not executed. You can test it with aconsole.log.
– ConnorsFan
Nov 12 at 15:28
So, back to my original question: can you provide a stackblitz for the video case?
– ConnorsFan
Nov 12 at 15:32
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
The view can't update the value of status variable.
This is an extract of my code deleted the code not relevant:
component.ts
export class MyComponent implements OnInit {
private status: string;
ngOnInit() {
this.status = "abc"; // OK binding
window['onYouTubeIframeAPIReady'] = (e) => {
this.player = new window['YT'].Player('player', {
videoId: this.video.videoId,
events: {
'onStateChange': this.onPlayerStateChange.bind(this)
}
});
};
}
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.status= "xyz"; //Not possible binding
break;
}
component.html
<span>{{status}}</span> // it shows only abc, the expected is xyz
Anybody has an idea how can I update the variable in the window and it reflects on the view?
angular
asked Nov 12 at 14:36
Antoine V
4,9572424
The view can't update the value of status variable.
This is an extract of my code deleted the code not relevant:
component.ts
export class MyComponent implements OnInit {
private status: string;
ngOnInit() {
this.status = "abc"; // OK binding
window['onYouTubeIframeAPIReady'] = (e) => {
this.player = new window['YT'].Player('player', {
videoId: this.video.videoId,
events: {
'onStateChange': this.onPlayerStateChange.bind(this)
}
});
};
}
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.status= "xyz"; //Not possible binding
break;
}
component.html
<span>{{status}}</span> // it shows only abc, the expected is xyz
Anybody has an idea how can I update the variable in the window and it reflects on the view?
angular
angular
asked Nov 12 at 14:36
Antoine V
4,9572424
asked Nov 12 at 14:36
Antoine V
4,9572424
edited Nov 13 at 8:55
asked Nov 12 at 14:36
Antoine V
4,9572424
asked Nov 12 at 14:36
Antoine V
4,9572424
asked Nov 12 at 14:36
Antoine V
4,9572424
4,9572424
did you tried life-cycle hooks
– Amir Fawzy
Nov 12 at 14:54
Can you make a stackblitz with the video example? Thewindow.onloadexample doesn't work because the event is not triggered (see this stackblitz). The window is probably already loaded when the event handler is set.
– ConnorsFan
Nov 12 at 15:15
Thewindow.onloadstill doesn't work, even withsetTimeout, because the event handler is not executed. You can test it with aconsole.log.
– ConnorsFan
Nov 12 at 15:28
So, back to my original question: can you provide a stackblitz for the video case?
– ConnorsFan
Nov 12 at 15:32
add a comment |
did you tried life-cycle hooks
– Amir Fawzy
Nov 12 at 14:54
Can you make a stackblitz with the video example? Thewindow.onloadexample doesn't work because the event is not triggered (see this stackblitz). The window is probably already loaded when the event handler is set.
– ConnorsFan
Nov 12 at 15:15
Thewindow.onloadstill doesn't work, even withsetTimeout, because the event handler is not executed. You can test it with aconsole.log.
– ConnorsFan
Nov 12 at 15:28
So, back to my original question: can you provide a stackblitz for the video case?
– ConnorsFan
Nov 12 at 15:32
did you tried life-cycle hooks
– Amir Fawzy
Nov 12 at 14:54
did you tried life-cycle hooks
– Amir Fawzy
Nov 12 at 14:54
Can you make a stackblitz with the video example? The
window.onload example doesn't work because the event is not triggered (see this stackblitz). The window is probably already loaded when the event handler is set.– ConnorsFan
Nov 12 at 15:15
Can you make a stackblitz with the video example? The
window.onload example doesn't work because the event is not triggered (see this stackblitz). The window is probably already loaded when the event handler is set.– ConnorsFan
Nov 12 at 15:15
The
window.onload still doesn't work, even with setTimeout, because the event handler is not executed. You can test it with a console.log.– ConnorsFan
Nov 12 at 15:28
The
window.onload still doesn't work, even with setTimeout, because the event handler is not executed. You can test it with a console.log.– ConnorsFan
Nov 12 at 15:28
So, back to my original question: can you provide a stackblitz for the video case?
– ConnorsFan
Nov 12 at 15:32
So, back to my original question: can you provide a stackblitz for the video case?
– ConnorsFan
Nov 12 at 15:32
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
I'm Completely changing my previous answer because that doesn't seem to be problem in your case
I'm not sure why the property is not updating on the template but the value gets changed in the ts- may be the window function issue i think
After some research i have manual triggered the changes on the onPlayerStateChange(event)
Inject ChangeDetectorRef in your constructor
constructor(private dect: ChangeDetectorRef){}
Add this.dect.detectChanges(); after you property change - check out the code below
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.name = "yyy";
this.dect.detectChanges(); //this will manually trigger the changes on your properties
console.log("I'm playing");
break;
};
}
Hope it might work, solution might not be a traditaionl way but you can use this as a workaround - happy coding :)
answered Nov 12 at 15:18
Rahul
9631315
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
No problem - :)
– Rahul
Nov 13 at 9:07
add a comment |
up vote
0
down vote
Change: private status: string;
to public status: string;
Declared variables need to be public for the template to be able to access them. Good explanation here: Should private variables be accessible in the template?
answered Nov 12 at 14:41
Rutger van Dijk
767
Moreover, testing the variable changethis.name = 'yyy';, is better done by a click on a button or on asetTimeout(() => { this.name = 'yyy'; },0);
– Rutger van Dijk
Nov 12 at 14:49
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
It should fix it, make sure you are testing the changing of thestatusvariable OK. Try using asetTimeoutinstead of within youronPlayerStateChange(event)function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)
– Rutger van Dijk
Nov 12 at 14:59
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
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',
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%2f53264403%2ftemplate-doesnt-know-the-changement-of-variable-updated-in-window%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
up vote
1
down vote
accepted
I'm Completely changing my previous answer because that doesn't seem to be problem in your case
I'm not sure why the property is not updating on the template but the value gets changed in the ts- may be the window function issue i think
After some research i have manual triggered the changes on the onPlayerStateChange(event)
Inject ChangeDetectorRef in your constructor
constructor(private dect: ChangeDetectorRef){}
Add this.dect.detectChanges(); after you property change - check out the code below
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.name = "yyy";
this.dect.detectChanges(); //this will manually trigger the changes on your properties
console.log("I'm playing");
break;
};
}
Hope it might work, solution might not be a traditaionl way but you can use this as a workaround - happy coding :)
answered Nov 12 at 15:18
Rahul
9631315
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
No problem - :)
– Rahul
Nov 13 at 9:07
add a comment |
up vote
1
down vote
accepted
I'm Completely changing my previous answer because that doesn't seem to be problem in your case
I'm not sure why the property is not updating on the template but the value gets changed in the ts- may be the window function issue i think
After some research i have manual triggered the changes on the onPlayerStateChange(event)
Inject ChangeDetectorRef in your constructor
constructor(private dect: ChangeDetectorRef){}
Add this.dect.detectChanges(); after you property change - check out the code below
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.name = "yyy";
this.dect.detectChanges(); //this will manually trigger the changes on your properties
console.log("I'm playing");
break;
};
}
Hope it might work, solution might not be a traditaionl way but you can use this as a workaround - happy coding :)
answered Nov 12 at 15:18
Rahul
9631315
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
No problem - :)
– Rahul
Nov 13 at 9:07
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
I'm Completely changing my previous answer because that doesn't seem to be problem in your case
I'm not sure why the property is not updating on the template but the value gets changed in the ts- may be the window function issue i think
After some research i have manual triggered the changes on the onPlayerStateChange(event)
Inject ChangeDetectorRef in your constructor
constructor(private dect: ChangeDetectorRef){}
Add this.dect.detectChanges(); after you property change - check out the code below
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.name = "yyy";
this.dect.detectChanges(); //this will manually trigger the changes on your properties
console.log("I'm playing");
break;
};
}
Hope it might work, solution might not be a traditaionl way but you can use this as a workaround - happy coding :)
answered Nov 12 at 15:18
Rahul
9631315
I'm Completely changing my previous answer because that doesn't seem to be problem in your case
I'm not sure why the property is not updating on the template but the value gets changed in the ts- may be the window function issue i think
After some research i have manual triggered the changes on the onPlayerStateChange(event)
Inject ChangeDetectorRef in your constructor
constructor(private dect: ChangeDetectorRef){}
Add this.dect.detectChanges(); after you property change - check out the code below
onPlayerStateChange(event) {
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
this.name = "yyy";
this.dect.detectChanges(); //this will manually trigger the changes on your properties
console.log("I'm playing");
break;
};
}
Hope it might work, solution might not be a traditaionl way but you can use this as a workaround - happy coding :)
answered Nov 12 at 15:18
Rahul
9631315
edited Nov 12 at 19:21
answered Nov 12 at 15:18
Rahul
9631315
answered Nov 12 at 15:18
Rahul
9631315
answered Nov 12 at 15:18
Rahul
9631315
9631315
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
No problem - :)
– Rahul
Nov 13 at 9:07
add a comment |
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
No problem - :)
– Rahul
Nov 13 at 9:07
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
wow, it works. Thanks
– Antoine V
Nov 13 at 9:02
No problem - :)
– Rahul
Nov 13 at 9:07
No problem - :)
– Rahul
Nov 13 at 9:07
add a comment |
up vote
0
down vote
Change: private status: string;
to public status: string;
Declared variables need to be public for the template to be able to access them. Good explanation here: Should private variables be accessible in the template?
answered Nov 12 at 14:41
Rutger van Dijk
767
Moreover, testing the variable changethis.name = 'yyy';, is better done by a click on a button or on asetTimeout(() => { this.name = 'yyy'; },0);
– Rutger van Dijk
Nov 12 at 14:49
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
It should fix it, make sure you are testing the changing of thestatusvariable OK. Try using asetTimeoutinstead of within youronPlayerStateChange(event)function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)
– Rutger van Dijk
Nov 12 at 14:59
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
add a comment |
up vote
0
down vote
Change: private status: string;
to public status: string;
Declared variables need to be public for the template to be able to access them. Good explanation here: Should private variables be accessible in the template?
answered Nov 12 at 14:41
Rutger van Dijk
767
Moreover, testing the variable changethis.name = 'yyy';, is better done by a click on a button or on asetTimeout(() => { this.name = 'yyy'; },0);
– Rutger van Dijk
Nov 12 at 14:49
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
It should fix it, make sure you are testing the changing of thestatusvariable OK. Try using asetTimeoutinstead of within youronPlayerStateChange(event)function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)
– Rutger van Dijk
Nov 12 at 14:59
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
add a comment |
up vote
0
down vote
up vote
0
down vote
Change: private status: string;
to public status: string;
Declared variables need to be public for the template to be able to access them. Good explanation here: Should private variables be accessible in the template?
answered Nov 12 at 14:41
Rutger van Dijk
767
Change: private status: string;
to public status: string;
Declared variables need to be public for the template to be able to access them. Good explanation here: Should private variables be accessible in the template?
answered Nov 12 at 14:41
Rutger van Dijk
767
answered Nov 12 at 14:41
Rutger van Dijk
767
answered Nov 12 at 14:41
Rutger van Dijk
767
answered Nov 12 at 14:41
Rutger van Dijk
767
767
Moreover, testing the variable changethis.name = 'yyy';, is better done by a click on a button or on asetTimeout(() => { this.name = 'yyy'; },0);
– Rutger van Dijk
Nov 12 at 14:49
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
It should fix it, make sure you are testing the changing of thestatusvariable OK. Try using asetTimeoutinstead of within youronPlayerStateChange(event)function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)
– Rutger van Dijk
Nov 12 at 14:59
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
add a comment |
Moreover, testing the variable changethis.name = 'yyy';, is better done by a click on a button or on asetTimeout(() => { this.name = 'yyy'; },0);
– Rutger van Dijk
Nov 12 at 14:49
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
It should fix it, make sure you are testing the changing of thestatusvariable OK. Try using asetTimeoutinstead of within youronPlayerStateChange(event)function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)
– Rutger van Dijk
Nov 12 at 14:59
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
Moreover, testing the variable change
this.name = 'yyy';, is better done by a click on a button or on a setTimeout(() => { this.name = 'yyy'; },0);– Rutger van Dijk
Nov 12 at 14:49
Moreover, testing the variable change
this.name = 'yyy';, is better done by a click on a button or on a setTimeout(() => { this.name = 'yyy'; },0);– Rutger van Dijk
Nov 12 at 14:49
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
Sorry, but it doesn't work
– Antoine V
Nov 12 at 14:50
It should fix it, make sure you are testing the changing of the
status variable OK. Try using a setTimeout instead of within your onPlayerStateChange(event) function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)– Rutger van Dijk
Nov 12 at 14:59
It should fix it, make sure you are testing the changing of the
status variable OK. Try using a setTimeout instead of within your onPlayerStateChange(event) function. If that doesn't work, I recommend setting up a Plunkr, so we can evaluate the full code :)– Rutger van Dijk
Nov 12 at 14:59
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Ha, indeed. The setTimeout does actually change the variable in the template: stackblitz.com/edit/angular-ktxzzn - So your problem seems to be a scoping issue with the YouTube event..
– Rutger van Dijk
Nov 13 at 8:13
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
Injecting the ChangeDetectorRef like Rahul also implies below will solve it: stackblitz.com/edit/angular-ktxzzn
– Rutger van Dijk
Nov 13 at 8:17
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%2f53264403%2ftemplate-doesnt-know-the-changement-of-variable-updated-in-window%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
did you tried life-cycle hooks
– Amir Fawzy
Nov 12 at 14:54
Can you make a stackblitz with the video example? The
window.onloadexample doesn't work because the event is not triggered (see this stackblitz). The window is probably already loaded when the event handler is set.– ConnorsFan
Nov 12 at 15:15
The
window.onloadstill doesn't work, even withsetTimeout, because the event handler is not executed. You can test it with aconsole.log.– ConnorsFan
Nov 12 at 15:28
So, back to my original question: can you provide a stackblitz for the video case?
– ConnorsFan
Nov 12 at 15:32