How to pass values to children component Anguar?

Question

I have a parent component with children inside:

 <app-documents-mode-register [id_files]="getCheckedCheckboxesValues('id_file')"></app-documents-mode-register>

Where method getCheckedCheckboxesValues is:

public getCheckedCheckboxesValues(property: string): number[] {
    return this.checkboxes
        .toArray()
        .slice(1)
        .filter((element: any) => element.value)
        .map((element) => element.application[property]);
}

So I try to pass [id_files] to children component, but I have read that not recommended way to pass function as Input parameter. How to improve it?

The app-documents-mode-register component has onPush

Will the resulting array change? For what you have read you can also rad here for example: https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496 — MoxxiManagarm, Nov 18 '20 at 13:19
I think it will be better if you use a pipe instead of a function. — , Nov 18 '20 at 13:21
1. Create a variable in the parent. 2. Set the variable using the parent method that you have. 3. Control the change detection from that variable in the child through ngOnChanges — Pedro Bezanilla, Nov 18 '20 at 13:49

score 0 · Accepted Answer · 2020-11-18T14:04:49.863

0

You can define the pipe like this.

@Pipe({ name: 'checkedValues' })
export class CheckedValuesPipe implements PipeTransform {
  transform(checkboxes: any, property: string): number[] {
    return checkboxes.toArray().slice(1).filter((element: any) => 
  element.value).map((element) => element.application[property]);
  }
}

And use the pipe in the template.

<app-documents-mode-register [id_files]="checkboxes | checkedValues : 'id_file'"></app-documents-mode-register>

Please make sure that the checkboxes is a public member in the component class.

edited Nov 18 '20 at 14:04

answered Nov 18 '20 at 13:45

What is benefit of using pipe? Whats is difference from my code? – Nov 18 '20 at 13:47
1

https://stackoverflow.com/questions/48332039/methods-vs-pipes Here is the best answer for your question. The pipe is called only when the input value changed but the methods are called on every change detection. – Nov 18 '20 at 13:50
Why you dont use `[id_files]`? – Nov 18 '20 at 13:53
It does not worl for me – Nov 18 '20 at 13:55
Inside `DocumentsModeRegister` I have `@Input() id_files: number[] = [];` So, values is not passed to children component using pipe – Nov 18 '20 at 14:00
I've just updated my answer a little. Please check again. `[id_files]="checkboxes | checkedValues : 'id_file'"` – Nov 18 '20 at 14:05
I dont know why but your solutions not pushed a new array to children – Nov 18 '20 at 14:06
https://chat.stackoverflow.com/rooms/224734/angular – Nov 18 '20 at 14:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224735/discussion-between-triaton-and-jony). – Nov 18 '20 at 14:13

How to pass values to children component Anguar?

1 Answers1