angular redirection after submiting search form

Question

I am working on a SpringBoot and Angular 5 web app, where I have a search form in the header:

<div class="searchDiv float-right">
    <form (ngSubmit)="onsubmit()" >
      <input class="searchBtn searchBtnHeader" type="text" role="search" placeholder="Search..." title="search field">
      <button class="fa fa-search align-middle searchBtn searchIcone" type="submit" [routerLink]="['/search']"></button>
    </form>
</div>

How can I do redirection to a more detailed search page(component) in Angular 5?

Answer 1

In your onSubmit() method, you can add a programmatic redirection, like this

constructor(private router: Router) { }

onSubmit() {
  // some stuff
  this.router.navigate(['/search']);
}

So you don't need anymore the [routerLink] attribute in your submit button.

For a complete guide on Angular 5 redirection ,take a look at this detailled tutorial

Answer 2

Programatically route from onsubmit() method

In Class

import { Router } from '@angular/router';

...
constructor(private router: Router) {}
...
onsubmit() {
      this.router.navigate(['/search']);
}