Angular6 Data from Input to other component

Question

I have a component, which writes: Hello Angular6
app.component.html:

<hello name="{{ name }}"></hello>

app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
}

Task is, to make a new component, called "Userchange"

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

@Component({
  selector: 'app-user-change',
  templateUrl: './userchange.component.html',
  styleUrls: ['./userchange.component.css']
})
export class UserChangeComponent {
  @Input() change: string;  
}

There I have a button and a text type input, it should work like that: I write something to the input box, then I press the button, and the 'name' in the app.component should be the given text.
can you please help me with that?

I just begun learning Angular.

If this is angular 6 then it should be tagged as angular and not angularjs. AngularJS is the pre2 library that is vastly different than modern angular. Should also update the title to reflect Angular 6 vs AngularJS — scrappedcola, Jun 25 '18 at 14:29
I would suggest checkout the tutorial mentioned by firegloves and also https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2, note angular 2+ work fundamentally the same it's only when you try to go back to pre2 that it's considered a different library. — scrappedcola, Jun 25 '18 at 15:14

score 3 · Accepted Answer · answered Jun 25 '18 at 15:27

Welcome to Angular! There are a few ways to do this. Here's one.

To see how it all fits together, you can view this code in StackBlitz here.

In userChange.component.html:

<input type="text" #myTextInput value="DefaultValue"/>
<button (click)="changeName(myTextInput.value)">Click me to change the name</button>

In userChange.component.ts:

nameValue: string;
@Output() nameChange = new EventEmitter();

changeName(val){
   this.name = val;
}

@Input()
  get name() {
    return this.nameValue;
  }

set name(val) {
   this.nameValue = val;
   this.nameChange.emit(this.nameValue);
}

App.Component.html will use two-way data binding, which means that your variable (in this case name) will be used as both a variable input and an output via the eventEmitter to signal back to the parent that name has changed, and to act accordingly:

<userChange [(name)]="name"></userChange>
Hi {{name}}

For further reference I'd reccomend going through Angular's tour of heroes and thoughtram's excellent post on Two-way Data Binding.

score 1 · Answer 2 · answered Jun 25 '18 at 15:39

1

I'm also learning angular :). Here is another version, probably less neat then the previous answer.

answered Jun 25 '18 at 15:39

Serge Makarov

351
2
7

Yours is probably a bit easier to understand though, as long as skick understands what NgModel does. In case he doesn't, the documentation is here: https://angular.io/api/forms/NgModel – lehmanad1 Jun 25 '18 at 15:45

Angular6 Data from Input to other component

2 Answers2