Esta publicación está relacionada con: Entrada angular de 2 componentes sin valor
Me gustaría lograr un componente de tarjeta con un atributo de entrada booleano llamado scrollable
.
<card>...</card>
sin el atributo desplazable da como resultado false
en el controlador<card [scrollable]>...</card>
con solo el atributo desplazable da como resultado true
Ya probé la solución aceptada en la publicación vinculada.
Stackblitz: https://stackblitz.com/edit/angular-ivy-ylsxzm?file=src/app/app.component.html
Actualizar
Para resolver el problema, solo tuve que eliminar los corchetes del atributo Desplazable.
Stackblitz bifurcado: https://stackblitz.com/edit/angular-ivy-s6d8ag?file=src/app/app.component.html
Cambie su card.component.ts
así:
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'; } }
Ahora, puedes usarlo así:
<card></card> // _scrollable = false <card scrollable></card> // _scrollable = true
Tenga en cuenta que puede usar scrollable
sin []
, ya que es un valor booleano y su valor predeterminado es true
. También puede usarlo con []
pero tendría que pasar la expresión (o la propiedad del componente) que resultará a Boolean.
<card [scrollable] = "false"></card> // _scrollable = false <card [scrollable] = "true"></card> // _scrollable = true