Página de contacto Angular desde cero

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:45

Página de contacto Angular desde cero

Curso de Angular 4

Clase 31 de 80

Clase 31 / 80

Recursos

Crear una página de contacto en Angular es directo si reutilizas código, configuras bien el routing y aplicas clases de Bootstrap para un formulario claro. Aquí verás cómo duplicar un componente, ajustar el selector y el template, registrar la ruta contacto, actualizar el menú con routerLink y construir un formulario con campos de nombre, correo y mensaje.

¿Cómo crear la página de contacto en Angular paso a paso?

Duplicar el componente de detalle acelera el avance. Cambia nombres, limpia el TypeScript y apunta el template correcto para mantener la app ordenada.

Duplica el componente de detalle y renombra el folder a contacto.
Renombra archivos: contacto.component.ts y contacto.component.html.
En el TS, cambia nombre del componente y del selector a app-contacto. Usa el template contacto.component.html.
Elimina imports que ya no se usan para evitar carga innecesaria.
Mantén el breadcrumb y cambia el texto a “Contacto” para ubicar al usuario.

¿Qué cambios hacer en el componente?

import { Component } from '@angular/core';

@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html'
})
export class ContactoComponent {}

¿Cómo actualizar el breadcrumb?

<nav>
  <a routerLink="/lugares">Lugares</a> / <span>Contacto</span>
</nav>

¿Cómo configurar rutas y menú con routing en Angular?

Para que la página sea accesible, define la ruta contacto en app.module.ts y agrega el componente a declarations. Luego, crea un ítem en el menú que apunte a la nueva ruta y elimina el enlace redundante a detalle (ya se navega desde la lista de lugares).

En app.module.ts, agrega path "contacto" y component ContactoComponent.
Importa ContactoComponent y súmalo a declarations.
En app.component.html, agrega un enlace de menú con routerLink a "/contacto".
Elimina el enlace “Detalle” si ya no es necesario.

// Ejemplo de rutas
const routes = [
  { path: 'lugares', component: LugaresComponent },
  { path: 'contacto', component: ContactoComponent }
];

<!-- Menú -->
<nav>
  <a routerLink="/lugares">Lugares</a>
  <a routerLink="/contacto">Contacto</a>
</nav>

¿Cómo construir el formulario con Bootstrap y buenas prácticas?

La idea es ofrecer un formulario simple y usable: nombre, correo y mensaje. Usa la clase de Bootstrap form-control para estilizar campos y botones con btn. El input type="email" mejora la experiencia móvil al mostrar la arroba y el .com en el teclado.

Campo “Nombre”: label + input type="text" con form-control.
Campo “Correo”: label + input type="email" con form-control.
Campo “Mensaje”: textarea con form-control.
Separador visual con <hr>.
Botón “Enviar” con estilo primario.
Botón “Cancelar” con routerLink a “/lugares”.

<!-- Formulario de contacto -->
<div class="form-group">
  <label>Nombre</label>
  <input type="text" class="form-control">
</div>

<div class="form-group">
  <label>Correo</label>
  <input type="email" class="form-control">
</div>

<div class="form-group">
  <label>Mensaje</label>
  <textarea class="form-control"></textarea>
</div>

<hr>

<a class="btn btn-primary">Enviar</a>
<a class="btn btn-default" routerLink="/lugares">Cancelar</a>

Además, se sugiere enriquecer la vista: agregar un mapa de Google, una imagen, o dividir el layout en ocho columnas para el formulario y cuatro para una descripción con dirección, teléfono, correo e íconos de Bootstrap. Esto mejora claridad y confianza del usuario.

Finalmente, se anticipa un tema clave: servicios. Si observas, la lista de lugares se repite en detalle.component.ts y lugares.component.ts. Con servicios podrás hacer un refactor para centralizar datos en un solo lugar y evitar duplicación, siguiendo el principio DRY.

