Component doesn't get destroyed when *ngIf is false
I have a component with the following child component:
<app-fullscreen *ngIf="displayFullscreen" [images]="images" [selected]="selected"
(fullscreenChange)="closeFullscreen($event)"></app-fullscreen>
When someone clicks on one of my images, this methods gets called:
openFullscreen(images: any, img: any) {
this.images = images;
this.selected = img;
this.displayFullscreen = true;
}
Now the component is displayed. Once displayFullscreen is set to false again, the app-fullscreen component does not get destroyed. I noticed this in the DOM:
So it detects that the ngIf is now false, but it does not do anything about it. How do I make the component disappear?
Edit: Information about how I'm setting displayFullscreen to false.
In the app-fullscreen child component, I emit an event with the value "false":
closeFullscreen(){
this.fullscreenChange.emit("false");
}
When the event is emitted, the parent component calls this method:
closeFullscreen(event: any){
this.displayFullscreen = event;
this.cd.detectChanges();
}
As you can see I even tried calling detectChanges() but that did not help.
angular angular-ng-if
asked Nov 24 '18 at 0:54
JesperJesper
644724
add a comment |
I have a component with the following child component:
<app-fullscreen *ngIf="displayFullscreen" [images]="images" [selected]="selected"
(fullscreenChange)="closeFullscreen($event)"></app-fullscreen>
When someone clicks on one of my images, this methods gets called:
openFullscreen(images: any, img: any) {
this.images = images;
this.selected = img;
this.displayFullscreen = true;
}
Now the component is displayed. Once displayFullscreen is set to false again, the app-fullscreen component does not get destroyed. I noticed this in the DOM:
So it detects that the ngIf is now false, but it does not do anything about it. How do I make the component disappear?
Edit: Information about how I'm setting displayFullscreen to false.
In the app-fullscreen child component, I emit an event with the value "false":
closeFullscreen(){
this.fullscreenChange.emit("false");
}
When the event is emitted, the parent component calls this method:
closeFullscreen(event: any){
this.displayFullscreen = event;
this.cd.detectChanges();
}
As you can see I even tried calling detectChanges() but that did not help.
angular angular-ng-if
asked Nov 24 '18 at 0:54
JesperJesper
644724
Post the relevant code. There's a bug in it.
– JB Nizet
Nov 24 '18 at 0:57
You should add the code and explanation of where displayFullScreen is set to false. This is crucial information to help you as the change detection cycle is involved
– ivissani
Nov 24 '18 at 0:58
@ivissani I have added the code that you have requested. If you need more let me know. Thanks.
– Jesper
Nov 24 '18 at 1:03
add a comment |
I have a component with the following child component:
<app-fullscreen *ngIf="displayFullscreen" [images]="images" [selected]="selected"
(fullscreenChange)="closeFullscreen($event)"></app-fullscreen>
When someone clicks on one of my images, this methods gets called:
openFullscreen(images: any, img: any) {
this.images = images;
this.selected = img;
this.displayFullscreen = true;
}
Now the component is displayed. Once displayFullscreen is set to false again, the app-fullscreen component does not get destroyed. I noticed this in the DOM:
So it detects that the ngIf is now false, but it does not do anything about it. How do I make the component disappear?
Edit: Information about how I'm setting displayFullscreen to false.
In the app-fullscreen child component, I emit an event with the value "false":
closeFullscreen(){
this.fullscreenChange.emit("false");
}
When the event is emitted, the parent component calls this method:
closeFullscreen(event: any){
this.displayFullscreen = event;
this.cd.detectChanges();
}
As you can see I even tried calling detectChanges() but that did not help.
angular angular-ng-if
asked Nov 24 '18 at 0:54
JesperJesper
644724
I have a component with the following child component:
<app-fullscreen *ngIf="displayFullscreen" [images]="images" [selected]="selected"
(fullscreenChange)="closeFullscreen($event)"></app-fullscreen>
When someone clicks on one of my images, this methods gets called:
openFullscreen(images: any, img: any) {
this.images = images;
this.selected = img;
this.displayFullscreen = true;
}
Now the component is displayed. Once displayFullscreen is set to false again, the app-fullscreen component does not get destroyed. I noticed this in the DOM:
So it detects that the ngIf is now false, but it does not do anything about it. How do I make the component disappear?
Edit: Information about how I'm setting displayFullscreen to false.
In the app-fullscreen child component, I emit an event with the value "false":
closeFullscreen(){
this.fullscreenChange.emit("false");
}
When the event is emitted, the parent component calls this method:
closeFullscreen(event: any){
this.displayFullscreen = event;
this.cd.detectChanges();
}
As you can see I even tried calling detectChanges() but that did not help.
angular angular-ng-if
angular angular-ng-if
asked Nov 24 '18 at 0:54
JesperJesper
644724
asked Nov 24 '18 at 0:54
JesperJesper
644724
edited Nov 24 '18 at 1:03
Jesper
asked Nov 24 '18 at 0:54
JesperJesper
644724
asked Nov 24 '18 at 0:54
JesperJesper
644724
asked Nov 24 '18 at 0:54
JesperJesper
644724
644724
Post the relevant code. There's a bug in it.
– JB Nizet
Nov 24 '18 at 0:57
You should add the code and explanation of where displayFullScreen is set to false. This is crucial information to help you as the change detection cycle is involved
– ivissani
Nov 24 '18 at 0:58
@ivissani I have added the code that you have requested. If you need more let me know. Thanks.
– Jesper
Nov 24 '18 at 1:03
add a comment |
Post the relevant code. There's a bug in it.
– JB Nizet
Nov 24 '18 at 0:57
You should add the code and explanation of where displayFullScreen is set to false. This is crucial information to help you as the change detection cycle is involved
– ivissani
Nov 24 '18 at 0:58
@ivissani I have added the code that you have requested. If you need more let me know. Thanks.
– Jesper
Nov 24 '18 at 1:03
Post the relevant code. There's a bug in it.
– JB Nizet
Nov 24 '18 at 0:57
Post the relevant code. There's a bug in it.
– JB Nizet
Nov 24 '18 at 0:57
You should add the code and explanation of where displayFullScreen is set to false. This is crucial information to help you as the change detection cycle is involved
– ivissani
Nov 24 '18 at 0:58
You should add the code and explanation of where displayFullScreen is set to false. This is crucial information to help you as the change detection cycle is involved
– ivissani
Nov 24 '18 at 0:58
@ivissani I have added the code that you have requested. If you need more let me know. Thanks.
– Jesper
Nov 24 '18 at 1:03
@ivissani I have added the code that you have requested. If you need more let me know. Thanks.
– Jesper
Nov 24 '18 at 1:03
add a comment |
1 Answer
1
active
oldest
votes
You emit the string "false". The string "false" is truthy. So the ngIf still displays the component.
Use booleans for boolean values, not strings.
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had importedEventEmitterfromeventsinstead of@angular/coreand then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.
– Jesper
Nov 24 '18 at 1:11
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%2f53454289%2fcomponent-doesnt-get-destroyed-when-ngif-is-false%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
You emit the string "false". The string "false" is truthy. So the ngIf still displays the component.
Use booleans for boolean values, not strings.
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had importedEventEmitterfromeventsinstead of@angular/coreand then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.
– Jesper
Nov 24 '18 at 1:11
add a comment |
You emit the string "false". The string "false" is truthy. So the ngIf still displays the component.
Use booleans for boolean values, not strings.
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had importedEventEmitterfromeventsinstead of@angular/coreand then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.
– Jesper
Nov 24 '18 at 1:11
add a comment |
You emit the string "false". The string "false" is truthy. So the ngIf still displays the component.
Use booleans for boolean values, not strings.
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
You emit the string "false". The string "false" is truthy. So the ngIf still displays the component.
Use booleans for boolean values, not strings.
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
answered Nov 24 '18 at 1:05
JB NizetJB Nizet
536k52865997
536k52865997
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had importedEventEmitterfromeventsinstead of@angular/coreand then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.
– Jesper
Nov 24 '18 at 1:11
add a comment |
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had importedEventEmitterfromeventsinstead of@angular/coreand then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.
– Jesper
Nov 24 '18 at 1:11
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had imported
EventEmitter from events instead of @angular/core and then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.– Jesper
Nov 24 '18 at 1:11
Oh man, I tried with a boolean value at first, but it said that a string or symbol was required. Turned out I had imported
EventEmitter from events instead of @angular/core and then it didn't cross my mind to try with a boolean value again after correcting that. Anyway, thanks a lot.– Jesper
Nov 24 '18 at 1:11
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%2f53454289%2fcomponent-doesnt-get-destroyed-when-ngif-is-false%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
Post the relevant code. There's a bug in it.
– JB Nizet
Nov 24 '18 at 0:57
You should add the code and explanation of where displayFullScreen is set to false. This is crucial information to help you as the change detection cycle is involved
– ivissani
Nov 24 '18 at 0:58
@ivissani I have added the code that you have requested. If you need more let me know. Thanks.
– Jesper
Nov 24 '18 at 1:03