Angular 2 button widget inside function all page load variable gets undefined

Question

I create a common widgets for button element.

Widget - TS:

import { Component, Input, HostListener, OnInit } from '@angular/core';

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

export class AppButtonComponent {
//parameter

@Input() public callback : Function;

}

Widget - html:

<button (click)="callback()" type="button">TestButton</button>

Another component, where i use above button component:

HTML:

<app-button [callback]="clickEvent"></app-button>

TS:

import { Component, AfterViewInit, ViewChild, ContentChild, Input } from '@angular/core';
@Component({
  moduleId:"appComponent",
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})

export class AppComponent {
user={
    name:"test",
    placeholder:"plac"
  }
userString='';
   public clickEvent(){
        this.userString = JSON.stringify(this.user);
        console.info('obj = '+ this.userString);
      }
}

I get below console message after clicking on button:

obj = undefined

If I missed something that's why i didn't get page load variable into button callback function.

Thanks in advance.

Answer 1

For emitting custom events from directives and components its advisable to use EventEmitter

So make below changes an check it again :

// Widget

import { Component, Output, EventEmitter, HostListener, OnInit } from '@angular/core';

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

export class AppButtonComponent {
  //parameter

  @EventEmitter() public callback: EventEmitter<any> = new EventEmitter();

  public onClick(e) {
    this.callback.emit(e);
  }

}

// Widget HTML

<button (click)="onClick($event)" type="button">TestButton</button>

// Usage

<app-button (callback)="clickEvent($event)"></app-button>

//Compoenent

export class AppComponent {
  public userString:string = '';
  public user: any = {
    name:"test",
    placeholder:"plac"
  };

  public clickEvent(){
    this.userString = JSON.stringify(this.user);
    console.info('obj = '+ this.userString);
  }
}