Take a value from a child component and send to the parent

Question

I have an Angular 8 application and I have two components, a parent and a child and I have an array of objects in the child component and I need to send the array information to the parent component and put that chosen value in a Formgroup

creat-Category.component.ts(parent)

@Component({
  selector: 'app-creat-category',
  templateUrl: './creat-category.component.html',
  styleUrls: ['./creat-category.component.css']
})
export class CreatCategoryComponent implements OnInit {
  infoCategory: FormGroup;
  loading = false;

  constructor(
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit(): void {
    this.infoCategory = this.formBuilder.group({
      nameCategory: [null, Validators.required],
      subCategory: [false],
      selectSubCategory: [null],
    });
    console.log(this.infoCategory)
  }

  creatCategory(){
    this.loading = true;
    console.log(this.infoCategory.value);
    this.loading = false;
  }

  get c() { 
    return this.infoCategory.controls; 
  }

}

creat-Category.component.html(parent)

<div class="container p-5">
    <form (submit)="creatCategory()" [formGroup]="infoCategory">
        <div class="form-group mb-3">
            <label>Nome da categoria</label>
            <input formControlName="nameCategory" type="text" class="form-control"/>
            <div class="invalid-feedback d-block" *ngIf="c.nameCategory.invalid && (c.nameCategory.dirty || c.nameCategory.touched)">
                Favor preencher este campo.
            </div>

        </div>
        <div class="form-group form-check">
            <input formControlName="subCategory" type="checkbox" class="form-check-input">
            <label class="form-check-label">Sub categoria</label>
        </div>
        <div *ngIf="infoCategory.value.subCategory">
            <app-sub-category></app-sub-category> 
        </div>
        

        <button [disabled]="!infoCategory.valid" class="btn btn-primary">Cadastrar produto</button>  
        <div *ngIf="loading" class="spinner-border spinner" role="status"></div>

    </form>
</div>

sub-Category.component.ts(child)

@Component({
  selector: 'app-sub-category',
  templateUrl: './sub-category.component.html',
  styleUrls: ['./sub-category.component.css']
})
export class SubCategoryComponent implements OnInit {
  
  subCategory: Object = [
    {
      "name": "Categoria 1",
      
    },
    {
      "name": "Categoria 2",
    }
  ];
  
  constructor() { }

  ngOnInit(): void {
  }
}

sub-Category.component.html(child)

<label>Nome da subcategoria</label>
<div class="form-group mb-3">         
    <select class="form-control">
        <option *ngFor="let s of subCategory" >{{ s.name }}</option>
    </select>
</div>

I need to take what was chosen in the select tag and set the value to Formbuilder’s selectSubCategory variable, tried a few things, like @Output and @Input but was not successful.

Answer 1

Hello. There are several ways to solve information exchange between parent and child element.

In your case, as this information should be sent from child to parent when the user does the action of selecting a select option, it might be a good idea for you to work with Eventemiter.

Your child . ts, Voce declares an Output Eventemitter, declare a function send Information that Emit an event. This event sends the select information to the parent.

export class SubCategoryComponent implements OnInit{
   ...
   @Output() evento: EventEmitter<any> = new EventEmitter<any>()
   ...
   ngOnInit(){ ... }

   enviarInformacao(event){
     evento.emit(event.target.value)
   }
} 

html child component, put in select the statement that calls your function send

<label>Nome da subcategoria</label>
<div class="form-group mb-3">         
    <select class="form-control" (change)="enviarInformacao($event)">
        <option *ngFor="let s of subCategory" >{{ s.name }}</option>
    </select>
</div>

In the parent HTML Component, note that your get a statement to "listen" to the Output event, and when it is triggered (this is event.Emit()), it will call a function to receive the information and there you can put in the Formbuilder

<div class="container p-5">
    <form (submit)="creatCategory()" [formGroup]="infoCategory">
        <div class="form-group mb-3">
            <label>Nome da categoria</label>
            <input formControlName="nameCategory" type="text" class="form-control"/>
            <div class="invalid-feedback d-block" *ngIf="c.nameCategory.invalid && (c.nameCategory.dirty || c.nameCategory.touched)">
                Favor preencher este campo.
            </div>

        </div>
        <div class="form-group form-check">
            <input formControlName="subCategory" type="checkbox" class="form-check-input">
            <label class="form-check-label">Sub categoria</label>
        </div>
        <div *ngIf="infoCategory.value.subCategory">
            <app-sub-category (evento)="recebeInformacao(evento)"></app-sub-category> 
        </div>
        

        <button [disabled]="!infoCategory.valid" class="btn btn-primary">Cadastrar produto</button>  
        <div *ngIf="loading" class="spinner-border spinner" role="status"></div>

    </form>
</div>

no. ts of the father

export class CreatCategoryComponent implements OnInit {
   ...
   receberInformacao(categoria){
     //passe a informacao para o Formbuilder
   }
}