Angular2 : @output Decorator bind Error

Question

I am trying to output value from child to parent using @output decorator but it gives me binding error. I dont know whats wrong with my code.

Unhandled Promise rejection: Template parse errors: Can't bind to 'demo' since it isn't a known property of 'app-child'. 1. If 'app-child' is an Angular component and it has 'demo' input, then verify that it is part of this module. 2. If 'app-child' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

please help i tried many other post but nothing helped me

// Child component

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() usernameModel: string;
@Output() demo = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  eventEmit(){
    this.demo.emit('message');
  }

}

// parent component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../login.service';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginService]
})
export class LoginComponent implements OnInit {
usernameModel: string;
passwordModel: string;
validLogin: Boolean;
loginData: any;
loginDataLength: number;
msg: string;
  constructor(private router: Router, private loginService: LoginService) { 
    console.log('constructor');
  }

  ngOnInit(){
    console.log('on init');
    this.loginService.getLoginData()
      .subscribe(data => {
        this.loginData = data;
        this.loginDataLength = data.length;
      });


  }

  callChild(event){
    this.msg = event;
  }

  homeNav(){   


    if(this.usernameModel === 'jay' && this.passwordModel === 'Jay'){
      this.validLogin = true;
      this.router.navigate(['/home']);
    }
    else{
      this.validLogin = false;
    }

  }
}

<!-- Parent template -->

<div id="loginBox">
    <div class="alert alert-danger" *ngIf="validLogin === false">
        <strong>Alert!</strong> Wrong Username/Password.
    </div>
    <form class="form-group" #loginForm="ngForm">
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input type="text" class="form-control" placeholder="Username" [(ngModel)]="usernameModel" name="username" #username="ngModel" required />
          <span class="input-group-addon errorBox" *ngIf="username.errors && (username.dirty || username.touched)">
              <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!username.errors.required"></i>
          </span>
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input type="password" class="form-control" placeholder="Password" [(ngModel)]="passwordModel" name="password" #password="ngModel" required />
          <span class="input-group-addon errorBox" *ngIf="password.errors && (password.dirty || password.touched)">
              <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!password.errors.required"></i>
          </span>
        </div>
        <button class="btn btn-primary btn-block" [disabled]="!loginForm.valid" (click)="homeNav()" >Login</button>
    </form>
</div>
{{msg}}
<app-child [usernameModel]="usernameModel" [demo]="callChild($event)"></app-child>

<!-- child template -->

<p>
  child works! {{usernameModel}}
</p>

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-04-06T17:26:39

[demo]="callChild($event)"

should be

(demo)="callChild($event)"

[] is for value binding () is for event binding

Angular2 : @output Decorator bind Error

1 Answers