Angular 6 @input value not showing up in HTML template

Question

I have been wracking my brain on this for some time and cannot for the life of me figure out what is wrong. I am somewhat of an Angular novice so it's extremely possible I could be doing something wrong that's really obvious. I have the following code:

bucket.component.html

<div class="container">
  <div class="row">
    <div class="col s12">
      <div id="backButton">
        <a class="valign-wrapper" (click)="navigateBack()"><i class="material-icons">arrow_back</i> Back</a>
      </div>
      <h2 class="center-align" id="title">{{ name }}</h2>
    </div>
  </div>
  <div class="row">
    <div class="col s12" *ngFor="let object of objects">
      <app-bucket-file [key]="object.Key" [lastModified]="object.LastModified" [size]="object.Size" [owner]="object.Owner.DisplayName"></app-bucket-file>
    </div>
  </div>
</div>

bucket-file.component.html

<div class="card valign-wrapper">
  <div class="card-content white-text">
    <span class="card-title">{{ key }}</span>
    <p>Last Modified: {{ lastModified | date:'short' }}</p>
    <p>Size: {{ conversion(size, 2) }}</p>
    <p>Owner: {{ owner }}</p>
  </div>
</div>

bucket-file.component.ts

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

@Component({
  selector: 'app-bucket-file',
  templateUrl: './bucket-file.component.html',
  styleUrls: ['./bucket-file.component.css']
})
export class BucketFileComponent implements OnInit {
  @Input() key: string;
  @Input() lastModified: string;
  @Input() size: number;
  @Input() owner: string;
  public conversion = BucketFileComponent.bytesToSize;
  constructor() { }

  ngOnInit() {
    console.log('Key:' + this.key);
  }

  public static bytesToSize(bytes: number, decimals: number) {
    const sizes = ['Bytes', 'KB', 'MB', 'GB,', 'TB'];
    if (bytes === 0) {
      return '0 Bytes';
    }
    const k = 1024,
      dm = decimals <= 0 ? 0 : decimals || 2,
      i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }

}

The console.log works in bucket-file.component.ts ngOnInit() and returns the correct values, so I know that the input is working to some degree. However, when I try to display it in the template HTML I get nothing. No errors either. i am really confused as to what I am doing wrong. Any help would be much appreciated.

Thanks

well its working onNgInit because you are initlializing it with the component, so load it into a variable in ngOnInit.. that will work — Pari Baker
– Pari Baker, Commented Oct 24, 2018 at 0:27

luke.irvin21 · Accepted Answer · 2018-10-24 03:38:56Z

1

I am such a derp. I had earlier moved the bucket-file into its own component, and neglected to move the css to the new component. Therefore, as one of the comments on my original post suggested, the background color was white, along with all the text colors being white too. It was all there I just couldn't see it.... smh

answered Oct 24, 2018 at 3:38

luke.irvin21

752 silver badges9 bronze badges

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

1 Comment

Yevhenii Bahmutskyi Over a year ago

you should delete your question it hold no information value

Maarti · Accepted Answer · 2018-10-23 22:33:33Z

0

Your code seems correct.

Are you sure the CSS class card-title isn't hiding your content?

To be sure, you can write: <span class="card-title">Key : {{ key }}</span>
What about the other elements (lastModified ,...), are they displayed?
Also, in your bucket.component.html component you can write: <div class="col s12" *ngFor="let object of objects"> Key: {{ object.Key }} <app-bucket-file ... ></app-bucket-file> </div> To be sure the key is not changed or removed by something else (after being displayed in ngOnInit() of the child component).

edited Oct 23, 2018 at 22:33

answered Oct 23, 2018 at 22:24

Maarti

3,7294 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular 6 @input value not showing up in HTML template

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related