Nativescript @Input string not passing but number does

Question

I've this weird behavior where when i use @Input with a string I get "undefined" but if it's a number the data seems to be passed.

custom-progress-bar-component.ts

import { Component, OnInit, Input, ViewChild, ElementRef} from '@angular/core';
    
@Component({
        moduleId: module.id,
        selector: 'custom-progress-bar',
        templateUrl: './custom-progress-bar.component.html',
        styleUrls: ['./custom-progress-bar.component.css']
    })
    export class CustomProgressBarComponent implements OnInit {
        
        @Input() step: string;
        @Input() stepstring : string;
        
        constructor() { }
    
        ngOnInit() {
            console.log("step" + this.step); // 1
            console.log("stepstring" + this.stepstring); // undefined
        }
    
    }

home.html

<StackLayout>
     <custom-progress-bar [step]="1" [stepstring]="toto"></custom-progress-bar>
</StackLayout>

what am I misunderstanding ?

Answer 1

By using brackets you're telling Angular the value you're passing in needs to be interpolated. Not entirely sure why numbers work, maybe some sort of implicit processing under the hood since variables can't start with numbers.

You can either remove the brackets or pass in an explicit string to the interpolated attribute:

<StackLayout>
     <custom-progress-bar [step]="1" stepstring="toto"></custom-progress-bar>
</StackLayout>

Or with brackets

<StackLayout>
     <custom-progress-bar [step]="1" [stepstring]="'toto'"></custom-progress-bar>
</StackLayout>

I prefer bracket-less attributes if it's a primitive value, but up to you.