angular 2+ attribute isn't a known property of yet is specified in @Input()

Question

Purpose is to just add number of pixels vertical

<spacer [height]="200"></spacer>    

First problem: error says height isn't a known property of spacer. So check this out: HTML:

<div [ngStyle]="{'padding': 'getHeight()'}">
   &nbsp;
</div>

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

@Component({
  selector: 'spacer',
  templateUrl: './spacer.component.html',
  styleUrls: ['./spacer.component.scss']
})
export class SpacerComponent  {
   @Input() height = '';
   constructor() { }

   getHeight() {
      return this.height;
   }
}

SO height IS a property ? right? I would also like to add px to the height but that seems to make matters worse. I appreciate your help.

Thanks, Yogi.

Answer 1

The problem is height is not a valid html attribute. if you are trying to change the px height you need to use a class or an attribute binding to make the css dynamic. you also need to have 'px' after the '200' for example:

@Input() height="200px"; //better to set the inside the parent component
// html
// use attribute binding
<div [attr.height]="height"></div>
// OR use interpolation
<div attr.height="{{ height }}"></div>

Furthermore:

I think you are confused about the @Input() usage. @Input() is not necessary to perform this task, it is most used to get template references or values from the parent component.

you could simply define height in your .ts file, height = '200px' without @Input, and then use the code above to get that variable into your html. Again the @Input() decorator is only needed if the height value is coming from another component, in which case it is used to communicate with another component, NOT your html template.