Data not being passed to parent from child component angular 8

Question

I have a select dropdown which should pass the selected font object back up to the parent. But for some reason and I cannot see why, the key is printing, but the font object is returning undefined. It just doesn't want to bind.

.html

<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>
<button class="update" (click)="updateFont('header_font', selectedFont)">Update Font</button>

.child-html

<li>
    <select *ngIf="fonts" [(ngModel)]="selectedFont" (click)="selectFont(selectedFont)">
        <option disabled hidden [value]="selectUndefinedOptionValue">Choose a New Font
        </option>
        <ng-container *ngFor="let font of fonts; let i = index;">
            <option [ngValue]="font">{{ font.font_family }}</option>
        </ng-container>
    </select>
</li>

.child-component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Fonts } from '../fonts';

@Component({
  selector: 'app-settings-font-selector',
  templateUrl: './settings-font-selector.component.html',
  styleUrls: ['./settings-font-selector.component.scss']
})
export class SettingsFontSelectorComponent implements OnInit {

  @Input()
  fonts: Fonts[];

  selectedFont: Fonts;

  @Output()
  private newFont = new EventEmitter<Fonts>();

  constructor() { }

  ngOnInit() {
  }

  public selectFont() {
    const selectedFont = this.selectedFont
    this.newFont.emit(selectedFont);
  }

}

then in my parent, I am doing this:

parent-component.ts

selectedFont: Fonts;

public getFontValue(selectedFont: Fonts){
  if(selectedFont){
    this.selectedFont = selectedFont;
  }
}

updateFont(key: string){
  console.log(key, this.selectedFont);
}

I can't seem to understand why the variable isn't binding. Can anyone see what I'm doing wrong here?

Answer 1

The eventEmitter is the element you must include into your custom html selector app-settings-font-selector as the reference. In your case:

(newFont)="getFontValue($event)"

Answer 2

In the binding, you must use the name of the @Output parameter. You're using the name of the public method that fires the event.

I the parent HTML the binding should be newFont instead of selectFont . The following code should work:

Parent html:

<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>
<button class="update" (click)="updateFont('header_font', selectedFont)">Update Font</button>

UPDATE: Also try to move the console.log to the getFontValue method on parent. Make @output in child public.

Answer 3

the event emitter name is basically the method you are trying to output from child to parent.

<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>

which in your case is newFont.

example: sample