Ion-input not rendering in subcomponent v4

I have a sub component on a page to handle forgotten password. ion-input isn’t rendering in this sub component, is in the DOM as I can use the inspector hover thing to find it, if I click where is should show then the label turns red to show it is required. If I move the code back into the parent component all works fine. I’ve tried the item-content attribute that seems to have been suggested for v3 but I either did it wrong or it didn’t work.

Changing it to a normal works but then it looks rubbish.

<form [formGroup]="frmPasswordReset" (ngSubmit)="sendPasswordResetRequest()">
  <ion-item lines="none" color="none">
    <ion-label position="stacked" color="light">Email</ion-label>
    <ion-input type="email" formControlName="emailAddress"></ion-input>
  <ion-button expand="block" type="button" color="light" fill="outline" class="ion-padding-horizontal ion-margin-vertical">
    Forgot password
import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { AngularFireAuth } from '@angular/fire/auth';

  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.scss'],
export class ForgotPasswordComponent implements OnInit {

  frmPasswordReset: FormGroup;

  constructor(private afAuth: AngularFireAuth, private fb: FormBuilder) { }

  ngOnInit() {
    this.frmPasswordReset ={
      emailAddress: ['', [Validators.required,]]

I suspect that the code that incorporates this component in its host would also be a useful bit of information for folks trying to assist you.

Good suggestion, here is a stripped down version of the hosting template that still exhibits the same problem

<ion-content class="ion-padding">