Issue: I am in need of a single component (spacer) with a width of 100% and a customizable height that can be specified wherever it is used in the HTML (specifically in home.html for testing):
number 1
<spacer height="'200px'"></spacer>
no more
The spacer.html:
<div class="container-fluid spaceContainer" [ngStyle]="{'height': 'height'}">
spacer is here <<<--- this text is just for testing
</div>
The scss:
.spaceContainer {
width: 100%;
border: 1px solid red;
display: flex;
flex-direction: row;
}
Spacer.ts:
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'spacer',
templateUrl: './spacer.component.html',
styleUrls: ['./spacer.component.scss']
})
export class SpacerComponent implements OnInit {
@Input() height: string;
constructor() {
}
ngOnInit() {
console.log('The height is '+ this.height);
}
}
Upon execution, the console.log displays: The height is '200px'. However, the actual height of the red-bordered box only accommodates the 'spacer is here' text.
I have difficulties understanding binding, so I have attempted the following:
<spacer height="200px"></spacer>
Console logs: The height is 200px. Although I expected it to work, there was no change. Lacking comprehension of attr, I tried different variations such as attr.height.
This should be simple and might help clarify my confusion regarding how binding functions. Thank you in advance, Yogi