My code snippet is not displaying the input even though all the necessary elements are in place:
home.component.ts
<p class="lead">Input: </p>
<div><jhi-calculator-input></jhi-calculator-input></div>
calculator.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'jhi-calculator-input',
template: `
<input #calculatorInput pattern="/[0-9a\!\+\-\*]/" type="text" />
<button (click)="calculate(calculatorInput.value)">Calculate</button>
<div>{{calculatorInput.value}}</div>
`
})
export class CalculatorComponent {
calculate(inputValue: string) {
return 'OK';
}
}
home.component.html
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-9">
<p class="lead">Input: </p>
<div><jhi-calculator-input></jhi-calculator-input></div>
</div>
<div class="col-md-1">
</div>
</div>
I find it odd that there are no errors appearing in the Chrome console, yet the template is not being displayed in the HTML.