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

}

jna · Accepted Answer · 2022-04-28 18:25:23Z

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.

answered Apr 28, 2022 at 18:25

jna

99610 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HomerO Over a year ago

Works putting this.filteredText = 2; //or any other value But with this.filteredText = new AppPipe().transform(this.titleList, this.searchText); i cannot make it work yet.

jna Over a year ago

Then please add your app.pipe.ts in your question

Collectives™ on Stack Overflow

pass variable from parent to child component angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related