How to Bind Property from one component to App.Component in angular 4?

Question

test.component.html

<input type="text" name="fname" [(ngModel)]="user">
<button
class="btn btn-primary">Update Server</button>

test.component.ts

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

@Component({
  selector: 'app-testcomp',
  styleUrls: ['./testcomp.component.css']
})
export class TestcompComponent implements OnInit {

  constructor() { }
  @Input() user:any;
  ngOnInit() {

  }


}

In the app.component.html

<app-testcomp [user]="ide"></app-testcomp>
<button
(click)="onserclicked()">Clicked</button>

In its ts file

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

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

  onserclicked()
  {
    alert(this.ide)
  }
}

On clicking the button in the app.component.html...it is showing undefined rather than the value which was entered in the text box in the user-component

Answer 1

Comment is right, but u can use other stuff to achieve it. Delete this input that actually don't needed, leave just

user:any;

Name your component like

<app-testcomp #testcomp></app-testcomp>
<button (click)="onserclicked(testcomp.user)">Clicked</button>

and then all will work.

Answer 2

You need to use the decorator @Output :

app.component.html :

<app-testcomp [user]="ide" (userClick)="onserclicked($event)"></app-testcomp>
<button
(click)="onserclicked()">Clicked</button>

test.component.html

<input type="text" name="fname" [(ngModel)]="user">
<button
class="btn btn-primary" (click)="onChange()">Update Server</button>

test.component.ts

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

@Component({
  selector: 'app-testcomp',
  styleUrls: ['./testcomp.component.css']
})
export class TestcompComponent implements OnInit {

  constructor() { }
  @Input() user:any;

  @Output()
  userClick: EventEmitter<any> = new EventEmitter<any>();

  public onChange(){
      this.change.emit();
  }

  ngOnInit() {

  }


}

You could try this. It's working, I guess.

You could this tutorial by Todd Motto to understand all of component events