Ionic Angular2 own Component

Question

My component html:

<div>
  {{text}}
  {{percentLeft}}
  {{innerColor}}
</div>

My Component's TS File

import { Component,Input } from '@angular/core';

/**
 * Generated class for the TimeLeftBarComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'time-left-bar',
  templateUrl: 'time-left-bar.html'
})
export class TimeLeftBarComponent {
   @Input('text') text: string;
   @Input('percentLeft') percentLeft: number;
   @Input('innerColor') innerColor: string; 

   constructor() {}

}

How I call this component:

<time-left-bar [percentLeft]="50" [text]="text" [innerColor]="black">
</time-left-bar>

It's only displaying the first parameter I enter,

for Example:

<time-left-bar [percentLeft]="50" [text]="text"  [innerColor]="black">
</time-left-bar>

Outputs just 50

<time-left-bar [text]="text"  [innerColor]="black" [percentLeft]="50">
</time-left-bar>

Outputs just text

<time-left-bar  [innerColor]="black" [percentLeft]="50" [text]="text">
</time-left-bar>

Outputs just black

What am I doing wrong?

What happens if you change it like this: First declare a property with the number value: public aNumber = 50 and then in the view <time-left-bar [percentLeft]="aNumber" text="'text'" innerColor="'black'">? Since text and the innerColor are just strings, you don't need the property binding (please notice that instead of sending text I send 'text' with single quotes). — sebaferreras
– sebaferreras, Commented Jul 19, 2017 at 13:32
If the answer solves the issue, could you please mark it as the accepted answer so we can close the issue? Thanks :) — sebaferreras
– sebaferreras, Commented Jul 24, 2017 at 7:20

sebaferreras · Accepted Answer · 2017-07-19 15:51:14Z

1

If you add [] then Angular evaluates the value as expression. When there is no property with that name on your component's class or it doesn't have a value then it will result to undefined or null.

So if you just want to send a string value for text and innerColor, use single quotes:

<time-left-bar ... [text]="'text'" [innerColor]="'black'"></time-left-bar>

A better approach would be to create properties for these values instead and use that name (without single quotes):

public aNumber = 50;
public aText = 'some text';
public aColor = 'black';

And in the view:

<time-left-bar [text]="aText" [innerColor]="aColor" [percentLeft]="aNumber">
</time-left-bar>

edited Jul 19, 2017 at 15:51

answered Jul 19, 2017 at 15:31

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

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

Collectives™ on Stack Overflow

Ionic Angular2 own Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related