is there way to create a pagination for a page in angular?

Question

I am unable to create angular pagination for a list of cards

i added some cards but i do not know how to make the component with pagination

  <!-- Grid column -->
  <div class="column-2 px-2 mb-r">

    <!--Card-->
    <div class="card default-color-dark">

      <!--Card image-->
      <div class="view">
        <img src="https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg" class="card-img-top" alt="photo">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body text-center">
        <!--Title-->
        <h4 class="card-title white-text">Title of the news</h4>
        <!--Text-->
        <p class="card-text white-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.</p>
        <a href="#" class="btn btn-outline-white btn-md">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

aaa

Yasser Mas · Accepted Answer · 2019-08-21T02:28:47.043

Check angular material paginator component

https://material.angular.io/components/paginator/examples

  export class PaginatorConfigurableExample {
  length = 100;
  pageSize = 5;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  cardsList = ['card 1', 'card 2','card 3', 'card 4','card 5', 'card 6','card 7', 'card 8','card 9', 'card 10','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2'];

  filterdCards = this.cardsList.slice(0,this.pageSize);
  pageEvent: PageEvent;
  updateCards(e){
    console.log(e);
    this.filterdCards = this.cardsList.slice( e.pageIndex * e.pageSize, (e.pageIndex +1) * e.pageSize);
    console.log(this.filterdCards);
  }
}




<mat-card *ngFor="let card of filterdCards">{{card}}</mat-card>

<mat-paginator [length]="cardsList.length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = updateCards($event)">
</mat-paginator>

cardsList = [{
    imgUrl: 'https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg',
    title: "Title of the news", body: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.` },
  {
    imgUrl: 'https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg',
    title: "Title of the news", body: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.` },
  {
    imgUrl: 'https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg',
    title: "Title of the news", body: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.` }];



        <div class="card default-color-dark"  *ngFor="let card of filterdCards">

          <!--Card image-->
          <div class="view">
            <img [src]="card.imgUrl" class="card-img-top" alt="photo">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body text-center">
            <!--Title-->
            <h4 class="card-title white-text">{{card.title}}</h4>
            <!--Text-->
            <p class="card-text white-text">{{card.body}}</p>
            <a href="#" class="btn btn-outline-white btn-md">Button</a>
          </div>

        </div>

if you want to add more dynamic content, you have to add it in cards list item ( btnHref:'#' ) and bind it to the html ({{card.btnHref}})

Hello , that did not work as i wantedn the card removed from the view . — LearnDeep95, Aug 21 '19 at 01:21
i edited the code on top , u can see that i added paginator but it does not work — LearnDeep95, Aug 21 '19 at 01:23
omg the card i put how i insert it in your code ?? i feel comfused please help me i am really a beginner in angular — LearnDeep95, Aug 21 '19 at 02:12
replace the cardsList in typescript file with your list cardsList = ['card 1', 'card 2','card 3', 'card 4','card 5', 'card 6','card 7', 'card 8','card 9', 'card 10','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2']; it's a basic example for viewing only card name if you have more information to be viewed in your card please share with me your card info or screenshout will be better — Yasser Mas, Aug 21 '19 at 02:16
there is a link in the top aaa of screen capture , and also the card code is on top with status , i need just prototype how to do it with real cards — LearnDeep95, Aug 21 '19 at 02:23

is there way to create a pagination for a page in angular?

1 Answers1