Display mat-label on custom mat-form-field component, angular - html

Question

I'm creating a custom input component to be used in my angular material forms, but assigning a mat-label in the form field where the component is used has no effect.
My component HTML is as follows:
<form *ngIf="val">
<table>
<td>
+
</td>
<td>
<input matInput
id="country"
type="text"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="val.country"
class="input"
placeholder="27"
maxlength="2"
(keyup)="phoneFieldFocusHandler($event)"
required>
</td>
<td>
<input matInput
id="area"
type="text"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="val.area"
class="input"
placeholder="949"
maxlength="3"
(keyup)="phoneFieldFocusHandler($event)"
required>
</td>
<td>
<input matInput
id="prefix"
type="text"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="val.prefix"
class="input"
placeholder="555"
maxlength="3"
(keyup)="phoneFieldFocusHandler($event)"
required>
</td>
<td>
<input matInput
id="line"
type="text"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="val.line"
class="input"
placeholder="5555"
maxlength="4"
(keyup)="phoneFieldFocusHandler($event)"
required>
</td>
</table>
</form>
And the corresponding typescript:
import { coerceBooleanProperty } from '#angular/cdk/coercion';
import { Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '#angular/core';
import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '#angular/forms';
import { MatFormFieldControl } from '#angular/material/form-field';
import { Subject } from 'rxjs';
import { PhoneNumber } from '../phone-number.model';
#Component({
selector: 'app-phone-input',
templateUrl: './phone-input.component.html',
styleUrls: ['./phone-input.component.scss'],
providers: [
{ provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PhoneInputComponent),
multi: true
},
{
provide: MatFormFieldControl,
useExisting: PhoneInputComponent
}
]
})
export class PhoneInputComponent implements OnInit, OnDestroy, ControlValueAccessor, MatFormFieldControl<any> {
#HostBinding('attr.id')
externalId = '';
val: PhoneNumber = new PhoneNumber();
stateChanges = new Subject<void>();
private _ID = '';
/*tslint:disable-next-line*/
_placeholder: string;
/*tslint:disable-next-line*/
_required: boolean;
/*tslint:disable-next-line*/
_disabled: boolean;
ngControl: NgControl;
focused: boolean;
empty: boolean;
shouldLabelFloat: boolean;
errorState: boolean;
userAriaDescribedBy?: string;
#Input()
set id(value: string) {
this._ID = value;
this.externalId = null;
}
get id(): string {
return this._ID;
}
#Input()
get placeholder(): string {
return this._placeholder;
}
set placeholder(plh) {
this._placeholder = plh;
this.stateChanges.next();
}
#Input()
get required(): boolean {
return this._required;
}
set required(req) {
this._required = coerceBooleanProperty(req);
this.stateChanges.next();
}
#Input()
get disabled(): boolean {
return this._disabled;
}
set disabled(dis) {
this._disabled = coerceBooleanProperty(dis);
this.stateChanges.next();
}
setDescribedByIds(ids: string[]): void {
this.userAriaDescribedBy = ids.join(' ');
}
onContainerClick(event: MouseEvent): void {}
writeValue(value: any): void {
this.value = value;
}
// upon UI element value changes, this method gets triggered
registerOnChange(fn: any): void {
this.onChange = fn;
}
// upon touching the element, this method gets triggered
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
onChange: any = () => {};
onTouch: any = () => {};
set value(val: PhoneNumber) {
if (val !== undefined && this.val !== val) {
this.val = val;
this.onChange(val);
this.onTouch(val);
}
}
constructor() { }
ngOnInit(): void {
}
ngOnDestroy(): void {
this.stateChanges.complete();
}
// Internally handle moving focus from one input to the next
phoneFieldFocusHandler(e: KeyboardEvent): void {
const target = e.target as any as HTMLInputElement;
if (target.value.length >= target.maxLength) {
const parent = target.parentElement.parentElement;
const children = (Array.prototype.slice.call(parent.children) as Array<HTMLElement>).map(el => el.children[0] as HTMLInputElement);
const curr = children.indexOf(target);
if (!(curr >= children.length - 1)) {
children[curr + 1].focus();
}
}
}
}
It is used in the form as:
<mat-form-field>
<mat-label>Phone Number</mat-label>
<app-phone-input formControlName="phone"></app-phone-input>
</mat-form-field>
But the label is not displayed.
Do I need to define a space in my custom component where the label will be shown?