Primer componente en angular

En esta ocasión vamos a crear el primer componente en angular, en realidad los componentes en angular hace que sea muy atractiva la forma en como trabaja este Framework, así que en esta ocasión nuestro primer componente en angular será uno sencillo, como es el titulo de la sección.

Antes de empezar como crear un componente, hay que tener en cuenta que para que no tengas problemas a la hora de importar dichos componentes, primero configures donde estarán tus archivos, normalmente en la carpeta shared, esto lo hemos hecho en el post «Angular – Estructura base para cualquier proyecto«, como puedes ver en esta ocasión crearemos un componente base, el cual agregaremos en la carpeta shared, la ventaja de esto es que este componente lo podríamos reutilizar en cualquier proyecto.

Lo primero que vamos a hacer es generar el componente y lo haremos con angular cli, de modo que ejecutaras el siguiente comando:

Esto nos generara un componente dentro de shared > components, ahora es importante darse cuenta que el componente no se agregue al sharedModule, normalmente angular cli, lo agrega pero nosotros seguimos una estructura indexable, asi que asegurate de quitarlo de declarations, una vez hecho eso, vamos a gregar ese componente al index principal, aqui es importante mencionarte, en el ejemplo seguimos un indexable para todos los componentes, pero puedes crear un indexable para cada tipo de componentes por ejemplo botones, titles, etc., eso lo vimos en el post «Angular – Estructura base para cualquier proyecto«.

Ahora si ya es un componente que ya esta dado de alta en shared module, que aunque no lo hayamos hecho, una vez agregado en index.ts, este automaticamente ya lo agrega en sharedModule, ahora vamos a agregar los estilos y html.

Que hemos hecho, bueno simplemente hemos creado un titulo que tendra un tamaño de letra un grosor de letra y un  espaciado entre elementos, ya que sera un titulo muy simple, ahora nos falta definir las variables, una de ellas es type, esta es opcional, es interesante aqui esta variable se alimentara de las variables principales encontradas en assets > scss > variables, de modo que asegurate que tengas dadas de alta las variables $primar, $success, $danger, $warning y $dark, y la variable text, es simplemente el titulo que se mostrara.

En esta ocasión utilizaremos la directiva @Input, una para obtener el texto que se mostrara como titulo y la otra el color que tendrá el titulo, este componente es muy sencillo pero podrás ver como desde un elemento padre puedes pasar propiedades a un componente hijo, en este caso las propiedades con las que cuenta este componente es text y type, ahora vamos a modificar un componente que ya tenemos creado desde el post pasado «Primer modulo en angular«, modificaremos el componente user list, ahí agregaremos el titulo de la siguiente forma:

En este caso estamos definiendo un text =  LISTA DE USUARIOS, y no estamos pasando la propiedad type, pero por defecto es primary, así que no hay inconveniente si no se envía. Como es nuestra costumbre te dejamos el video donde explicamos a fondo como crear el primer componente en angular, recuerda que si tienes alguna duda, la puedes dejar en los comentarios de este post o en youtube.