CODEWITHSUNDEEP
angularmean-stackmlab
user9309783
user9309783

Reputation: 13

Angular2/5 search a database and display results on new page

I Have MLABS set up with express and it connects to the database fine, I then have an angular2 service that can contact expressjs when a button is clicked to do a GET for MLAB. This is the part im confused about, As the button is clicked a want angular2 to move to a new component(page) to display the search results and take the results of the GET and display them there. The button and GET is done by a app.component that acts as a navbar so it doesnt matter where I am in the app I should be able to enter a string into the search bar at the top and it will bring me to a page with the results once the search icon is clicked on the navbar.

My search bar at the top of the app:

<div class="col-sm-3 col-md-3">
              <form class="navbar-form" role="search">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search" name="q">
                  <div class="input-group-btn">
                      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                  </div>
              </div>
              </form>
          </div>

Routing model:

const appRoutes: Routes = [
{
    path: '',
    component: WelcomeComponent
},
{
    path:'home',
    component: HomeComponent
},
{
    path:'profile',
    component: ProfileComponent
},
{
    path: 'request',
    component: RequestComponent
},
{
    path: 'mapsmenu',
    component: MapsMenuComponent
},
{
    path: 'activity',
    component: TransactionsComponent
},
{
    path: 'poststatus',
    component: PostStatusComponent
},
{
    path: 'map',
    component: CryptoMapComponent
},
{
    path: 'trading',
    component: tradingComponent
},
{
    path: 'friends',
    component: FriendsComponent
},
{
    path: 'linkwallet',
    component: WalletComponent
},
{
    path: 'newwallet',
    component: NewWalletComponent
},
{
    path: 'settings',
    component: SettingsComponent
},
{
    path: 'register',
    component: RegisterComponent
},
{
    path: 'FAQ',
    component: FAQComponent
}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Upvotes: 0

Views: 2189

Answers (1)

Safiyya
Safiyya

Reputation: 1393

Create a SearchResultComponent and add it to the routing module : 

constructor(private route:ActivatedRoute){}
ngOnInit(){
    this.route.queryParams.debounceTime(500).distinctUntilChanged().subscribe(params =>{
      // perform search here and bind result to template only after the input has changed and 500ms have passed
    })
}

in your search bar : 

<input #search type="text" class="form-control" placeholder="Search" name="q">
<button class="btn btn-default" type="submit" (click)="goToSearch(search.value)"><i class="glyphicon glyphicon-search"></i></button>

in your search bar component 

goToSearch(search:string){
    this.router.navigateByUrl(`/search?${search}`)
}

Upvotes: 3

Related Questions