(Angular4 / TypeScript) How to Bind Component @Input Property to View?

Question

How to display a component input property in view?

I've tried several ways, including this, but none has been working: https://ngdev.space/angular-2-input-property-changes-detection-3ccbf7e366d2

Component usage:

<card [title]='My Awesome Card'></card>

Template:

<div class="ui card"> <div class="content"> <div class="header">{{ title }}</div> </div> </div>

Part of component declaration:

@Component({ selector: 'card', templateUrl: './card.component.html' }) export class CardComponent implements OnInit { private _title: string; get title(): string { return this._title; } @Input() set title(title: string) { console.log('prev value: ', this._title); console.log('got title: ', title); this._title = title; } ...

Rajez · Accepted Answer · 2017-09-06 17:46:40Z

3

strings can be binded into @Input property like below

<card [title]="'My Awesome Card'"></card>

edited Sep 6, 2017 at 17:46

answered Sep 6, 2017 at 17:43

Rajez

4,0771 gold badge16 silver badges21 bronze badges

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

2 Comments

Rajez Over a year ago

@envision sorry it's a mistake. updated answer , hope it may help

ux.engineer Over a year ago

That was it, I needed to bind a string ...thank you very much @Rajez

Aniruddha Das · Accepted Answer · 2017-09-06 17:49:53Z

I see there are 2 errors

passing string literal <card [title]="'My Awesome Card'"></card> - As you are passing string not a variable pass in between quotes.

@Input - when data passed to child it need to be a @Input variable not function. you need to declare variable as @Input

@Component({ selector: 'card', templateUrl: './card.component.html' }) export class CardComponent implements OnInit { @Input() _title: string; get title(): string { return this._title; } set title(title: string) { console.log('prev value: ', this._title); console.log('got title: ', title); this._title = title; }

Those are getters/setters, not "functions" and yes you can use the @Input decorator on them. See the link provided by the OP.
Nice to know that. I never used @Input() on setter or getter. :)
That's one of the really great things about hanging out here ... its a great opportunity to see how other devs do things differently so we can learn so much more! :-)

EagleX · Accepted Answer · 2018-01-06 20:16:29Z

In component declaration part, we can just pass input variable as below-

@Input() title: string = "My Awesome Card";

or

@Input() title: string

Collectives™ on Stack Overflow

(Angular4 / TypeScript) How to Bind Component @Input Property to View?

3 Answers 3

2 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Related