Angular change child component template with parent component action

Question

I'm trying to create a child component (it's a form), which appears within a parent component in a modal.

The form (child component) must change according to the type chosen in the parent through several buttons (each button is a different type).

When you click on the button, the child component must modify the form according to the type chosen in the parent. The form controls change properly, but the template is not modified. The code is the following:

Parent method that opens the modal and calls the child component

  show(value: string){
    this.type = value;
    this.entityFormComponent.type = this.type;
    this.entityFormComponent.ngOnInit();

    // Set submitAttemp to false for the new form
    this.entityFormComponent.submitAttemp = false;

    this.contentModal.show();
  }

Method ngOnInit of the child component

  ngOnInit(): void {
    if(this.creating){
      this.entity = new Entity();
    } else {
      this.entityService.get(this.nameToEdit, this.type)
    }
    // Initialize the form and add the corresponding attributes according to the type
    this.entityForm = new FormGroup({});
    this.entityHelper.getEntityFormAttributes(this.entityForm, this.type, this.entity);
  }

So far it seems that everything is correct and the form group that is generated is adequate every time you click on the parent button, but the inputs of the form do not appear. They are generated through an auxiliary method, which returns true or false through the type and attribute of the input that is passed:

<div class="col-md-6" *ngIf="entityHelper.getEntityInputsAttributes('shadow', type)">

The type in the view is "undefined", but in the component appears correctly. Why doesn't the view update the type correctly? What do I have to do to update it?

Madalena Ventura Madalena Ventura · Accepted Answer · 2020-05-16T12:51:42

For parent child component interactions, it is advised to use the Input directive. If you have different types of forms you could use an enum. And bind each enum entry to each of the buttons by adding an action to the button that sets a property with its correspondent type. For example:

onClick(type: FormTypes) {
   this.formType = type;
}

You parent template would look something like

<child-component [typeOfForm]=formType </child-component>

Your child component would need to execute changes when a new formType is provided therefore you would need to do something like

@Input()
set typeOfForm(typeOfForm: FormType) {
   //make the necessary changes on form type change.
}

Also to avoid manually executing the ngOnInit function would can surround your child component tag with a div and have it showing or not with a boolean property on the typescript code like so:

<div *nfIf="showForm">
   <child-component [typeOfForm]=formType </child-component>
</div>

doing this your show function would only set the showForm property to true.

Hope this helps, for more detailed information on component interaction I suggest you check out this documentation Angular Component interaction

Angular change child component template with parent component action

1 Answers