¿Tienes mejoras para tu página de contacto? Comparte tu resultado y el código con la comunidad. ¡Nos encantará ver tu implementación!

Nelson Celis

Company_admin

Hace 8 años

Hola!! Comparto como me quedó!!

En contacto.component.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<div id="fondo">
    <div class="card opacity">
        <div class="d-flex flex-row">
            <div class="p-2"><a routerLink="/lugares">Lugares</a></div>
            <div class="p-2">/ Contacto</div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4  offset-md-1 opacity esp">
                <h2 class="d-flex justify-content-center">¡Escríbanos!</h2>
                <label>Nombre</label>
                <input type="text" class="form-control">
                <br>
                <label>Correo</label>
                <input type="email" class="form-control">
                <br>
                <label>Mensaje</label>
                <textarea class="form-control"></textarea>
                <hr>
                <div class="d-flex justify-content-center">
                    <a class="btn btn-primary">Enviar</a>
                    <a class="btn btn-secondary">Cancelar</a>  
                </div>
                
            </div>
            <div class="col-md-4 offset-md-2 opacity esp">
                <p class="d-flex justify-content-center"><i class="fas fa-globe fa-4x"></i></p>
                <h2 class="d-flex justify-content-center">Contacto</h2>
                <p class="d-flex justify-content-center">Nelson Celis</p>
                <p class="d-flex justify-content-center">Ingeniero en Automatización</p>
                <p class="d-flex justify-content-center"><i class="fas fa-phone"><span> +56 9 8878 5755</span></i></p>
                <p class="d-flex justify-content-center"><i class="fas fa-map-marker-alt"><span> Santiago, Chile</span></i></p>
            </div>
        </div>
        
    </div>
</div>

En contacto.component.css

#fondo{
	background-image: url(../../images/fondo.jpg);
	background-position: 50% 50%;
    background-size:cover;
    height: 100vh;
    font-family: Arial;
}

.opacity{
    background-color:rgb(240,248,255,0.7);
}

.esp{
    margin-top: 20px;
    padding: 20px;
}

.btn{
    margin: 5px;
}

span{
    font-family: Arial;
    font-weight: normal;
}

Santiago Diaz

Hace 8 años

Muchas gracias!. Me ayudó mucho tu código.
Saludos

Marla Carolina Prieto Pelayo

Hace 7 años

Mil gracias por compartir tus conocimientos, me fueron de gran ayuda <3

Comentarios (66)66 comentarios

Miguel Angeles

Hace 9 años

Me quedo así.

Jhossept Romero

Te quedo muy cool Felicidades

Jhonatan Steven Yepes

Muy buen diseño

Pablo José

Creo que este es mi avance… mmm no es mucho pero sigo practicando, Saludos n.n

Y el código 😃

Yesica Lizeth Cortés Pineda

Está muy bien, gracias por tu aporte.

Jonathan Jiménez

Eduardo de la Cruz Ibarra

Profesor

Me gustó mucho que pusieras esos elementos a la derecha!

Alejandro Estupiñan

Me puedes pasar el codigo?

Miguel Angel Goda Molina

bueno a mi intento me quedo asi

Muy bien! muchas gracias por tu aporte.

Jecsham Castillo

Bien hecho!

Robert Camilo Rodriguez Cabra

Este fue mi avance.

Jesús Enrique Rojas

Así me quedo a mi

Y aquí esta el enlace para el codigo

Pedro Ramón Sánchez Chacón

Felicidades amigo, esta espectacular.

Muchas gracias @VengadorWeb

Yeison Montoya

Me gusta como quedó.

Usuario anónimo

User

Hola compañeros, pues les comparto como va mi proyecto en local:
IDE:

HTML:

.Saludos.

Carlos Pedroza

Camilo Andres Navarrete Ruiz

Buenas tardes, este es mi progreso, gracias.

Muy bien, muchas gracias por tu aporte, cómo te ha parecido el curso?

Leonardo Araoz

Wilson Marino Pablo Mendez

