CODEWITHSUNDEEP
angulartypescript
ux.engineer
ux.engineer

Reputation: 11338

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

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;
  }

  ...

Upvotes: 0

Views: 1492

Answers (3)

EagleX
EagleX

Reputation: 23

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

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

or

@Input() title: string

Upvotes: 1

Aniruddha Das
Aniruddha Das

Reputation: 21688

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;
  }

Upvotes: 1

Rajez
Rajez

Reputation: 4067

strings can be binded into @Input property like below

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

Upvotes: 3

Related Questions