ng new components-indepth --style=scss
ng serve

// Creating Components and adding Bootstrap
ng g c blog-post-tile
ng g c blog-list

add bootstrap to index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

// create many components inside list component: 
<app-blog-post-tile title="Blog post 1" summary="summary 1"></app-blog-post-tile>
<app-blog-post-tile title="Blog post 2" summary="summary 2"></app-blog-post-tile>
<app-blog-post-tile title="Blog post 3" summary="summary 3"></app-blog-post-tile>

inside app.component.html
<app-blog-list></app-blog-list>

// inside blog-post-tile.component.html
<div class="card">
	<div class="card-body">
		<h5 class="card-title">{{title}}</h5>
		<p class="card-text">{{summary}}</p>
		<a href="#" class="btn btn-primary">Read</a>
	</div>
</div>

// post-tile
@Input() title: string;
@Input() summary: string;

ngOnInit()
{}

========================================
============= PAGINATION ===============
========================================


PIPES:
=====
ng generate pipe truncate

inside truncate.pipe.ts:
  transform(value: any, args?: any): any {

    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
    
  }
in blog-post-tile.component.html:  
{{post.summary | truncate:[30]}}

in app.module.ts
providers: [TruncatePipe],

========================================
Create BlogPost class

export class BlogPost {

    isFav?: boolean;
    constructor(public title: string, public summary: string){

    }
}

========================================
// in blog-list.component.ts:

blogPosts: BlogPost[][];
currentPage: number;

in ngOnInit: 
 this.blogPosts=[
   [
     {title: 'Post 1',
     summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i'},
     {title: 'Post 2',
     summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i'},
     {title: 'Post 3',
     summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i'},
   ],
    [
     {title: 'Post 4',
     summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i'},
     {title: 'Post 5',
     summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i'},
     {title: 'Post 6',
     summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i'},
   ]
 ]

 this.currentPage = 0;
 
========================================



in blog-list.component.html:
=======================
<app-blog-post-tile
   *ngFor="let post of blogPosts[currentPage]"
   [post]="post">
</app-blog-post-tile> 

in blog-post-tile.component.ts:
@Input() post: BlogPost;

in blog-post-tile.component.html:
<div class="card">
	<div class="card-body">
		<h5 class="card-title">{{post.title}}</h5>
    <p class="card-text">{{post.summary}}</p>
		<a href="#" class="btn btn-primary">Read</a>
	</div>
</div>
  
========================================
ng g c paginator
========================================
in paginator.component.html
======================
<nav aria-label="Page navigation example">
 <ul class="pagination">
   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
   <li class="page-item"><a class="page-link" href="#">1</a></li>
   <li class="page-item"><a class="page-link" href="#">2</a></li>
   <li class="page-item"><a class="page-link" href="#">3</a></li>
   <li class="page-item"><a class="page-link" href="#">Next</a></li>
 </ul>
</nav>

blog-list.component.html: add to the end
<app-paginator></app-paginator>
========================================
Change the previous iteration 4 using *ngFor in paginator.component.html to:
================================================
<nav aria-label="Page navigation example">
 <ul class="pagination">
   <li *ngFor="let page of pages; index as i" class="page-item">
     <a class="page-link" href="#" (click)="pageNumberClicked(i)">{{i+1}}</a>
   </li>
 </ul>
</nav>
in paginator.component.ts:
=====================
 pages: number[];
  numberOfPages : number  = 3;
 
ngOnInit() {
   this.pages = new Array(this.numberOfPages);
 }

========================================
6-
in paginator.component.ts:
=====================
 @Output() pageNumberClick = new EventEmitter<number>() ;
 pageNumberClicked(pageNumber){
   this.pageNumberClick.emit(pageNumber);
 }
in blog-list.component.html:
=====================
<app-paginator
   [numberOfPages]="blogPosts.length"
   (pageNumberClick)="updatePage($event)">
</app-paginator>
========================================
in paginator.component.ts:
====================
 @Input() numberOfPages;
========================================
7-
in blog-list.component.ts
===================
updatePage(newPage){
 console.log("Event  emitted and method executed");
 this.currentPage = newPage;
}