Angular 2 component input without value

Question

I want to create a component that has attributes that need no value. For example, instead of something like this: (which I have now)

<app-document [mode]="'edit'" ... ></app-document>

or

<app-document [editMode]="true" ... ></app-document>

I would rather have:

<app-document editMode ...></app-document>

So the component itself has to see whether the attribute editMode is present or not. This will look a lot cleaner when I have a lot of such attributes. I haven't seen any documentation on how to do this. Is it doable?

Alexandre Annic · Accepted Answer · 2018-04-30 06:30:37Z

38

Material2 wrote the following method:

/** Coerces a data-bound value (typically a string) to a boolean. */
export function coerceBooleanProperty(value: any): boolean {
  return value != null && `${value}` !== 'false';
}

Write something like that in your app-document component:

private _editMode: boolean;
@Input()
get editMode() { return this._editMode; }
set editMode(value: any) { this._editMode = coerceBooleanProperty(value); }

Then:

editMode == true
<app-document editMode></app-document>

editMode == false
<app-document></app-document>

If you use Material2 you can simply import the method as follows:

import {coerceBooleanProperty} from '@angular/cdk/coercion';

edited Apr 30, 2018 at 6:30

answered Oct 2, 2017 at 10:18

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

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

Comments

Frank N · Accepted Answer · 2021-02-08 12:18:38Z

8

You can use boolean @Inputs to achieve this.

HTML:

<app-document [editMode] ...></app-document>

TS:

export class AppDocumentComponent {
  @Input() editMode: boolean = true;
  // ...
}

Now you have a boolean which you can use to change your behavior.

note for better understanding:

The default value true kicks in, if there is a (valueless) attribute. If there is none, editMode does not get the default value but a falsy undefined. (So, that is why this works).

edited Feb 8, 2021 at 12:18

Frank N

10.5k4 gold badges90 silver badges118 bronze badges

answered May 15, 2017 at 23:03

0xcaff

13.8k5 gold badges52 silver badges57 bronze badges

5 Comments

AlanObject Over a year ago

I didn't think of that pattern but that's pretty clever. If I'm not mistaken the value of editMode is the inverse (boolean not) of what is intuitive but I can live with that. Something like @Input('editMode') notEditMode: boolean = true;. Caffeine and monkeys seem to go together pretty well I guess.

Frank N Over a year ago

This far simpler approach should have far more votes.

Thomas Marti Over a year ago

The problem with this solution is that <app-document editMode ...></app-document> results in editMode being false.

serge Over a year ago

the problem also is that with @Input we need to use square brackets not really natural

Desperado Over a year ago

" If there is none, editMode does not get the default value but a falsy undefined. (So, that is why this works)." This is not true, it will be true anyway

james · Accepted Answer · 2024-12-13 10:10:14Z

2

Updating the selected answer to use an input signal, you can now do the following:

import { input, booleanAttribute } from '@angular/core';
...
editMode = input(false, { transform: booleanAttribute } )

edited Dec 13, 2024 at 10:10

answered Dec 12, 2024 at 10:25

james

4,7273 gold badges34 silver badges44 bronze badges

1 Comment

Frederico Jesus Mar 21 at 0:45

This should be the new accepted answer because if you don't use this transform as suggested an ESLint error is thrown: Type 'string' is not assignable to type 'boolean'.. I guess the default value of an input when you have no value is a string.

Collectives™ on Stack Overflow

Angular 2 component input without value

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related