How to pass objects to other components in Angular 9

Question

i'm working with Angular 9 and Spring boot, i'm making the create part of the cases module, for that i need to get some data to populate select inputs, the microservices are working properly, it gets the data from the DB, but trying to render the select inputs it doesn't recognize the variable.

This is the oninit of the add-case.ts

ngOnInit(): void {

    this.loading = true;
    this.isLoading.add(
      this.caseService.createCasesFork().subscribe(
        data => {
          this.casesFork = data;
          this.grupos = this.casesFork.groups;
          this.productos = this.casesFork.products;
          this.tipologias = this.casesFork.tipologies;
          this.intenciones = this.casesFork.intentions;
          this.regiones = this.casesFork.regions;

          this.loading = false;
          console.log(this.casesFork.groups);
      
        },
        (error: HttpErrorResponse) => {
          this.alert.errorIzi(error.message);
        }
      ),
      {key: 'loading'}
    )
  } 

it's working so far, it shows the group.

the problem is the form component where i want to create the select inputs, because this form is a component.

This is what i tried.

<select formControlName="grupos">
    <option [value]="grupo" *ngFor="let grupo of grupos">
      {{ grupo.name }}
    </option>
</select>

but i get this error

this is the form component ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Action } from '../../../models/enums';

@Component({
  selector: 'app-cases-form',
  templateUrl: './cases-form.component.html',
  styleUrls: ['./cases-form.component.scss']
})
export class CasesFormComponent implements OnInit {
  @Input() action: Action;
  @Output() submitForm = new EventEmitter<boolean>();
  form: FormGroup;
  methods = Action;
  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createForm();
  }

  createForm(): void {
    this.form = this.fb.group({
      grupos: ['', Validators.required],
      name: ['', Validators.required],
      field: ['', Validators.required]
    });
  }

  onSubmit(): void {
    if (this.form.valid) {
      this.submitForm.emit(true);
    }
  }
}

How can i read the property in the template or the form ts? any help or advice is welcome, thanks

Answer 1

Firstly, error says the cause. You have not defined grupos variable in your component so it will throw the error.

Assuming add-case.ts file is injectable service which you will have to import in CasesFormComponent and you can use that service in front-end like:

<select formControlName="grupos">
    <option [value]="grupo" *ngFor="let grupo of addCaseService.grupos">
      {{ grupo.name }}
    </option>
</select>

Or you can use a method in component that fetch grupos information from addCaseService.

Let me know if it helps. Thanks

Answer 2

You should get your grupos's data on CasesFormComponent's input

@Input grupos :Grupos[] = [];

Then on HTML Code

<select formControlName="groups">
    <option [value]="grupo" *ngFor="let group of grupos">
      {{ grupo.name }}
    </option>
</select>