How to create 2 instances of the same component on the same page?

Question

I’m having problems with the components in Angular, I have a component that emits an event when selecting a particular item, and I need to use it twice on the same page, but the second component assumes the same behavior of the first, it seems that are the same instance.

<h1>Transferência</h1>
<div class="alert alert-danger" role="alert" *ngIf="erro">
  {{erro}}
</div>
<form [formGroup]="form" autocomplete="off">
  <div class="text-center">
    <app-procura-conta (contaSelecionada)="setContaOrigem($event)"
                       textoBotao="Procurar conta origem"></app-procura-conta>
  </div>
  <div class="row">
    <div class="col-md-6">
      <app-input id="agencia" placeholder="Digite a agência de origem" label="Agência de origem"
                 formControlName="agencia"
                 [model]="form.get('agencia')"></app-input>
    </div>
    <div class="col-md-6">
      <app-input id="conta" label="Conta de origem" placeholder="Digite o número da conta de origem"
                 formControlName="conta"
                 [model]="form.get('conta')"></app-input>
    </div>
  </div>
  <div class="text-center">
    <app-procura-conta (contaSelecionada)="setContaDestino($event)"
                       textoBotao="Procurar conta destino"></app-procura-conta>
  </div>
  <div class="row">
    <div class="col-md-6">
      <app-input id="agenciaDestino" placeholder="Digite a agência de destino" label="Agência de destino"
                 formControlName="agenciaFavorecido"
                 [model]="form.get('agenciaFavorecido')"></app-input>
    </div>
    <div class="col-md-6">
      <app-input id="contaDestino" label="Conta de destino" placeholder="Digite o número da conta de destino"
                 formControlName="contaFavorecido"
                 [model]="form.get('contaFavorecido')"></app-input>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <app-input id="valor" placeholder="Digite o valor que deseja transferir" label="Valor" formControlName="valor"
                 [model]="form.get('valor')"></app-input>
    </div>
  </div>
  <div class="text-center">
    <button (click)="transferir()" class="btn btn-primary" [disabled]="form.invalid">Transferir</button>
  </div>
</form>

The component I speak of is this app-procura-conta, the second I ask him to use the method setContaDestino, but he’s using the setContaOrigem of the first. Follow his code:

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {ContaService} from '../conta.service';
import {ContaResponse} from '../../model/conta.model';

@Component({
  selector: 'app-procura-conta',
  templateUrl: './procura-conta.component.html',
  styleUrls: ['./procura-conta.component.css']
})
export class ProcuraContaComponent implements OnInit {
  form: FormGroup;
  campoBusca: FormControl;

  contas: ContaResponse[];

  @Output()
  contaSelecionada = new EventEmitter();

  @Input()
  textoBotao: string;

  constructor(private fb: FormBuilder, private contaService: ContaService) {
  }

  ngOnInit() {
    this.campoBusca = this.fb.control('');
    this.form = this.fb.group({
      termo: this.campoBusca
    });
    this.campoBusca.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(termo => this.contaService.busca(termo))
    ).subscribe(contas => this.contas = contas);
  }

  seleciona(conta: ContaResponse) {
    this.contaSelecionada.emit(conta);
  }
}

Does anyone know how to solve?

Answer 1

I discovered the problem, in the component app-procura-conta has a Bootstrap modal that needs ID to work properly, and I hadn’t bothered to change that ID, and when I used the component 2 times on the same page, it got 2 Ids equal, which ended up giving conflict in Bootstrap. To solve the problem, I now ask you to pass the ID on the reusable component.