bizfile/src/app/register-business/register-business.component.html

<header>
    <h2>
        Business Name Application
    </h2>
</header>

<div class="search-input-container">
    <ng-container *ngIf="formState === 'CHECK_NAME' || formState === 'INIT_REGISTER'">
        <section class="search-input">
            <input type="text" placeholder="Enter your business name" [(ngModel)]="nameToCheck">
            <button (click)="checkName()" [disabled]="!nameToCheck"> Check </button>
        </section>
        
        <p class="description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam nisi quia fuga nobis magnam accusamus recusandae vitae architecto fugit natus! Nostrum doloremque id laborum sequi magni ducimus perferendis quam aspernatur?
        </p>
    
        <section class="form-message" [ngClass]="{'error' : error.isError}" *ngIf="error">
            <h5 *ngIf="error.isError"> Sorry! </h5>
            <h5 *ngIf="!error.isError"> Yay! </h5>
            <p> {{ error.message }} </p>
        </section>
    
        <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'">
            Proceed
        </button>
    </ng-container>

    <section class="confirmation-box" *ngIf="formState === 'CONFIRM_INIT'">
        <h5> {{ nameToCheck }} </h5>
        <p class="description">
            <input type="checkbox">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. At accusamus harum non dolores qui quaerat itaque architecto tenetur maiores dolor! Dolor aspernatur nemo autem et iusto deserunt officiis consectetur laboriosam!
        </p>

        <div class="actions">
            <button>
                Cancel
            </button>
            <button>
                Proceed
            </button>
        </div>
    </section>
</div>