Router duplicating my page components - Angular

Question

I'm having some problems to add a back home button in my top nav-bar. I want it to reset my page to the initial state of the page.

this is my header.component.html where I want to implement a function to go back to home page.

<div class="topnav">
  <a class="active" routerLink="">{{title}}</a>  
</div>

I tried routing to home, but my page got duplicated (Showing the same component twice) and I don't now what to do. My page can't have refresh either, because I'm doing this for a job and one of the requirements is having a full SPA. I tried too the function destroyPlataform(), then navigate back to path=" ", that worked, but my page refreshes when I do it and I can't have refresh on my page.

my app-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MoviesComponent } from './movies/movies.component';

const routes: Routes = [{ path: '', component: MoviesComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

I'm working with The Movie DB API, and in my page are some cards, it allows search for movies, multiple pages showing these cards and I need this home button to return to the first page, or to leave the search results.

I only have two components, the header.component that has the button to reset the current state of page and return to the initial state (not working) and the movies.component that show the movie cards, search for movies by name and have pagination. I need the back home function to reset the search name and return to the initial state of the application.

For more information of how I show my movies:

movies.component.ts:

//Showing page on application and redirection
  getMovies(page: number) {
    this.moviesService
      .getMovies(this.movieName, this.currentPage)
      .subscribe((paramName) => {
        page = this.currentPage;
        if (this.movieName) {
          this.searchMovies(this.movieName, this.currentPage);
        }
        if (page) {
          this.currentPage++ || this.currentPage--;
        }
        this.totalPages = (paramName as any).total_pages;
        this.movies = (paramName as any).results;
      });
  }

//Search functions bellow
  //search by query
  searchMovies(query: string, page: number) {
    this.moviesService.searchMovies(query, page).subscribe((response) => {
      query = this.movieName;
      page = 1;

      this.totalResults = (response as any).total_results;
      this.movies = [];
      this.movies = response['results'];
    });
  }
  //send value of query to the search function
  queryListener(value: string): void {
    this.movieName = value;
    this.currentPage = 1 + 1;
    this.searchMovies(value, 1);
  }
  //End of search functions

movies.service.ts:

  //Redirects
  getMovies(query: string = '', page: number) {
    if ((query = '')) {
      return this.discoverMovies(page);
    }
    if (query) {
      return this.searchMovies(query, page);
    }
    return this.discoverMovies(page);
  }

this next method is inside the movies.service.ts too, and I want to go back to him to see the discover cards when I click on the home button

 //Show the list of movies more recent by popularity
  discoverMovies(page: number) {
    let discover = `${this.discoverUrl}?api_key=${this.apiKey}&language=${this.language}&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}`;
    return this.http.get(discover);
  }

A simple 'href="localhost:4200/"' would help, but when I use href the page refreshes. I hope someone can help me!

Answer 1

Try using:

<div class="topnav">
  <a class="active" [routerLink]="['/']">{{title}}</a>  
</div>