pass variable from parent to child component angular

Question

I cannot make a variable or a function to work in second (child) component: it returns undefined...

My parent app is

//app.component.ts
import { Component, Injectable, OnInit } from '@angular/core';
import { AppPipe } from './app.pipe';
import { AppService, InformesCounter } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [AppService, AppPipe],
  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;
  appPipe: AppPipe[] | any;
  
  constructor(private appService: AppService) { }

  ngOnInit(): void {
    this.showInformes();
    this.onSubmit();
  }

  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);
      });
  }

  onSubmit() {
    this.filteredText = new AppPipe().transform(this.titleList, this.searchText);
    console.log(this.filteredText);
  }

}

My child component is

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

@Component({
  selector: 'app-auditorias',
  templateUrl: './auditorias.component.html',
  providers: [AppService, AppPipe],
  styleUrls: ['./auditorias.component.sass']
})
export class AuditoriasComponent implements OnInit {
  @Input() 
  titleList = this.appComponent.titleList;
  searchText: InformesCounter[] | any;
  num: number | undefined;

  constructor(private appService: AppService, private appComponent: AppComponent) { }

  ngOnInit(): void {
    this.onSubmit();
    this.showInformes();
  }

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

  onSubmit() {
    this.appComponent.onSubmit();
  }

I cannot make the functions from the parent component to work in second component, i looked in angular docs but is not working for me, even if i pass a variable with a number from parent to child component it returns undefined. I will need your help because i created also a service for that but without results.

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/blablabla';
  
  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.'));
  }

}

Answer 1

If I understand this correctly it looks like you are trying to use dependency injection to inject AppComponent in the constructor of your AuditoriasComponent. That won't work.

The input value should be passed on from parent to child through the child selector in the html of the parent.

Try something like this:

In app.component.html

<app-auditorias [titleList]="titleList"></app-auditorias>

and then in auditorias.component.ts

@Input() titleList: any[] = [];

Then it starts out as an empty array until it gets the input from its parent.