@Input and @Output are always undefined in Angular 5

Question

Whatever values are inside the individuals are printed without issues but whatever is obtained using @Input or @Output is not displayed properly.

I'm trying to assign childData in child.component.ts with parent property parentData.

Similarly I'm trying to assign child property "data" to parent property "data"

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() public childData: string;
  @Output() public event: EventEmitter<string> = new EventEmitter();
  public data = 'Harsha';
  constructor() { }

  onClick() {
    console.log("sending value to parent:"+this.data);
    this.event.emit(this.data);
  }

  ngOnInit() {
  }

}

parent.component.ts

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  public parentData = 'Hello Parent';
  public data: string;

  constructor() { }

  onOutputEvent(data: string){
    console.log("in parent:"+data);
    this.data = data;
  }

}

<!-- child.component.html -->
<h3>Printing parent value in child component: {{childData}}</h3>

<h4>Printing child value:{{data}}</h4>

<button (click)="onClick()">Send value to parent</button>

<!-- parent.componnt.html -->
<h3>Printing parent Data: {{parentData}}</h3>
<h4>Printing child Data: {{data}}</h4>

<app-child> [childData]="parentData" (event)="onOutputEvent($event)"</app-child>

<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-parent></app-parent>

Try <app-child [childData]="parentData" (event)="onOutputEvent($event)"></app-child>. — Martin Parenteau
– Martin Parenteau, Commented Oct 30, 2018 at 0:57
You are closing the tag without assigning the attributes.<app-child> — Narendra
– Narendra, Commented Oct 30, 2018 at 0:58

NgoCuong · Accepted Answer · 2018-10-30 01:03:14Z

1

You closed the tag before assigning the attributes.

<app-child [childData]="parentData" (event)="onOutputEvent($event)"></app-child>

answered Oct 30, 2018 at 1:03

NgoCuong

2,3291 gold badge13 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maarti · Accepted Answer · 2018-10-30 01:05:14Z

0

You closed the app-child directive at the wrong place, try:

<app-child [childData]="parentData" (event)="onOutputEvent($event)"></app-child>

answered Oct 30, 2018 at 1:05

Maarti

3,7294 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

@Input and @Output are always undefined in Angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related