Angular 2 Component interactions


  • <element [variableName]="value"></element> //Declaring input to child when using @Input() method.
  • <element (childOutput)="parentFunction($event)"></element> //Declaring output from child when using @Output() method.
  • @Output() pageNumberClicked = new EventEmitter(); //Used for sending output data from child component when using @Output() method.
  • this.pageNumberClicked.emit(pageNum); //Used to trigger data output from child component. when using @Output() method.
  • @ViewChild(ComponentClass) //Property decorator is required when using ViewChild.


pageCountUsed to tell number of pages to be created to the child component.
pageNumberClickedName of output variable in the child component.
pageChangedFunction at parent component that listening for child components output.