Need help calling a function from parent component in angular

Question

Need to call function from app component to ALL child components, I cannot make it work with output, nor emitter, nor viewchild.

Parent component

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AppService, InformesCounter } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [AppService],
  styleUrls: ['./app.component.sass']
})

export class AppComponent implements OnInit {
  title = 'webagn';
  filteredText: InformesCounter[] | any;
  titleList: InformesCounter[] | any;
  searchText: InformesCounter[] | any;
  informesCount: InformesCounter | undefined;
  informesTitle: InformesCounter[] | any;
  
  constructor(private appService: AppService) { }

  ngOnInit(): void {
  }
  
  showInformes() {
    this.appService.getInformes()
      .subscribe((data: InformesCounter) => {
        this.informesCount = data.meta;
        this.informesTitle = data.data;
        this.titleList = this.informesTitle.map((data: { attributes: { titulo: any; }; }) => data.attributes.titulo);
        this.onSubmit();
      });
  }

  onSubmit() {
    this.filteredText = this.titleList.filter((element: string) => { return element.toLowerCase().includes(this.searchText); });
    console.log(this.filteredText);
  }
  
}

Child component

import { Component, Input, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';
import { AppService, InformesCounter } from '../app.service';

@Component({
  selector: 'app-auditorias',
  templateUrl: './auditorias.component.html',
  providers: [AppService],
  styleUrls: ['./auditorias.component.sass']
})
export class AuditoriasComponent implements OnInit {
  @Input() showInformes: Function | undefined; 
  @Input() onSubmit: Function | undefined;
  @Input() searchText: InformesCounter[] | any;
  @Input() titleList: InformesCounter[] | any;
  @Input() filteredText: InformesCounter[] | any;

  constructor(private appComponent: AppComponent) { }

  ngOnInit(): void {
  }

  showInformesAuditorias() {
    this.appComponent.showInformes();
  }

  onSubmitAuditorias() {
    this.appComponent.onSubmit();
    console.log(this.filteredText);
  }

}

I don't know how to handle this, I don't want to create a service for every page.

This is the Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export interface InformesCounter {
  data: any;
  meta: any;
  count: any;
  attributes: any;
  titulo: any[];
}
@Injectable({
  providedIn: 'root'
})

export class AppService {
  countInformes = 'http://localhost/mydata';
  
  constructor(private http: HttpClient) { }

  getInformes(): Observable<InformesCounter> {
    return this.http.get<InformesCounter>(this.countInformes)
    .pipe(
      retry(3),
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      console.error('Ocurrió un error:', error.error);
    } else {
      console.error(
        `El Sistema retornó ${error.status}, el mensaje fue: `, error.error);
    }
    return throwError(() => new Error('Ocurrió algo inesperado, intentelo más tarde.'));
  }

}

HTML of Child

<div class="inner-addon left-addon" style="position: relative">
     <input (ngModelChange)="onSubmitAuditorias()" style="width: 100%;" placeholder="Buscar" type="text" id="edit-combine" name="combine" value="" size="30" maxlength="128" class="caja_texto form-text form-control lupa" [(ngModel)]="searchText">
</div>

I want to call all functions from Parent App component and service in my child components, how can I do it in my case?