Mixing
![Resize newly added child into parent in JAVAFX [duplicate]](https://lh4.googleusercontent.com/-O3chVxJpmWg/AAAAAAAAAAI/AAAAAAAAHNQ/DrmsbzqadME/s72-c/photo.jpg?sz=32)
Refresh HTML Component on window size change
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I want to change the slidesToShow and slidesToScroll variables after the window size changes. I've tried using a @HostListener to detect when the window size changes but the ngx-slick component doesn't update after those variables are changed.
.ts
@HostListener('window:resize', ['$event'])
onResize(event) {
this.updateSlidesToShow(window.innerWidth);
}
updateSlidesToShow(width: number) {
if (width < 576) {
this.slideConfig.slidesToShow = 1;
this.slideConfig.slidesToScroll = 1;
} else {
this.slideConfig.slidesToShow = 3;
this.slideConfig.slidesToScroll = 3;
}
}
slideConfig = {
'slidesToShow': 3,
'slidesToScroll': 3,
'dots': true,
'autoplay': true,
'autoplaySpeed': 10000,
};
.html
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide" style="padding: 0 10px">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick>
angular asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
add a comment |
I want to change the slidesToShow and slidesToScroll variables after the window size changes. I've tried using a @HostListener to detect when the window size changes but the ngx-slick component doesn't update after those variables are changed.
.ts
@HostListener('window:resize', ['$event'])
onResize(event) {
this.updateSlidesToShow(window.innerWidth);
}
updateSlidesToShow(width: number) {
if (width < 576) {
this.slideConfig.slidesToShow = 1;
this.slideConfig.slidesToScroll = 1;
} else {
this.slideConfig.slidesToShow = 3;
this.slideConfig.slidesToScroll = 3;
}
}
slideConfig = {
'slidesToShow': 3,
'slidesToScroll': 3,
'dots': true,
'autoplay': true,
'autoplaySpeed': 10000,
};
.html
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide" style="padding: 0 10px">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick>
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
add a comment |
I want to change the slidesToShow and slidesToScroll variables after the window size changes. I've tried using a @HostListener to detect when the window size changes but the ngx-slick component doesn't update after those variables are changed.
.ts
@HostListener('window:resize', ['$event'])
onResize(event) {
this.updateSlidesToShow(window.innerWidth);
}
updateSlidesToShow(width: number) {
if (width < 576) {
this.slideConfig.slidesToShow = 1;
this.slideConfig.slidesToScroll = 1;
} else {
this.slideConfig.slidesToShow = 3;
this.slideConfig.slidesToScroll = 3;
}
}
slideConfig = {
'slidesToShow': 3,
'slidesToScroll': 3,
'dots': true,
'autoplay': true,
'autoplaySpeed': 10000,
};
.html
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide" style="padding: 0 10px">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick>
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
I want to change the slidesToShow and slidesToScroll variables after the window size changes. I've tried using a @HostListener to detect when the window size changes but the ngx-slick component doesn't update after those variables are changed.
.ts
@HostListener('window:resize', ['$event'])
onResize(event) {
this.updateSlidesToShow(window.innerWidth);
}
updateSlidesToShow(width: number) {
if (width < 576) {
this.slideConfig.slidesToShow = 1;
this.slideConfig.slidesToScroll = 1;
} else {
this.slideConfig.slidesToShow = 3;
this.slideConfig.slidesToScroll = 3;
}
}
slideConfig = {
'slidesToShow': 3,
'slidesToScroll': 3,
'dots': true,
'autoplay': true,
'autoplaySpeed': 10000,
};
.html
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide" style="padding: 0 10px">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick>
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
asked Jan 3 at 4:28
SomebodyOnEarthSomebodyOnEarth
9818
9818
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Due to a limitation in the ngx-slick because he expects the config object to be passed and angular will not run the change detection after changing any property in that object.
The config object passed to the component ngx-slick will not be reevaluated as angular do not know it's changed as it's not feeling that properties are affected.
The only workaround that I do suggest is recreating the component after changing the width of the screen as I implemented in the following demo
https://stackblitz.com/edit/angular-fucgug
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to theupdateSlidesToShow) after x seconds instead of ASAP?
– SomebodyOnEarth
Jan 3 at 6:33
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%2f54016350%2frefresh-html-component-on-window-size-change%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
Due to a limitation in the ngx-slick because he expects the config object to be passed and angular will not run the change detection after changing any property in that object.
The config object passed to the component ngx-slick will not be reevaluated as angular do not know it's changed as it's not feeling that properties are affected.
The only workaround that I do suggest is recreating the component after changing the width of the screen as I implemented in the following demo
https://stackblitz.com/edit/angular-fucgug
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to theupdateSlidesToShow) after x seconds instead of ASAP?
– SomebodyOnEarth
Jan 3 at 6:33
add a comment |
Due to a limitation in the ngx-slick because he expects the config object to be passed and angular will not run the change detection after changing any property in that object.
The config object passed to the component ngx-slick will not be reevaluated as angular do not know it's changed as it's not feeling that properties are affected.
The only workaround that I do suggest is recreating the component after changing the width of the screen as I implemented in the following demo
https://stackblitz.com/edit/angular-fucgug
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to theupdateSlidesToShow) after x seconds instead of ASAP?
– SomebodyOnEarth
Jan 3 at 6:33
add a comment |
Due to a limitation in the ngx-slick because he expects the config object to be passed and angular will not run the change detection after changing any property in that object.
The config object passed to the component ngx-slick will not be reevaluated as angular do not know it's changed as it's not feeling that properties are affected.
The only workaround that I do suggest is recreating the component after changing the width of the screen as I implemented in the following demo
https://stackblitz.com/edit/angular-fucgug
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
Due to a limitation in the ngx-slick because he expects the config object to be passed and angular will not run the change detection after changing any property in that object.
The config object passed to the component ngx-slick will not be reevaluated as angular do not know it's changed as it's not feeling that properties are affected.
The only workaround that I do suggest is recreating the component after changing the width of the screen as I implemented in the following demo
https://stackblitz.com/edit/angular-fucgug
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
answered Jan 3 at 5:48
abdulrahman alaaabdulrahman alaa
612
612
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to theupdateSlidesToShow) after x seconds instead of ASAP?
– SomebodyOnEarth
Jan 3 at 6:33
add a comment |
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to theupdateSlidesToShow) after x seconds instead of ASAP?
– SomebodyOnEarth
Jan 3 at 6:33
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to the
updateSlidesToShow) after x seconds instead of ASAP?– SomebodyOnEarth
Jan 3 at 6:33
That's actually a pretty smart workaround. However, it seems very resource intensive, therefore is it possible to to get the window width (and send it over to the
updateSlidesToShow) after x seconds instead of ASAP?– SomebodyOnEarth
Jan 3 at 6:33
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%2f54016350%2frefresh-html-component-on-window-size-change%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
