Cast inputs to numbers in Angular2?

Question

Is there any way to cast inputs to a component to a number automatically?

For example this component initialised like so:

<list-of-playlists limit="5"></list-of-playlists>

And defined here:

@Component({
    selector: 'list-of-playlists',
    templateUrl: 'list-of-playlists.html'
})
export class MyPlaylistComponent implements OnInit {
    @Input() limit: number;
    ngOnInit() {
        console.log(typeof limit);   // string
    }
}

Is there a way to cast limit to a number or integer automatically?

Otherwise I would have to type is as a string or any in Typescript, or to start the component by casting it to a number in ngOnInit(), which I would like to avoid.

Sasxa · Accepted Answer · 2016-02-14 01:10:40Z

1

You need to use Property Binding:

<list-of-playlists [limit]="5"></list-of-playlists>

answered Feb 14, 2016 at 1:10

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

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

Comments

Mark Rajcok · Accepted Answer · 2016-02-14 02:12:09Z

1

According to http://victorsavkin.com/post/119943127151/angular-2-template-syntax (section Passing Constants)

<list-of-playlists limit="5">

is equivalent to (i.e., syntax sugar for)

<list-of-playlists [limit]=" '5' ">

That is, it always results in a string binding. As @Sasxa already mentioned in his answer, use property binding to get the desired type.

answered Feb 14, 2016 at 2:12

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

1 Comment

skovmand Over a year ago

Thank you for the elaboration. It's a good link you provided.

Collectives™ on Stack Overflow

Cast inputs to numbers in Angular2?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related