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.
<card>...</card> without the scrollable attribute results to false in the controller<card [scrollable]>...</card> with only the scrollable attribute results to trueI'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
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