How to set the initial index (position) for the CdkVirtualScrollViewport in Angular 7
3
I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list.
Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked, which feels off.
- Can someone confirm that the using those methods in the
ngAfterViewCheckedis the right way of doing things? - If not, show an alternative method / technique?
@ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
numbers: number = ;
constructor() {
for (let index = 0; index < 10000; index++) {
this.numbers.push(index);
}
}
ngAfterViewChecked() {
this.cdkVirtualScrollViewport.scrollToIndex(2000);
} <ul class="list">
<cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
<ng-container *cdkVirtualFor="let n of numbers">
<li style="height:88px">{{ n }}</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>angular lifecycle angular7 angular-cdk virtualscroll
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
asked Nov 12 '18 at 19:52
DalieDalie
251111
add a comment |
3
I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list.
Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked, which feels off.
- Can someone confirm that the using those methods in the
ngAfterViewCheckedis the right way of doing things? - If not, show an alternative method / technique?
@ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
numbers: number = ;
constructor() {
for (let index = 0; index < 10000; index++) {
this.numbers.push(index);
}
}
ngAfterViewChecked() {
this.cdkVirtualScrollViewport.scrollToIndex(2000);
} <ul class="list">
<cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
<ng-container *cdkVirtualFor="let n of numbers">
<li style="height:88px">{{ n }}</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>angular lifecycle angular7 angular-cdk virtualscroll
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
asked Nov 12 '18 at 19:52
DalieDalie
251111
add a comment |
3
3
3
I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list.
Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked, which feels off.
- Can someone confirm that the using those methods in the
ngAfterViewCheckedis the right way of doing things? - If not, show an alternative method / technique?
@ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
numbers: number = ;
constructor() {
for (let index = 0; index < 10000; index++) {
this.numbers.push(index);
}
}
ngAfterViewChecked() {
this.cdkVirtualScrollViewport.scrollToIndex(2000);
} <ul class="list">
<cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
<ng-container *cdkVirtualFor="let n of numbers">
<li style="height:88px">{{ n }}</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>angular lifecycle angular7 angular-cdk virtualscroll
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
asked Nov 12 '18 at 19:52
DalieDalie
251111
I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list.
Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked, which feels off.
- Can someone confirm that the using those methods in the
ngAfterViewCheckedis the right way of doing things? - If not, show an alternative method / technique?
@ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
numbers: number = ;
constructor() {
for (let index = 0; index < 10000; index++) {
this.numbers.push(index);
}
}
ngAfterViewChecked() {
this.cdkVirtualScrollViewport.scrollToIndex(2000);
} <ul class="list">
<cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
<ng-container *cdkVirtualFor="let n of numbers">
<li style="height:88px">{{ n }}</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul> @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
numbers: number = ;
constructor() {
for (let index = 0; index < 10000; index++) {
this.numbers.push(index);
}
}
ngAfterViewChecked() {
this.cdkVirtualScrollViewport.scrollToIndex(2000);
} <ul class="list">
<cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
<ng-container *cdkVirtualFor="let n of numbers">
<li style="height:88px">{{ n }}</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul> @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
numbers: number = ;
constructor() {
for (let index = 0; index < 10000; index++) {
this.numbers.push(index);
}
}
ngAfterViewChecked() {
this.cdkVirtualScrollViewport.scrollToIndex(2000);
} <ul class="list">
<cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
<ng-container *cdkVirtualFor="let n of numbers">
<li style="height:88px">{{ n }}</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>angular lifecycle angular7 angular-cdk virtualscroll
angular lifecycle angular7 angular-cdk virtualscroll
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
asked Nov 12 '18 at 19:52
DalieDalie
251111
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
asked Nov 12 '18 at 19:52
DalieDalie
251111
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
edited Dec 3 '18 at 16:13
Goncalo Peres
1,3261318
1,3261318
asked Nov 12 '18 at 19:52
DalieDalie
251111
asked Nov 12 '18 at 19:52
DalieDalie
251111
asked Nov 12 '18 at 19:52
DalieDalie
251111
251111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
I have the same problem, I have a not so elegant solution
contentCheck = 0
ngAfterViewChecked() {
if (this.contentCheck < 3) {
this. cdkVirtualScrollViewport.scrollToIndex(4000);
this.contentCheck++;
}
}
After 3 checks the scrollToIndex works.
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
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
});
}
});
draft saved
draft discarded
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%2f53269172%2fhow-to-set-the-initial-index-position-for-the-cdkvirtualscrollviewport-in-angu%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
0
I have the same problem, I have a not so elegant solution
contentCheck = 0
ngAfterViewChecked() {
if (this.contentCheck < 3) {
this. cdkVirtualScrollViewport.scrollToIndex(4000);
this.contentCheck++;
}
}
After 3 checks the scrollToIndex works.
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
add a comment |
0
I have the same problem, I have a not so elegant solution
contentCheck = 0
ngAfterViewChecked() {
if (this.contentCheck < 3) {
this. cdkVirtualScrollViewport.scrollToIndex(4000);
this.contentCheck++;
}
}
After 3 checks the scrollToIndex works.
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
add a comment |
0
0
0
I have the same problem, I have a not so elegant solution
contentCheck = 0
ngAfterViewChecked() {
if (this.contentCheck < 3) {
this. cdkVirtualScrollViewport.scrollToIndex(4000);
this.contentCheck++;
}
}
After 3 checks the scrollToIndex works.
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
I have the same problem, I have a not so elegant solution
contentCheck = 0
ngAfterViewChecked() {
if (this.contentCheck < 3) {
this. cdkVirtualScrollViewport.scrollToIndex(4000);
this.contentCheck++;
}
}
After 3 checks the scrollToIndex works.
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
answered Dec 12 '18 at 3:18
Pablo CidPablo Cid
212
212
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53269172%2fhow-to-set-the-initial-index-position-for-the-cdkvirtualscrollviewport-in-angu%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
