Access Angular 6 component library values with 2 w

Question

Working in Angular 6 I've successfully created a Angular Component Library and added a component that has a drop down control in it.

I've added the neccessary imports in app.module and got my library component to show up!!!

..using its selector

<my-custom-dropdown></my-custom-dropdown> 

The problem I'm having is how do I get the value that is selected from the dropDown in the app.component?

Any help is greatly appreciated!!

Answer 1

Parent component template:

<my-custom-dropdown (selectedValue)="handleselectedvalue($event)"></my-custom-dropdown>
<!-- Add a handleselectedvalue($event) function in your parent component. $event will contain the selected value -->

In your child component:

@Output() selectedValue = new EventEmitter</*type of selected value goes here*/>();

handleSelection(event) {
    this.selectedValue.emit(event);
}

Child component template:

<!-- Child component template -->
<someElement (click)="handleSelection($event)"></someElement>