CODEWITHSUNDEEP
angular
Sandeep Gupta
Sandeep Gupta

Reputation: 7250

How to Define custom property in the same component in angular2

I am trying to define a custom property count. But following gives error:Can't bind to 'count' since it isn't a known property of 'p'. How to remove this error and make count a custom property of <p>

other.component.html

<p [count] = "10">
  other works!
</p>

other.component.ts

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

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

  @Input() count = 10;

  constructor() { }

  ngOnInit() {
  }

}

Upvotes: 4

Views: 14002

Answers (2)

Tung Nguyen
Tung Nguyen

Reputation: 263

You're wrong in using @Input of Angular.

@Input() count = 10 -> it is used to set property for your component which named that 'app-other'. So you must set count property at parent component.

For example in app.component.html:

<div>
   <app-other [count] = 10></app-other>
</div>

Hope that help!

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657416

<p> doesn't have a name property. You can bind to the name attribute using

[attr.name]="name"

or alternatively

attr.name="{{name}}"

Use this 2nd form (interpolation) only for binding string values, because the passed value will always be stringified.

Upvotes: 12

Related Questions