Why isn't my nb-search appearing in my page?

Question

I created a homepage that has a navbar which I intended on putting nebular search in since I really liked it's design but for some reason after following their instructions I still couldn't get it to appear.

<nb-layout>
<nb-layout-header fixed>
    <nb-search type="rotate-layout></nb-search>
</nb-layout-header>
</nb-layout>

Answer 1

Most likely cause of your issue

https://github.com/akveo/nebular/issues/1275

You need to add "./node_modules/nebular-icons/scss/nebular-icons.scss" to angular.json

This makes the search icon appear.

In depth

I managed to get this working by following the getting started tutorial https://akveo.github.io/nebular/docs/guides/install-based-on-starter-kit#production-bundle

I decided to use the html from their website:

  <nb-layout>
    <nb-layout-header fixed>
      <nb-search type="rotate-layout"></nb-search>

    </nb-layout-header>

    <nb-sidebar>
    </nb-sidebar>

    <nb-layout-column>
      <nb-card accent="info">
        <nb-card-header>You searched for:</nb-card-header>
        <nb-card-body>
          <h3>{{ value || '-' }}</h3>
        </nb-card-body>
      </nb-card>
    </nb-layout-column>
  </nb-layout>

The tricky thing with this is making sure to import all the correct modules: NbThemeModule.forRoot({ name: 'default' }), was put in when I installed @nebula/themes

import {
  NbThemeModule,
  NbLayoutModule,
  NbCardModule,
  NbSidebarModule,
  NbSidebarService,
  NbSearchModule,
} from '@nebular/theme';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbCardModule,
    NbSidebarModule,
    NbSearchModule
  ],
  providers: [NbSidebarService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Again re-using the example code on the website:

@Component({
  ...
})
export class TestComponent implements OnInit {

  value = '';

  constructor(private searchService: NbSearchService) {

    this.searchService.onSearchSubmit()
      .subscribe((data: any) => {
        this.value = data.term;
      })

  }

  ngOnInit() {
  }

}