1

This post is related to: Angular 2 component input without value

I would like to achieve a card component with an Boolean input attribute named scrollable.

  1. <card>...</card> without the scrollable attribute results to false in the controller
  2. <card [scrollable]>...</card> with only the scrollable attribute results to true

I've already tried the accepted solution in the linked post.

Stackblitz: https://stackblitz.com/edit/angular-ivy-ylsxzm?file=src/app/app.component.html

Update

To solve the issue, I just had to remove the square brackets from the Scrollable attribute.

Forked Stackblitz: https://stackblitz.com/edit/angular-ivy-s6d8ag?file=src/app/app.component.html

Christopher
  • 79
  • 9

1 Answers1

4

Change your card.component.ts like this:

export class CardComponent {
  constructor() {}

  ngOnInit() {
    if (!this._scrollable) this._scrollable = false;
    console.log(this._scrollable);
  }

  public _scrollable: boolean;
  @Input()
  get scrollable() {
    return this._scrollable;
  }

  set scrollable(value: any) {
    this._scrollable = this.coerceBooleanProperty(value);
  }

  coerceBooleanProperty(value: any): boolean {
    return value != null && `${value}` !== 'false';
  }
}

Now, you can use it like this:

<card></card>                // _scrollable = false
<card scrollable></card>     // _scrollable = true

Note that you can use scrollable without the [] since it is a Boolean value, and it will default to true. You can also use it with [] but you would have to pass the expression (or component property) that will result to Boolean.

<card [scrollable] = "false"></card>    // _scrollable = false
<card [scrollable] = "true"></card>     // _scrollable = true

Working example

NeNaD
  • 18,172
  • 8
  • 47
  • 89
  • Ok, my stackblitz example is working if I removing the square brackets from the scrollable attribute in the html template. Do you know why? – Christopher Sep 14 '21 at 11:40
  • As stated in this post https://stackoverflow.com/questions/35944749/what-is-the-difference-between-parentheses-brackets-and-asterisks-in-angular2 square brackets are use to bind a value to a property. It means using the square bracket without giving a value to the property won't work – Valentin Roche Sep 14 '21 at 11:56
  • I updated my answer. Can you check it now? – NeNaD Sep 14 '21 at 11:58