Create child component and call function. Angular 5.2.1

Question

I have a table in a parent component that when clicking on a row, I painted a child component that was with ngIf to false until that moment.

At the moment that I want to paint the child component, call a function of the child and pass the row to it, and I do not just have to pass the data, I have to process it in the child, that's why I need to call a function

// view father

<jhi-gestion-imputacion-detalle
  (volverEvent)="volverDetalle($event)"
  [childReportesParte]="parentReportesParte"
  [parentVerTabla]="childVerTabla"
  *ngIf="!parentVerTabla"
>
</jhi-gestion-imputacion-detalle>

....

 <tr (click)="detalle(parte)">

// controller father

ViewChild(GestionImputacionDetalleComponent) child: GestionImputacionDetalleComponent;

detalle(parte: GestionImputacionData) {
    this.parentVerTabla = false;
    this.parte = parte;
    this.child.cargar(this.parte); <-- child is undefined
}

The problem is that "child" is undefined. What I see in the forums is "AfterViewInit", but that's when the controller starts, not like I need, that the child component is painted by clicking on a row of my parent component table.

How can I do so by clicking on the row of my table, I paint the child component and I can call a function of it, when it is created.

You should use [hidden]="parentVerTabla" instead of *ngIf

Nithya Rajan
– Nithya Rajan

2019-02-15 09:04:18 +00:00
Commented Feb 15, 2019 at 9:04 — Nithya Rajan
– Nithya Rajan, Commented Feb 15, 2019 at 9:04

Nithya Rajan · Accepted Answer · 2019-02-15 09:09:55Z

1

You should use [hidden] to hide the children component from the DOM.

*ngIf removes the child component from DOM so the @viewChild() won't work. but with the use of [hidden], you only hides the element so @viewChild() will work.

<jhi-gestion-imputacion-detalle
  (volverEvent)="volverDetalle($event)"
  [childReportesParte]="parentReportesParte"
  [parentVerTabla]="childVerTabla"
  [hidden]="parentVerTabla"
>

[hidden] - adds display: none; property to the element's style based on conditions.
*ngIf - adds/removes the element from the DOM based on conditions.

edited Feb 15, 2019 at 9:09

answered Feb 15, 2019 at 9:05

Nithya Rajan

4,93422 silver badges34 bronze badges

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

Comments

Eliseo · Accepted Answer · 2019-02-15 09:18:44Z

0

Another aproach is using a @Input in your children to pass the data and take account that, when children becomes visible, ngOnInit of the children is called

//children
export class HelloComponent implements OnInit  {
  @Input() name: string;
  ngOnInit()
  {
    this.name=this.name+" updated"
  }
}

.

//parent
<hello *ngIf="childVisible" name="{{ name }}"></hello>
<button (click)="childVisible=!childVisible">click</button>

stackBlitz

answered Feb 15, 2019 at 9:18

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Create child component and call function. Angular 5.2.1

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related