Angular 12 component input without value

Question

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

Answer 1

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