pass object from parent to child

0
votes

I have a convention object that i have to pass as an input to a child component, the convention id is displayed when i call it in the child's template, but i get undefined when i try to use my the convention in a console.log. I tried placing my console.log in the constructor of the child as well as in ngOnInit, ngAfterViewInit and ngOnChanges. For ngOnChanges when i pass only the id of the convention as an input to the child component it works just fine, but i need to pass the convention not its id.

index.component.ts

@Component({
    templateUrl: './index.template.html',
    selector: 'be-convention-update',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConventionUpdateComponent {

    private convention$: Convention;
    private conventionId: number;

    constructor(private route: ActivatedRoute,
        private conventionService: ConventionService) {
        this.route.params.subscribe(
            (params: any) => {
                this.conventionId = params['id'];
                this.conventionService.getOne(this.conventionId).subscribe(response => this.convention$ = response);
            }
        );
    }

}

index.template.html

<be-form-convention [convention]="convention$"></be-form-convention>

form.component.ts

@Component({
    selector: 'be-form-convention',
    templateUrl: './form.template.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConventionFormComponent implements OnChanges, OnInit {

    @Input() convention: Convention;

    constructor() {
    }

    public ngAfterViewInit() {
      console.log(this.convention); //undefined
    }

    public ngOnInit(): void {
      console.log(this.convention); //undefined
    }

    public ngOnChanges(changes: SimpleChanges): void {
      const object: SimpleChange = changes.convention;
      console.log('prev value: ', object.previousValue); //undefined
      console.log('got name: ', object.currentValue); //undefined
    }

}
3
angulartypescript
Do you actually get your convention object from you conventionService.getOne ? – Orodan
The $ suffix screams observable and "in need of async pipe" but it's unclear to say the least what you are doing and why you are doing it. – Aluan Haddad
@Orodan yes i get the convention object from my service – Aymen Kanzari
@AluanHaddad you are right but this is not related to my problem – Aymen Kanzari
From what I can see here, you're doing it right, can you show your ConventionUpdateComponent template and the Convention model please ? – Orodan

3 Answers

1
votes

Since it is an async operation I suggest you wait until the convention gets the value use *ngIf to load child-component when convention object is not empty

<ng-container *ngIf="convention$">
<be-form-convention [convention]="convention$"></be-form-convention>
</ng-container>
0
votes

As per my understanding you want to do some operation, when you receive input or input value changes.

You can use input directive with set function, like below:

_convention: Convention;
@Input()
set convention(convention: Convention) {
    this._convention = convention;
    //the code you want to handle after input is received
}
-1
votes

For component-component communication i always use a service.

What i do is: i create a service and make two functions (getData and setData).

when ever i want to send some data from one component to another i call the setData method and when i want to receive the data in other component i use getData method.

Here is an example:

import { Injectable } from '@angular/core';

@Injectable()
export class DataExchange {

  data; //Global Variable of 'any' type.

  setData(data){
this.data = data;
  }

getData():any{
  return this.data;
}
}