SPA deshabilitado, uso de observables, uso de interceptor, bucle arreglado

src/app/pages/home-page/home-page.component.html

@@ -14,7 +14,7 @@
     Géneros
   </label>
   <div class="tab-content bg-base-100 border-base-300 p-6">
-    <table-genders [filtro]="textoFiltro"></table-genders>
+    <table-genders [eventoFiltro]="tablaSeleccionada == 'genders' ? textoFiltro : ''"></table-genders>
   </div>
 
   <label class="tab">
@@ -28,7 +28,7 @@
     Libros
   </label>
   <div class="tab-content bg-base-100 border-base-300 p-6">
-    <table-books></table-books>
+    <table-books [eventoFiltro]="tablaSeleccionada == 'books' ? textoFiltro : ''" (cambiarTabla)="cambiarTabla($event)"></table-books>
   </div>
 </div>
   </div>

src/app/pages/home-page/home-page.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter } from '@angular/core';
 import { TableGendersComponent } from '../../components/table-genders/table-genders.component';
 import { TableBooksComponent } from '../../components/table-books/table-books.component';
 import { FilterComponent } from '../../components/filter/filter.component';
@@ -23,4 +23,10 @@ export class HomePageComponent {
   tablaSeleccionada: string = 'genders';
   textoFiltro: string = '';
 
+  constructor() { }
+
+  cambiarTabla(tabla: string) {
+    this.tablaSeleccionada = tabla;
+  }
+
 }