Angular 4 string parameters

Question

I'm a touch stumped on why my input parameters are being turned into numbers. I have this component:

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

@Component({
  selector: 'app-tile',
  templateUrl: './tile.component.html',
  styleUrls: ['./tile.component.css']
})
export class TileComponent implements OnInit {
  @Input() icon1: string;
  @Input() headerText1: string;
  @Input() mainText: string;
  @Input() footerText: string;

  constructor() { }

  ngOnInit() {
  }

}

and the template:

<div class="widget widget-stats bg-green">
  <div *ngIf="icon1" class="stats-icon"><i class="fa {{icon1}}"></i></div>
  <div class="stats-info">
      <h4>Header - {{headerText1}}</h4>
      <p>Icon - {{icon1}}</p>
      <p>Main - {{mainText}}</p>    
      <p>Footer - {{footerText}}</p>
  </div>
</div>

Passing these this from another component works:

<app-tile [headerText1]="43543" [mainText]="123456" [footerText]="243542354235" [icon1]="999"></app-tile>

But I want this:

<app-tile [headerText1]="TOTAL VISITORS" [mainText]="93%" [footerText]="243542354235" [icon1]="fa-users"></app-tile>

headerText1 fails at compile time because there's a space and if I remove it the value is never displayed and icon1 show NaN.

Why would these be treated as numbers when I've clearly defined them as strings?

You need to add string literal - check this post for example stackoverflow.com/questions/36220027/… — Ziv Weissman
– Ziv Weissman, Commented Dec 6, 2017 at 20:46

ToddBFisher · Accepted Answer · 2017-12-06 20:46:40Z

7

If I understand your question correctly, to pass string literals try adding single quotes within the double quotes, an expression, like this:

<app-tile [headerText1]="'TOTAL VISITORS'" [mainText]="'93%'"

answered Dec 6, 2017 at 20:46

ToddBFisher

11.6k9 gold badges43 silver badges58 bronze badges

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

1 Comment

Stephen York Over a year ago

Legend! I didn't realise the type was inferred within the double quotes. Makes sense though. Thanks so much.

Collectives™ on Stack Overflow

Angular 4 string parameters

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related