Angular: pass injected data to child component

Question

I'm new to Angular. ng --version says Angular 8.2.6. I am extending someone else's app.

I have a component, StructureDefinition, which contains a dagre-d3 visual plus a legend with six items in it (one per product type).
When the user clicks an item, a dialog appears (component StructureAddProductDialog). The dialog will show form items arranged in three columns.
I am building the first column, component StructureDialogColumn1. This contains a form and currently a single mat-select, with six mat-option items, corresponding to the six product types in the legend.
I am trying to set which mat-option is selected when the dialog opens. Currently nothing is selected on load.

The box the user has clicked in component StructureDefinition is passed successfully to child component StructureAddProductDialog via a data property of a config variable within the dialog.

import { MatDialog, MatDialogConfig } from '@angular/material';

the class:

export class StructureDefinitionComponent implements OnChanges {
  constructor(
    private dialog: MatDialog,
    private productService: ProductService
  ) {}

  ngOnChanges(changes: SimpleChanges) {
      this.renderChart(this.dialog, this.productService);

  }

  renderChart(dialog, products) {
    const element = this.chartContainer.nativeElement;
    d3RenderChart(element, dialog, products);
  }


}

    function d3RenderChart(element, dialog, products) {

...other code here

  var productGroup = legendGroup.selectAll("g.products")
    .data(products)
    .enter().append("g")
    .attr("class","products")
    .attr("transform",function(d,i){ return "translate(10,"+((i+1)*55)+")"; })
    .on('click', function(d){ openDialog(d, dialog); });

...other code here

function openDialog(d, dialog) {

    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = d;

    const dialogRef = dialog.open(StructureAddproductDialogComponent, dialogConfig);
}

The child component StructureAddProductDialog receives the data:

@Injectable()
export class StructureAddproductDialogComponent implements OnDestroy {
  data: ProductType;

  constructor(
    private dialogRef: MatDialogRef<StructureAddproductDialogComponent>,
    private productService: ProductService,
    @Inject(MAT_DIALOG_DATA) data:ProductType

  ) {

    console.log(data);//logs the selected item correctly to console

  }

  ngOnDestroy(): void {

  }

}

I then try to pass the selected data to the final column component as chosenTest:

  template: `

        <div class="container" id="container1">
          <h2 mat-dialog-title>Product definition</h2>
          <structure-dialog-column1 [productsTest]="productService" [chosenTest]="data"></structure-dialog-column1>
        </div> 
`

productsTest data comes through fine, but chosenTest is undefined in StructureDialogColumn1:

export class StructureDialogColumn1Component {


  @Input() productsTest: ProductType;
  @Input() chosenTest: ProductType;
  productForm = this.fb.group({ products: [''] });


  constructor(
    private fb: FormBuilder,
    private chosen: ProductType
  ) {

    console.log(this);//StructureDialogColumn1Component.chosenTest==undefined

  }

}

I am going in circles trying to get this working. Can you help?

Thanks!

This is quite a lot of code and info! Could you possibly create a minimum replication of this issue in a stackblitz or something? — Keenan Diggs
– Keenan Diggs, Commented Mar 11, 2020 at 15:39

emma · Accepted Answer · 2020-03-11 16:27:30Z

2

I managed to get this working, mainly by adding the keyword public: @Inject(MAT_DIALOG_DATA) public data: any

I also added some ngOnInit declarations because I noticed events seemed to fire before the data was ready. I'm not certain which of these helped (probably both).

answered Mar 11, 2020 at 16:27

emma

8043 gold badges10 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Angular: pass injected data to child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related