Angular - how to pass data from a component to another

Question

I'm trying to implement data-filtering on my data-table. I've set up some forms with ngModel so that the FormComponent properties get populated as I write in the forms. For example if I write in the sequenceId form, the sequenceId property gets that value

export class FormComponent implements OnInit {

  constructor() { }

  panelOpenState = false;
  formGroup!: FormGroup;

  sequenceId!: string;
  asOrigin!: number;
  prefix!: string;
  suffix!: number;
  collectorIp!: string;
  collectorAsn!: string;
  durationGreater!: number;
  durationSmaller!: number;
  startDate!: Date;
  endDate!: Date;
  updates!: number;
  withdraws!: number;
  announces!: number;

...
}

In order to handle the filtering i'm trying to give this value to the SequenceComponent, the one in charge of showing the data in the table. I don't know how to give the information contained in the FormComponent to this component. I've tried defining a property of type FormComponent but it's clearly not linked to the information I'm trying to get.

export class SequencesComponent{

...

  datiForm!: FormComponent;

...
}

Answer 1

You can use @ViewChild to get a reference to the child component and then retrieve a reference to the field that you want

export class SequencesComponent{

    @ViewChild(FormComponent)
    private formComponent: FormComponent; 

  public someMethod(){
    this.formComponent.formGroup  <---- will give you a reference to the form of the child component

  }

}