Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

Parte HTML adicionada no vídeo - perfil-contato.component.html

    <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>E-mail</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>
1 resposta

Oi, Vitor! Tudo bem?

Obrigada por compartilhar o perfil-contato.component.html, sua estrutura ficou clara para exibir os dados do contato na tela de perfil.

Você organizou bem as informações usando interpolação, como {{ contato.telefone }}, {{ contato.email }} e {{ contato.aniversario }}, além de separar as ações em botões para editar e excluir.

Você chegou a testar como a página se comporta quando algum campo do contato está sem valor?

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!