<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Dropdown

</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">

<ngb-panel title="Simple">

<ng-template ngbPanelContent>

It is possible to get the focus events with the current input value to emit results on focus with a great flexibility.

In this simple example, a search is done no matter the content of the input:

<ul>

<li>on empty input all options will be taken</li>

<li>otherwise options will be filtered against the search term</li>

<li>it will limit the display to 10 results in all cases</li>

</ul>

<label for="typeahead-focus">Search for a state:</label>

<input type="text" id="search-box" />

<hr>

</ng-template>

</ngb-panel>

<ngb-panel>

<ng-template ngbPanelTitle>

<!-- <span>&#9733; <b>Fancy</b> title &#9733;</span> -->

</ng-template>

<ng-template ngbPanelContent>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia

aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,

sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,

craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings

occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus

labore sustainable VHS.

</ng-template>

</ngb-panel>

</ngb-accordion>

<h3>Search Book</h3>

<form [formGroup]="bookForm">

ID: <input formControlName="postId">

</form>

<br/>

<div *ngIf="post">

Id: {{post.id}}, Name: {{post.userId}}, Category: {{post.title}}

</div>

<ul>

<li *ngFor="let item of items">{{item.title}}</li>

</ul>

<input class="form-control" type="text" [(ngModel)]="searchTerm" >

<h1>Hello </h1>

<router-outlet></router-outlet>