Angular2 Boolean @Input property getting set as string - binding nested properties

Question

I have an outer component with a property:

Loading: Boolean = false;

this outer component is setting this property on a nested component:

<etp-loader text="loading..." loading="{{Loading}}"></etp-loader>

when I do typeof(this.Loading) on the nested component, I get string, which [what i believe] is what throws off the whole logic.

here's my nested component:

import { Component, AfterViewInit, OnInit, Input} from '@angular/core'
@Component({
    selector: 'etp-loader',
    template: `<div *ngIf="loading" class="progress" style="margin-left: 10%; margin-right: 10%;">
                <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                        aria-valuemax="100" style="width:100%;">
                        {{text}}
                </div>
                </div>`
})
export class EtpLoaderComponent {
    @Input()
    text: string;

    @Input()
    loading: Boolean;    

    ngOnInit() {
        console.debug('init: loader state: ', 
                       this.loading, 
                       typeof(this.loading)); // => init: loader state:  false string
    }
}

edit - removed irrelevant bits

The typescript type boolean is all lowercase. Can you try it this way? Also, you are assigning the loading value wrong: Try: <etp-loader [loading]="Loading"> — Riscie
– Riscie, Commented Jan 25, 2017 at 16:40
bolean did't make a difference but [loading] was the issue :) — Sonic Soul
– Sonic Soul, Commented Jan 25, 2017 at 18:56

Günter Zöchbauer · Accepted Answer · 2017-06-20 09:02:42Z

37

If Loading is a boolean value, then use

[loading]="Loading"

{{}} is string interpolation and the result will always be a string.

Angular doesn't know about boolean attributes. If you just want to know if a property is set or not, you can use a setter like

isLoading:Boolean;

@Input()
loading set(value: Boolean) {
  this.isLoading = value != 'false';
}

and use it like

<etp-loader loading>

and isLoading will be set to true

edited Jun 20, 2017 at 9:02

answered Jan 25, 2017 at 16:41

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

Sonic Soul Over a year ago

thanks! very good to know about {{}} always string, makes perfect sense now.

Eric Novins Over a year ago

BOO on angular. YAY for your answer!

Günter Zöchbauer Over a year ago

@EricNovins no idea what the "BOO" is about, but thanks for the "YAY" :-)

Meryan Over a year ago

May be the "BOO" was like me I specified ShowIndex="false" in the HTML template, ie, passing a literal FALSE, and I was getting a string "false", changed it to [ShowIndex]="false" even though I don't have a variable named "false" nor do I intend to bind this param necessarily :)

Collectives™ on Stack Overflow

Angular2 Boolean @Input property getting set as string - binding nested properties

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related