@Component({
  selector: 'display-error-messages',
  template:
    `<div class="alert alert-danger">
	<ul>
	   <li *ngFor="let item of messages">{{ item }}</li>
	</ul>
     </div>`
})
export class DisplayErrorMessagesComponent {

  public constructor() { 
  @Input() public messages: string[]
}

@Component({
  selector: 'app-child',
  template:
    `<h3>I'm Child!</h3>
     <button type="button" (click)="onClick()">Click Me!</button>`,
})
export class ChildComponent {

  public constructor() { }

  @Output() public insideButtonClick = new EventEmitter();

  public onClick(): void {

    this.insideButtonClick.emit(`This Message Sent By Child!`);

  }

}

@Component({
  selector: 'app-root',
  template:
    `<h1>I'm Parent:</h1>Message: {{ message }}
     <hr>
     <app-child (insideButtonClick)="doSomething($event)"></app-child>
    `,
})
export class AppComponent {

  public constructor() {

    this.message = `First Message!`;

  }

  public message: string;

  public doSomething(sentMessage: string): void {

    this.message = sentMessage;

  }

}

import { OnInit } from '@angular/core';
import { Output } from '@angular/core';
import { Component } from '@angular/core';
import { EventEmitter } from '@angular/core';
@Component({
  selector: 'child-app',
  templateUrl: './child-app.component.html',
  styleUrls: ['./child-app.component.css']
})
export class ChildAppComponent implements OnInit {

  constructor() { }
  @Output() public myEmitter = new EventEmitter();

  public ngOnInit() {
    setInterval(() => { this.myEmitter.emit(); }, 1000)
  }

}

import { Component } from '@angular/core';
import { ChildAppComponent } from './child-app/child-app.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public myparam: number;

  constructor() {
this.counter = 0;
  }
  public counter : number;
  public myMethod():void {
    this.counter++;
  }

}

MyParent counter = {{counter}}

<app-grid-list #appgrid></app-grid-list>
<app-category (myFilter)="appgrid.doFilter($event)"></app-category>

  public doFilter(event: any){
    this.filter =  event as PagingFilterModel
    this.getData();
  }