resolver.component.html

<div class="row">
    <div class="col pr-0">
        <label for="resolver">Resolve RA and DEC with Sesame Name Resolver</label>
        <input #n id="resolver" type="text" class="form-control" [formControl]="field" autocomplete="off">
    </div>
    <div class="col-auto pt-5 pt-lg-4">
        <button *ngIf="!resolverWip" id="btn-search" class="btn btn-outline-secondary mt-2" [disabled]="field.disabled" (click)="resolveName.emit(n.value)">
            <span class="fas fa-search"></span>
        </button>
        <button *ngIf="resolverWip" id="btn-wip" class="btn btn-outline-secondary mt-2" disabled>
            <span class="fas fa-circle-notch fa-spin"></span>
            <span class="sr-only">Loading...</span>
        </button>
    </div>
</div>