Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

44
Views
Angular 12 component input without value

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

8 months ago · Santiago Trujillo
1 answers
Answer question

0

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

8 months ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.