How to leave dynamic Modal content with data coming from API

I want to leave dynamic Modal data with API data

lista.html

<table>
    <tr *ngFor="let dado of dados3; let i = index;">
        <td> 
            <button type="button" class="btn btn-danger" 
                data-toggle="modal" data-target="#modalVerCarrinho"
                (click)="verCarrinho(dado.userId)">
                c
            </button>
        </td>
        <td>{{ dado.serverDate | date: 'dd/MM/yyyy'  }} {{ dado.serverTimePrettyFirstAction }}</td>
        <td>{{ dado.totalAbandonedCartsRevenue }}</td>
        <td>{{ dado.totalAbandonedCartsItems }}</td>
        <td>{{ dado.userId  }}</td>
        <td>{{ dado.detail.dsResponsibleName }}</td>
        <td>({{ dado.detail.nuPhoneDDD }}) {{ dado.detail.nuPhone }}</td>
        <td>            
            <button type="button" class="btn btn-danger" 
                data-toggle="modal" data-target="#modal"
                (click)="excluir(dado.id)">
                Ações
            </button>
        </td>
    </tr>
</table>

<modal-util 
[id]="'modalVerCarrinho'" 
[titulo]="'Carrinho '"
[descricao]="'Deseja realmente excluir o aluno selecionado?'"
(onConfirm)="verCarrinho($event)">
</modal-util>

modal-util-component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'modal-util',
    template: '
        <div class="modal fade" [id]="id" tabindex="-1" 
            role="dialog" aria-labelledby="modalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                    aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">{{ titulo }}</h4>
              </div>
              <div class="modal-body">
                {{ descricao }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                    data-dismiss="modal">Não</button>
                <button type="button" class="btn btn-primary"
                    data-dismiss="modal"
                    (click)="confirmar()">Sim</button>
              </div>
            </div>
          </div>
        </div>'
})
export class ModalUtilComponent {

    @Input() id: string;
    @Input() titulo: string;
    @Input() descricao: string;
    @Output() onConfirm: EventEmitter<boolean> = new EventEmitter<boolean>();

    confirmar() {
        this.onConfirm.emit(true);
    }
}

And in my component I put as below, where I return in the console all the data I need, I just want to stylise the modal, but I can not use the data present in item on the screen

data-list-component.ts

verCarrinho(i :number){
   let item = this.dados[i]; 
   console.log(item);
}