CODEWITHSUNDEEP
htmlangulareventsbinding
Walter White
Walter White

Reputation: 1026

@Output and custom events don't work

I'm new in Angular and try pass data between child and parent component.

In child component.ts

@Output() doubleClick = new EventEmitter<string>();

onDoubleClick(nameAccount: string){
   this.doubleClick.emit(nameAccount);
}

child component.html

<button class="btn btn-primary" (click)="onCreateAccount(accountName.value, status.value)" (dblclick)="onDoubleClick(accountName.value)">

In parent component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  accounts = [
    {
      name: 'Master Account',
      status: 'active'
    },
    {
      name: 'Testaccount',
      status: 'inactive'
    },
    {
      name: 'Hidden Account',
      status: 'unknown'
    }
  ];

  nameAccount = '';

  onAccountAdded(newAccount: {name: string, status: string}) {
    this.accounts.push(newAccount);
  }

  onStatusChanged(updateInfo: {id: number, newStatus: string}) {
    this.accounts[updateInfo.id].status = updateInfo.newStatus;
  }

  afeterDoubleClicked(name: string) {
    this.nameAccount = name;
  }
}

In parent component.html

<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
        <app-new-account (accountAdded)="onAccountAdded($event)"></app-new-account>
        <hr>
        <app-account *ngFor="let acc of accounts; let i = index" [account]="acc" [id]="i" (statusChanged)="onStatusChanged($event)"></app-account>
    </div>
</div>
<p (doubleClick)="afeterDoubleClicked($event)">This is paragraph {{nameAccount}}</p>

In Console don't show any error, when I click button information from child isn't display in paragraph. I don't know how to properly use debuger and maybe someone tell me why property isn't emmit?

Upvotes: 0

Views: 76

Answers (1)

CharanRoot
CharanRoot

Reputation: 6325

you should add (doubleClick) output emitter to your child component

<app-new-account  (doubleClick)="afeterDoubleClicked($event)"(accountAdded)="onAccountAdded($event)"></app-new-account>

Upvotes: 1

Related Questions