The time has come to unveil QuizSearchComponent. As you would expect, it's nothing more than a new Angular component that we can add within the already existing /ClientApp/app/components/quiz/ folder.

Here's the quiz-search.component.ts class file:

import { Component, Input } from "@angular/core";

@Component({
    selector: "quiz-search",
    templateUrl: './quiz-search.component.html',
    styleUrls: ['./quiz-search.component.css']
})

export class QuizSearchComponent {
    @Input() class: string;
    @Input() placeholder: string;
}

Also, here's the quiz-search.component.html template file:

<form class="navbar-form navbar-left {{class}}" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="{{placeholder}}">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

As we can see, the class and template files are nothing new; we should already know how these class and placeholder input properties work and how they will be used to programmatically give custom values to the {{class}} and {{placeholder}} interpolation endpoints in the template file.

The real deal here is the quiz-search.component.less style sheet file:

.navbar-form {
    &.search-header {
        display: none;
    }

    &.search-navmenu {
        display: block;
        border: 0;
        margin: 2px 0 0 0;
        padding: 5px;
        float: left;
        width: calc(~"100% - 80px");
        max-width: calc(~"100% - 80px");
        min-width: 250px;

        .form-group {
            float: left;
            margin: 0 10px 0 0;

            input[type="text"] {
                width: 180px;
            }
        }
    }
}

@media (min-width: 768px) {
    .navbar-form {
        &.search-header {
            display: block;
            margin: 20px 0 0 20px;
        }

        &.search-navmenu {
            display: none;

            input[type="text"] {
                width: 180px;
            }
        }
    }
}

Note how we used the LESS selector-nesting feature to define two very different behaviors for the search-header and search-navmenu classes; we did that because we wanted the two QuizSearchComponent instances to have their own distinctive layout and behavior. We'll see more about them in a short while.