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!
