search-input.component.html

<div class="card-container">
    <h2 class="display-4" style="width: 100%;" jhiTranslate="search.title">Search!</h2>
    <ng-container [queryParamGroup]="paramGroup">
        <div>
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" queryParamName="searchText"
                           placeholder="{{ 'search.filters.search' | translate }}"/>
                    <ng-template #helpFulltext> {{ 'search.help.fulltext' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpFulltext" [icon]="questionIcon"></fa-icon>
                </div>
            </form>
        </div>

        <div>
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" queryParamName="programmingLanguage"
                           placeholder="{{ 'search.filters.programmingLanguage' | translate }}"/>
                    <ng-template #helpPL> {{ 'search.help.programmingLanguage' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpPL" [icon]="questionIcon"></fa-icon>
                </div>
            </form>
        </div>

        <div>
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" queryParamName="keyword"
                           placeholder="{{ 'search.filters.keywords' | translate }}"/>
                    <ng-template #helpKeyword> {{ 'search.help.keywords' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpKeyword" [icon]="questionIcon"></fa-icon>
                </div>
            </form>
        </div>

        <div>
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" queryParamName="author"
                           placeholder="{{ 'search.filters.author' | translate }}"/>
                    <ng-template #helpauthorContritbutors> {{ 'search.help.authorContritbutors' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpauthorContritbutors" [icon]="questionIcon"></fa-icon>
                </div>
            </form>
        </div>

        <div>
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" queryParamName="license"
                           placeholder="{{ 'search.filters.license' | translate }}"/>
                    <ng-template #helpLicense> {{ 'search.help.license' | translate}}</ng-template>
                    <fa-icon style="padding: 10px 0px 0px 10px;" [ngbTooltip]="helpLicense" [icon]="questionIcon"></fa-icon>
                </div>
            </form>
        </div>
    </ng-container>
</div>