Passing data from child component to parent component

Question

I am trying to pass alerts from my child components to parent component.

I have following app component:

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

App.component.html:

<header>
Some header
</header>
<clr-alert [clrAlertType]="'alert-warning'" [clrAlertAppLevel]="true">
    <div class="alert-item">
        <span class="alert-text">
            {{My_Alert_value_that_I want to pass from child}}
        </span>
        <div class="alert-actions">
            <button class="btn alert-action">Fix</button>
        </div>
    </div>
</clr-alert>
<router-outlet></router-outlet>

My Child component:

@Component({
    styleUrls: ['./child.component.scss'],
    templateUrl: './child.component.html',
})
export class ChildComponent {
  alerts: string
  constructor(){
    this.alerts = "";
  }

   this.alert = "My alerts, which I want to show on the app.component.html"
}

Can anyone please help me here?

Answer 1

You can expose data from the child to the parent by using the EventEmitter , and handling the event in the parent component.

The official docs have a really good example of using EventEmitter :

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html