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 trueYa 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