Why would my Input Property Binding not work? - Angular

Question

I am getting the property as undefined when attempting input property binding. Component with inputs: like.component.ts `

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

@Component({
  selector: 'like',
  templateUrl: './like.component.html',
  styleUrls: ['./like.component.css']
})
export class LikeComponent{
  @Input('is-liked') isLiked: boolean;
  @Input('likes-count') likesCount: number;


  onClick(){
    console.log("clicked");
    console.log(this.likesCount);
    console.log(this.isLiked);
    this.likesCount += (this.isLiked) ? -1 : 1;
    this.isLiked = !this.isLiked;

  }

}

` like.component.html

<p>
  likes work
</p>
<span class="glyphicon glyphicon-heart"
      [class.highlighted]="isLiked"
      (click)=onClick()></span>
<span>{{ likesCount }}</span>

app.component.ts

import { Component } from '@angular/core';
import { LikeComponent } from './like/like.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    isSelected = true;
    likesCount = 5;


}

app.component.html

<like 
[likes-count]="likesCount"
[is-liked]="isSelected"
></like>

I declare the input properties in the Like Component and then bind them in the app component - but it seems the values are not being passed: Developer Tools Console

Megan Cunningham · Accepted Answer · 2018-05-21 16:35:27Z

1

In app.module.ts I had

 bootstrap: [AppComponent, LikeComponent]

and changed it to:

 bootstrap: [AppComponent]

now the properties bind as expected.

answered May 21, 2018 at 16:35

Megan Cunningham

315 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-05-21 16:26:13Z

0

You should just have

<like 
[likescount]="likesCount"
[isliked]="isSelected"
></like>

and

 @Input() isLiked: boolean;
 @Input() likesCount: number;

DEMO STACKBLITZ

edited May 21, 2018 at 16:26

answered May 21, 2018 at 15:58

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

6 Comments

Megan Cunningham Over a year ago

That is not working for me either. I saw some posts that you should avoid camel casing in HTML but that is what I started with.

Megan Cunningham Over a year ago

I attached a screenshot of the console output from developer tools to the end. I have not used stackblitz but will work on that later.

Sajeetharan Over a year ago

CHECK THE DEMO stackblitz.com/edit/…

Sajeetharan Over a year ago

@Vikas i have just added the component interaction part, logic OP has to deat with

Megan Cunningham Over a year ago

It was because I had 'LikeComponent' listed in the bootstrap piece with 'AppComponent'. Thanks for the demo! I will use stackblitz in the future. So changing bootstrap: [AppComponent, LikeComponent] -> bootstrap: [AppComponent] fixed the issue.

|

Collectives™ on Stack Overflow

Why would my Input Property Binding not work? - Angular

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related