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>