{"id":3548,"date":"2017-11-25T15:15:28","date_gmt":"2017-11-25T15:15:28","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2017\/11\/25\/como-implementar-angular-material-design-en-5-minutos\/"},"modified":"2024-04-06T01:46:32","modified_gmt":"2024-04-06T07:46:32","slug":"como-implementar-angular-material-design-en-5-minutos","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-implementar-angular-material-design-en-5-minutos\/","title":{"rendered":"\u00bfC\u00f3mo implementar angular material design en 5 minutos?"},"content":{"rendered":"<p>En este post explicar\u00e9 como crear la estructura b\u00e1sica del dise\u00f1o de una aplicaci\u00f3n con Angular y Angular material design. Angular material design es una colecci\u00f3n de componentes visuales optimizados para una mejor experiencia de usuario y creaci\u00f3n de interfaces gr\u00e1ficas.<\/p>\n\n\n\n<p>Utilizarlo nos ahorra mucho tiempo creando y dise\u00f1ando nuestros propios componentes, por lo que es una buena opci\u00f3n para acelerar las creaci\u00f3n de aplicaciones web.<\/p>\n\n\n\n<p>Primero vamos a crear una nueva aplicaci\u00f3n con **angular-cli:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$ ng new basic-angular-material\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">$ ng <\/span><span style=\"color: #89DDFF\">new<\/span><span style=\"color: #BABED8\"> basic<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">angular<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">material<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Luego ejecutamos nuestra aplicaci\u00f3n con ng serve:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"cd basic-angular-material &amp;&amp; ng serve\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">cd basic<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">angular<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">material <\/span><span style=\"color: #89DDFF\">&amp;&amp;<\/span><span style=\"color: #BABED8\"> ng serve<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.pensemosweb.com.mx\/wp-content\/uploads\/2017\/11\/inicio.png\" alt=\"\" class=\"wp-image-358\"\/><\/figure>\n\n\n\n<p>Nuestra aplicaci\u00f3n se deber\u00eda de ver as\u00ed:<br><\/p>\n\n\n\n<p>Ahora instalamos el paquete de Angular material:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install --save @angular\/material @angular\/cdk\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">npm install <\/span><span style=\"color: #89DDFF\">--<\/span><span style=\"color: #BABED8\">save <\/span><span style=\"color: #89DDFF\">@<\/span><span style=\"color: #BABED8\">angular<\/span><span style=\"color: #89DDFF\">\/<\/span><span style=\"color: #BABED8\">material <\/span><span style=\"color: #89DDFF\">@<\/span><span style=\"color: #BABED8\">angular<\/span><span style=\"color: #89DDFF\">\/<\/span><span style=\"color: #BABED8\">cdk<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Si te das cuenta, ademas de instalar el paquete de <code>@angular\/material<\/code>, tambi\u00e9n instalamos el paquete <code>@angular\/cdk<\/code>, este ultimo en versiones anteriores formaba parte del paquete de <code>@angular\/material<\/code>, pero es tan \u00fatil en la creaci\u00f3n de componentes que ahora es independiente y al serlo permite que otros desarrolladores se beneficien para crear sus propios componentes al mero estilo de angular material.<\/p>\n\n\n\n<p>Como muchos componentes de angular material realizan animaciones para una mejor experiencia de usuario, si queremos que nuestros componentes tengan animaciones debemos instalar el paquete <code>@angular\/animations<\/code>e importar el modulo <code>BrowserAnimationModule<\/code>en nuestra aplicaci\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install --save @angular\/animations\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">npm install <\/span><span style=\"color: #89DDFF\">--<\/span><span style=\"color: #BABED8\">save <\/span><span style=\"color: #89DDFF\">@<\/span><span style=\"color: #BABED8\">angular<\/span><span style=\"color: #89DDFF\">\/<\/span><span style=\"color: #BABED8\">animations<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En el archivo <code>src\/app\/app.module.ts<\/code>importa el modulo de animaciones, lineas 7 y 16, en el c\u00f3digo de ejemplo:<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/jaimeCervantes\/8640f03cf65263708b1fdb586b99ab97.js\"><\/script><\/p>\n\n\n\n<p>Ahora debemos incluir un tema para nuestra app, es requerido para la correcta visualizaci\u00f3n de la mayor\u00eda de los componentes. Debemos incluir la siguiente linea de c\u00f3digo en el archivo <code>\/src\/styles.css<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@import \u201c~@angular\/material\/prebuilt-themes\/indigo-pink.css\u201d;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">@<\/span><span style=\"color: #BABED8\">import \u201c<\/span><span style=\"color: #89DDFF\">~@<\/span><span style=\"color: #BABED8\">angular<\/span><span style=\"color: #89DDFF\">\/<\/span><span style=\"color: #BABED8\">material<\/span><span style=\"color: #89DDFF\">\/<\/span><span style=\"color: #BABED8\">prebuilt<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">themes<\/span><span style=\"color: #89DDFF\">\/<\/span><span style=\"color: #BABED8\">indigo<\/span><span style=\"color: #89DDFF\">-<\/span><span style=\"color: #BABED8\">pink<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">css\u201d;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Para que los componentes reaccionen bien a eventos de touch en pantallas, necesitamos de la librer\u00eda <strong>HammerJS<\/strong>, varios componentes utilizan HammerJS as\u00ed que lo podemos instalar con el siguiente comando:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install --save hammerjs\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">npm install <\/span><span style=\"color: #89DDFF\">--<\/span><span style=\"color: #BABED8\">save hammerjs<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En el archivo <code>\/src\/main.ts<\/code>importamos la librer\u00eda en la linea 8.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/jaimeCervantes\/a7a183eaf3e60a99b63c045e294acb24.js\"><\/script><\/p>\n\n\n\n<p>Importamos los m\u00f3dulos de Angular Material que vayamos a utilizar. Vamos a modificar el archivo <code>src\/app\/app.module.ts<\/code>para que quede como el c\u00f3digo de abajo. Otra opci\u00f3n es crear un modulo nuevo donde importemos los componentes de angular material que vayamos a utilizar. En este ejemplo importamos los componentes en la linea 9.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/jaimeCervantes\/e93abf11fdee6bdc31b62ae3abdd4596.js\"><\/script><\/p>\n\n\n\n<p>Con todo lo anterior listo, podemos empezar a utilizar los componentes, vamos a modificar el contenido por defecto del template del componente principal que nos genera la herramienta de linea de comandos de angular-cli.<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/jaimeCervantes\/f46e6f909257b2d311ac311fe232c9f0.js\"><\/script><\/p>\n\n\n\n<p>Versi\u00f3n final:<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/jaimeCervantes\/0d9c9f9de31ef34466525aea8ef084ac.js\"><\/script><\/p>\n\n\n\n<p>Nuestra app debe verse as\u00ed:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.pensemosweb.com.mx\/wp-content\/uploads\/2017\/11\/final-app-center.png\" alt=\"\" class=\"wp-image-360\"\/><\/figure>\n\n\n\n<p>Y cuando damos click(o touch) en el men\u00fa:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/11\/final-app-menu.png\" alt=\"\" class=\"wp-image-361\"\/><\/figure>\n\n\n\n<p>Para que tu app se vea de esta manera, sin espacios en blanco a los lados y la barra lateral a toda la altura del navegador web, tu archivo <code>src\/styles.css<\/code>debe ser as\u00ed:<\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/jaimeCervantes\/4edb42086e2607f1ee76e961ce6e9fc9.js\"><\/script><\/p>\n\n\n\n<p>Demo de interfaz gr\u00e1fica para creaci\u00f3n de encuestas. Angular 5 y Angular material design 5:<\/p>\n\n\n\n<p><iframe src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/encuesta?embed=1&amp;file=src\/app\/app.component.ts#full\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>        Angular material design es una colecci\u00f3n de componentes visuales optimizados para una mejor experiencia de usuario y creaci\u00f3n de interfaces gr\u00e1ficas.<\/p>","protected":false},"author":2,"featured_media":3760,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[23],"tags":[40,54,68],"class_list":["post-3548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-javascript","tag-intermedio"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3548"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3548\/revisions"}],"predecessor-version":[{"id":3845,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3548\/revisions\/3845"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3760"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}