Solo comparto!

Azlain Saavedra

Para crear de manera rapida los componentes podemos apoyarnos en angular cli desde la consola:

ng g component contacto

esto aplica para crear directivas, servicios y otros tantos dejo aqui la info

aqui

Rodrigo Sebastian Salinas Leiva

Algo modesto pero que me alegra hacerlo con estas nuevas tecnologías.

Yo tenia la idea de que Angular era un framework suuuuuuper complejo, pero con este curso me di cuenta que no es así, y permite hacer cosas muy interesantes muy fácilmente.

Isaí Ramírez

Leyendo un poco más de bootstrap hice esto

Felipe de Jesús Víctor Arceo

contacto.component.html

<ng-container appBodyBackground>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a routerLink="/lugares">Lugares</a></li>
        <li class="breadcrumb-item">Contacto</li>
    </ol>
</nav>


<div class="container rounded">
    <div class="row">

        <div class="col-md-8">
            <p><img src="../../../assets/logo-platzisquare.png" class="img-fluid mx-auto d-block mt-5" alt="Logo de PlatziSquare!"></p>
        </div>

        <div class="col-md-4">
            <label class="font-weight-bold" for="nombre">Me llamo:</label>
            <input type="text" class="form-control" id="nombre">
            <label class="font-weight-bold" for="correo">Mi correo electrónico es:</label>
            <input type="email" class="form-control" id="correo">
            <label class="font-weight-bold" for="mensaje">Mensaje para PlatziSquare!:</label>
            <textarea name="mensaje" class="form-control" id="mensaje" rows="4"></textarea>
            <hr>
            <button class="btn btn-primary" >Enviar</button>
            <button routerLink="/lugares" class="btn btn-light ml-1">Cancelar</button>
            <hr>
            <div class="card">
                <agm-map [latitude]="20.6737883" [longitude]="-103.3704326" [zoom]="12">
                    <agm-marker [latitude]="20.6737883" [longitude]="-103.3704326"></agm-marker>
                </agm-map>
                <div class="card-body">
                    <h5 class="card-title">Visitanos en:</h5>
                    <p class="card-text">
                        Av. Importante #1234, Piso 9, int. 63 <br>
                        Cuidad, Estado<br>
                        
                    </p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">
                        <img src="../../assets/icons/baseline_call_black_18dp.png" alt="Número telefónico de PlatziSquare"> (12) 1234-5678 <br>
                        <img src="../../assets/icons/baseline_email_black_18dp.png" alt="Email de PlatziSquare"> contacto@platzisquare.com
                    </small>
                </div>
            </div>
            <p></p>
        </div>

    </div>
</div>
</ng-container>

body-background.directive.ts

import { Directive, AfterViewInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appBodyBackground]'
})

export class BodyBackgroundDirective implements AfterViewInit, OnDestroy{

  bodyElement: HTMLBodyElement;

  constructor() { 
    this.bodyElement =  document.getElementsByTagName('body')[0];
  }

  ngAfterViewInit() {
    this.bodyElement.classList.add('body-bg');
  }

  ngOnDestroy() {
    this.bodyElement.classList.remove('body-bg');
  }

}

Yarilenis Yurimar Laverde Tejada

Mi comienzo

Erika Alejandra Garcia

Después del Reto: 😉

Andres Alvarez

me quedo asi

<div class="contact-us container-fluid">
  <div class="txt-contact row">
    <div class="txt-form col-4 offset-1" >
      <label>Nombre</label>
      <input type="text" class="form-control" />
      <br />
      <label>Correo</label>
      <input type="email" class="form-control" />
      <br />
      <label>Mensaje</label>
      <textarea class="form-control"></textarea>
      <hr />
      <button type="button" class="btn btn-outline-info">Enviar</button>
    </div>
    <div class="map col-4 offset-1">
      <img src="assets/icono-mail-1.png" >
    </div>
  </div>
</div>

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina