Styjun

How to trick a fairly simplistic kill-counter?

How to get maximum number that newcount can hold?

Export economy of Mars

A conjectural trigonometric identity

If a Shadow Magic sorcerer casts Darkness using the Eyes of the Dark feature, can they cast another spell that requires concentration?

How to power down external drive safely

Why do we need a voltage divider when we get the same voltage at the output as the input?

Adding a (stair/baby) gate without facing walls

Accurately recalling the key - can everyone do it?

Can it be useful for a player block with a hanging piece in a back rank mate situation?

If I buy and download a game through second Nintendo account do I own it on my main account too?

Feedback diagram

Is Norway in the Single Market?

Word for giving preference to the oldest child

Word to describe someone doing something even though told not to

How to set Adobe DC PDF reader as default for ALL pdfs without having to open security preferences every time

Being told my "network" isn't PCI Complaint. I don't even have a server! Do I have to comply?

What is realistic quality of computer blueprints quickly backed up before apocalypse and their impact on future design?

Skipping same old introductions

"Will flex for food". What does this phrase mean?

Can I say "Gesundheit" if someone is coughing?

Ernie and the Superconducting Boxes

Is this popular optical illusion made of a grey-scale image with coloured lines?

Flat maps and Zariski tangent spaces

Add 'go to page' functionality to material pagination in angular

Angular 2+ filter *ngFor table with Material PaginatorChange tab by click on a button angular material 5Mat-Table with paginator not passing correct index for edit/deleteangular material 2 paginator with mat-table initializationAdd 'jump to' functionality to material pagination in angularPrint function in angular is not showing text inside inputs and angular material styleAngular 5 Mat paginator not Working with dynamically PaginateAngular 4 Material use mat-paginator with images?Angular material virtual scroll with remote dataPagination does not work in angular 7. (I use angular material)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I need to add a 'jump to' functionality to material pagination. it doesn't have built-in method for that so I need to add it manually.

at the moment I have this code:

<mat-paginator [length]="pageLength"
 [pageSize]="10"
 [pageSizeOptions]="pageLength | checkPageLength"
 [showFirstLastButtons]="true">
 </mat-paginator>

and it shows: my current pagination
and I need it to have a textbox and a 'go' button for jumping to a specific page since I have many pages.

angular angular-material

share|improve this question

asked Mar 27 at 0:19

J.GarayJ.Garay

1

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Request you to share the Stackblitz
  
  – Prashant Pimpale
  Mar 27 at 6:03
  

  
  
  
  

add a comment | 

0

I need to add a 'jump to' functionality to material pagination. it doesn't have built-in method for that so I need to add it manually.

at the moment I have this code:

<mat-paginator [length]="pageLength"
 [pageSize]="10"
 [pageSizeOptions]="pageLength | checkPageLength"
 [showFirstLastButtons]="true">
 </mat-paginator>

and it shows: my current pagination
and I need it to have a textbox and a 'go' button for jumping to a specific page since I have many pages.

angular angular-material

share|improve this question

asked Mar 27 at 0:19

J.GarayJ.Garay

1

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Request you to share the Stackblitz
  
  – Prashant Pimpale
  Mar 27 at 6:03
  

  
  
  
  

add a comment | 

I need to add a 'jump to' functionality to material pagination. it doesn't have built-in method for that so I need to add it manually.

at the moment I have this code:

<mat-paginator [length]="pageLength"
 [pageSize]="10"
 [pageSizeOptions]="pageLength | checkPageLength"
 [showFirstLastButtons]="true">
 </mat-paginator>

and it shows: my current pagination
and I need it to have a textbox and a 'go' button for jumping to a specific page since I have many pages.

angular angular-material

share|improve this question

asked Mar 27 at 0:19

J.GarayJ.Garay

1

<mat-paginator [length]="pageLength"
 [pageSize]="10"
 [pageSizeOptions]="pageLength | checkPageLength"
 [showFirstLastButtons]="true">
 </mat-paginator>

angular angular-material

angular angular-material

share|improve this question

asked Mar 27 at 0:19

J.GarayJ.Garay

1

share|improve this question

asked Mar 27 at 0:19

J.GarayJ.Garay

1

asked Mar 27 at 0:19

J.GarayJ.Garay

1

asked Mar 27 at 0:19

J.GarayJ.Garay

1

2 Answers
2

active

oldest

votes

0

In your html file

<mat-form-field>
 <input matInput [(ngModel)]="goToPage">
</mat-form-field>
<button (click)="updateGoToPage()">Go</button>

And in your ts file

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() 

 this.paginator.pageIndex = this.goToPage - 1;
 

May be this will help.

share|improve this answer

edited Mar 27 at 7:04

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  He is asking for Go to Page that is User can enter any page number and click to redirect to that page
  
  – Prashant Pimpale
  Mar 27 at 6:04
  

  
  
  
  

add a comment | 

0

I found a piece of code from here which is working fine for me:

this.paginator.pageIndex = pageNumber;

this.paginator.page.next( 
 pageIndex: pageNumber,
 pageSize: this.paginator.pageSize,
 length: this.paginator.length
);

Working_Example

share|improve this answer

edited Jun 28 at 12:47

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368026%2fadd-go-to-page-functionality-to-material-pagination-in-angular%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

In your html file

<mat-form-field>
 <input matInput [(ngModel)]="goToPage">
</mat-form-field>
<button (click)="updateGoToPage()">Go</button>

And in your ts file

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() 

 this.paginator.pageIndex = this.goToPage - 1;
 

May be this will help.

share|improve this answer

edited Mar 27 at 7:04

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  He is asking for Go to Page that is User can enter any page number and click to redirect to that page
  
  – Prashant Pimpale
  Mar 27 at 6:04
  

  
  
  
  

add a comment | 

0

In your html file

<mat-form-field>
 <input matInput [(ngModel)]="goToPage">
</mat-form-field>
<button (click)="updateGoToPage()">Go</button>

And in your ts file

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() 

 this.paginator.pageIndex = this.goToPage - 1;
 

May be this will help.

share|improve this answer

edited Mar 27 at 7:04

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  He is asking for Go to Page that is User can enter any page number and click to redirect to that page
  
  – Prashant Pimpale
  Mar 27 at 6:04
  

  
  
  
  

add a comment | 

In your html file

<mat-form-field>
 <input matInput [(ngModel)]="goToPage">
</mat-form-field>
<button (click)="updateGoToPage()">Go</button>

And in your ts file

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() 

 this.paginator.pageIndex = this.goToPage - 1;
 

May be this will help.

share|improve this answer

edited Mar 27 at 7:04

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

<mat-form-field>
 <input matInput [(ngModel)]="goToPage">
</mat-form-field>
<button (click)="updateGoToPage()">Go</button>

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() 

 this.paginator.pageIndex = this.goToPage - 1;
 

share|improve this answer

edited Mar 27 at 7:04

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

answered Mar 27 at 5:51

Keval K.Keval K.

122 bronze badges

0

I found a piece of code from here which is working fine for me:

this.paginator.pageIndex = pageNumber;

this.paginator.page.next( 
 pageIndex: pageNumber,
 pageSize: this.paginator.pageSize,
 length: this.paginator.length
);

Working_Example

share|improve this answer

edited Jun 28 at 12:47

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges

add a comment | 

0

I found a piece of code from here which is working fine for me:

this.paginator.pageIndex = pageNumber;

this.paginator.page.next( 
 pageIndex: pageNumber,
 pageSize: this.paginator.pageSize,
 length: this.paginator.length
);

Working_Example

share|improve this answer

edited Jun 28 at 12:47

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges

add a comment | 

I found a piece of code from here which is working fine for me:

this.paginator.pageIndex = pageNumber;

this.paginator.page.next( 
 pageIndex: pageNumber,
 pageSize: this.paginator.pageSize,
 length: this.paginator.length
);

Working_Example

share|improve this answer

edited Jun 28 at 12:47

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges

this.paginator.pageIndex = pageNumber;

this.paginator.page.next( 
 pageIndex: pageNumber,
 pageSize: this.paginator.pageSize,
 length: this.paginator.length
);

share|improve this answer

edited Jun 28 at 12:47

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges

answered Mar 27 at 6:29

Prashant PimpalePrashant Pimpale

5,33744 gold badges1111 silver badges4141 bronze badges