angular 6 element boolean input parameter

Question

I'm building out an angular element and passing some input params to it. I can pass some string input params just fine (ikrId and environment work perfectly) but struggling to pass a boolean value to the showTitle input property through an angular element (passing the showTitle property to the component from a parent angular component works just fine).

Here's component snippet:

export class MyComponent implements OnInit, OnDestroy {

  @Input() ikrId: string;
  @Input('environment') environment: IkrEnvironment = 'PROD';
  @Input('showTitle') showTitle = true;

Here is how I'm using it in plain old html:

<my-element environment="DEV" ikr-id="889fb69f-71a5-4881-8528-0b43a07599f0" show-title="false"></my-element>

But show title is not getting passed into my component, it's always true.

What am I missing here?

Thanks!

Martin Parenteau · Accepted Answer · 2018-09-26 23:05:32Z

10

You could define the showTitle property as a getter/setter, and convert the string value to a boolean in the setter:

private _showTitle = true;

@Input('showTitle') 
get showTitle(): boolean {
  return this._showTitle;
}
set showTitle(value: boolean) {
  this._showTitle = "" + value !== "false";
}

edited Sep 26, 2018 at 23:05

answered Sep 26, 2018 at 22:25

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cobolstinks Over a year ago

That is true for using this component from a parent angular component, but I'm specfically having in issue using this as an angular element. angular.io/guide/elements

harold_mean2 Over a year ago

How are you passing your input elements? If you pre-load your input items, you should not have any issues using resolvers in your route. Then use activated route to pass your items to <my-element.. Just trying to help. I had a questionhttps://stackoverflow.com/questions/47874927/why-images-blink-on-safari-but-does-not-in-chrome-when-the-app-resizes. I had to preload the data to solve my issues.

cobolstinks Over a year ago

Thanks for the help, I guess the only things I can send as Input params to the angular element are string variables, which makes sense because I need to provide them from html element attributes.

Matthew Kooshad · Accepted Answer · 2024-09-11 13:06:03Z

2

since this was a top search result for me, sharing that starting with Angular v16.1, the @Input() decorator provides a transform function. We use the transform function to perform a transformation or execute other logic when an input property changes.

To further simplify our code, Angular introduced two built-in transformation functions: booleanAttribute and numberAttribute, either of which you can import and use as such:

import { booleanAttribute, Component, Input} from '@angular/core';

@Input({ transform: booleanAttribute }) showTitle = true;

answered Sep 11, 2024 at 13:06

Matthew Kooshad

3192 silver badges14 bronze badges

Comments

Massimo Costa · Accepted Answer · 2018-09-26 23:31:29Z

1

the syntax to pass Input in the template is [<input_name>]="<value>"; you should use

<my-element [environment]="DEV" [ikrId]="889fb69f-71a5-4881-8528-0b43a07599f0" [showTitle]="false"></my-element>

answered Sep 26, 2018 at 23:31

Massimo Costa

1,88015 silver badges24 bronze badges

2 Comments

seairth Over a year ago

When you add the [] around the attribute names, the values will be evaluated as expressions. That means that any literal strings must be wrapped in quotes (inside the outer quotes), such as [environment]="'DEV'".

Mick Over a year ago

Your answer applies to an Angular app but most likely the web compomnent will not be used inside another Angular app

John H · Accepted Answer · 2022-03-22 16:37:22Z

0

Boolean conversion can be done with a getter.

@Input('showTitle') showTitleStr: string;
get showTitle() {
    return this.showTitleStr === "true";
}

answered Mar 22, 2022 at 16:37

John H

6007 silver badges12 bronze badges

Collectives™ on Stack Overflow

angular 6 element boolean input parameter

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related