Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Depois que separamos o componente perfil-contato, a página parou de renderizar

Cheguei no momento em que clicamos na figura do "lixo" e somos direcionados para página do perfil do contato, e então quando tentei criar a rota para o botão "voltar", descobri que o app-perfil-contato não está sendo mais renderizado, pois toda mudança que faço no template do código, não muda nada na página. Segue abaixo o código na pasta perfil-contato.component.ts e mais abaixo o código da pasta perfil-contato.component.html:

import { Component } from '@angular/core';
import { ContainerComponent } from '../../componentes/container/container.component';
import { CommonModule } from '@angular/common';
import { Contato } from '../../componentes/contato/contato';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-perfil-contato',
  standalone: true,
  imports: [CommonModule, ContainerComponent, RouterLink],
  templateUrl: './perfil-contato.component.html',
  styleUrl: './perfil-contato.component.css',
})
export class PerfilContatoComponent {
  contato: Contato = {
    id: 0,
    nome: 'dev',
    telefone: '',
    email: 'dev@email.com',
    aniversario: '12/10/1990',
    redes: 'dev.com',
  };
}
<app-container>
  <header>
    <section class="cabecalho-link">
      <img src="assets/logo.png" alt="" />
      <div>
        <button>
          <img class="seta" src="assets/arrow-left.png" />
          <a routerLink="/lista-contatos">Voltar</a>
        </button>
      </div>
    </section>
    <section class="cabecalho-contato">
      <img src="assets/perfil-contato.png" alt="" />
      <h1>Perfil do contato</h1>
    </section>
  </header>

  <section class="perfil">
    <ul>
      <li>
        <i class="material-icons">call</i>
        <strong>Telefone</strong>
      </li>
      <li>{{ contato.telefone }}</li>
      <li>
        <i class="material-icons">mail</i>
        <strong>Email</strong>
      </li>
      <li>{{ contato.email }}</li>
      <li>
        <i class="material-icons">event_available</i>
        <strong>Data de nascimento</strong>
      </li>
      <li>{{ contato.aniversario }}</li>
      <li>
        <i class="material-icons">language</i>
        <strong>Redes sociais</strong>
      </li>
      <li>{{ contato.redes }}</li>
    </ul>
    <div class="botoes">
      <button class="botao-excluir">Excluir contato</button>
      <button class="botao-editar">Editar</button>
    </div>
  </section>
</app-container>
2 respostas
solução!

depois de muitas tentativas, fechei tudo e ao reabrir, a renderização voltou a acontecer.

Oii, Lia. Tudo bem?

Que bom que deu certo. Irei finalizar o seu tópico.

Um abraço.