[Projeto] evoluindo cada vez mais

<section class="contato">
  <ul>
    <li>
      <strong>{{ nome }}</strong>
    </li>
    <li>{{ telefone }}</li>
    <li>
      <button>
        <img src="/assets/pencil-square.png" class="pencil" />
      </button>
      <button>
        <img src="/assets/trash.png" class="trash" />
      </button>
    </li>
  </ul>
</section>

o css do contato

.contato ul {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contato ul li {
  list-style: none;
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  list-style: 150%;
}

.contato ul li button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

app-container.html

<app-container>
  <app-cabecalho></app-cabecalho>
  @for (letra of alfabeto; track letra) {
  <app-separador>
    {{ letra }}
  </app-separador>
  <app-contato nome="Samuel" telefone="11 99723-8865"></app-contato>
  }
</app-container>