Binding Angular component with specific type

Question

I'm currently working with Angular and TypeScript and I want to know if it's possible to bind component @Inputs to use specific types?

Example

@Component({selector: 'foobar'})
export class FooComponent {
    @Input() foo: number;
    @Input() bar: boolean;
}

<foobar foo="123" bar="true"></foobar>

When the component is bound, both foo and bar are string. Does angular provide a way to enforce the specified type?

I tried this, but I don't like it...(it seems dirty and not very elegant)

@Component({selector: 'foobar'})
export class FooComponent {
    foo: number;
    bar: boolean;

    @Input('foo') set _foo(value: string) {
        this.foo = Number(value);
    }

    @Input('bar') set _bar(value: string) {
        this.bar = value === 'true';
    }
}

It would be nice if there was something in Angular's Input that could act as a binding delegate; For example:

@Input('foo', (value: string) => Number(value)) foo: number = 123;

yurzui · Accepted Answer · 2018-04-23 18:17:50Z

3

When you write

foo="123"

you use one-time string initialization. Angular sets value to foo property as string and forgets about it.

If you want to use something other than string then use the brackets

[foo]="123"

When writing a binding, be aware of a template statement's execution context. The identifiers in a template statement belong to a specific context object, usually the Angular component controlling the template.

When you use property binding then value is passes as it is

[foo]="isValid"

...
@Component({...})
class MyComponent {
  isValid: boolean = true;

if you want to have enum then you should write something like this

[foo]="MyEnum"

...

enum MyEnum {
  one,
  two,
  three
}

@Component({...})
class MyComponent {
  MyEnum = MyEnum;
}

Other examples

[foo]="445" => number
[foo]="'445'" => string
[foo]="x" => typeof x or undefined

edited Apr 23, 2018 at 18:17

answered Jun 6, 2017 at 11:28

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Comments

Dinistro · Accepted Answer · 2017-06-06 11:17:09Z

2

If you use a binding like fuu="123" the value will always be a string. But if you bind like this:

[fuu]="123"

The value will be of type number. This means, that the values are treated like in normal JS:

[fuu]="true"   -> boolean
[fuu]="'true'" -> string
[fuu]="123"    -> number

edited Jun 6, 2017 at 11:17

answered Jun 6, 2017 at 11:15

Dinistro

5,7301 gold badge33 silver badges39 bronze badges

3 Comments

Matthew Layton Over a year ago

What happens when I want to use a non-built-in type, like a typescript enum?

Dinistro Over a year ago

@series0ne That, I think, will only work if you bind a property of another component, otherwise not.

Spitzbueb Over a year ago

@series0ne This shouldn't be a problem. I haven't tested it but if you import (or declare) the enum in the component you should be able to use it in the template.

Collectives™ on Stack Overflow

Binding Angular component with specific type

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related