Angular

}
}
@NgModule({
imports: [CommonModule],
exports: [],
declarations: [DataListComponent, PagerComponent],
providers: [DataListService],
})
export class DataListModule { }
PagerComponent lists all the page numbers. We set click event on each of them so we can let the parent know
about the clicked page number.
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'pager',
template: `
{{page}}
`
})
export class PagerComponent {
@Input() pageCount: number;
@Output() pageNumberClicked = new EventEmitter();
constructor() { }
}
pageClicked(pageNum){
this.pageNumberClicked.emit(pageNum); //Send clicked page number as output
}
Section 9.3: Parent - Child interaction using ViewChild
Viewchild offers one way interaction from parent to child. There is no feedback or output from child when
ViewChild is used.
We have a DataListComponent that shows some information. DataListComponent has PagerComponent as it's
child. When user makes a search on DataListComponent, it gets a data from a service and ask PagerComponent to
refresh paging layout based on new number of pages.
import { Component, NgModule, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataListService } from './dataList.service';
import { PagerComponent } from './pager.component';
@Component({
selector: 'datalist',
template: `
Search
{{person.name}}
{{person.surname}}
GoalKicker.com – Angular 2 Notes for Professionals 48