{"id":80876,"date":"2024-11-12T09:02:04","date_gmt":"2024-11-12T02:02:04","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=80876"},"modified":"2024-11-12T09:02:04","modified_gmt":"2024-11-12T02:02:04","slug":"angular-material-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/","title":{"rendered":"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#Angular_Material_la_gi\" >Angular Material l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#Thao_tac_co_ban_voi_Angular_Material\" >Thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#Tao_du_an_Angular_App_don_gian_voi_Angular_Material\" >T\u1ea1o d\u1ef1 \u00e1n Angular App \u0111\u01a1n gi\u1ea3n v\u1edbi Angular Material<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#Cau_hoi_thuong_gap_ve_Angular_Material\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Angular Material<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#Tong_ket_ve_Angular_Material\" >T\u1ed5ng k\u1ebft v\u1ec1 Angular Material<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Angular l\u00e0 m\u1ed9t framework front-end ph\u1ed5 bi\u1ebfn trong l\u0129nh v\u1ef1c l\u1eadp tr\u00ecnh v\u00e0 ph\u00e1t tri\u1ec3n website, trong \u0111\u00f3 c\u00f3 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u00edch h\u1ee3p v\u1edbi Angular ch\u00ednh l\u00e0 Angular Material. Angular Material \u0111\u01b0\u1ee3c xem l\u00e0 th\u01b0 vi\u1ec7n Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) d\u00e0nh cho c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean Angular.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u00e2y \u0111\u1ec3 \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft h\u01a1n v\u1ec1:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ecbnh ngh\u0129a v\u1ec1 Angular Material, c\u00e1c t\u00ednh n\u0103ng n\u1ed5i b\u1eadt v\u00e0 l\u1ee3i \u00edch m\u00e0 th\u01b0 vi\u1ec7n n\u00e0y mang l\u1ea1i<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn c\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 t\u1ea1o d\u1ef1 \u00e1n Angular \u0111\u01a1n gi\u1ea3n v\u1edbi Angular Material<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Angular_Material_la_gi\"><\/span><b>Angular Material l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Angular Material l\u00e0 th\u01b0 vi\u1ec7n component giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) d\u00e0nh cho c\u00e1c l\u1eadp tr\u00ecnh web Angular. Th\u01b0 vi\u1ec7n n\u00e0y \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng \u0111\u1ec3 t\u00edch h\u1ee3p li\u1ec1n m\u1ea1ch v\u1edbi Angular.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular Material tri\u1ec3n khai c\u00e1c th\u00f4ng s\u1ed1 k\u1ef9 thu\u1eadt thi\u1ebft k\u1ebf v\u1eadt li\u1ec7u c\u1ee7a Google, cung c\u1ea5p h\u01a1n 30 components UI gi\u00fap b\u1ea1n l\u1eadp tr\u00ecnh c\u00e1c trang web v\u1edbi nhi\u1ec1u ch\u1ee9c n\u0103ng h\u1ea5p d\u1eabn trong khi v\u1eabn tu\u00e2n th\u1ee7 \u0111\u00fang c\u00e1c nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf web hi\u1ec7n \u0111\u1ea1i.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 \u0111i\u1ec3m n\u1ed5i b\u1eadt c\u1ee7a th\u01b0 vi\u1ec7n Angular Material c\u00f3 th\u1ec3 k\u1ec3 \u0111\u1ebfn nh\u01b0:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ch\u1ee7 \u0111\u1ec1 s\u1eb5n (Pre-built theme): <\/b><span style=\"font-weight: 400;\">Cung c\u1ea5p c\u00e1c ch\u1ee7 \u0111\u1ec1 c\u00f3 s\u1eb5n theo c\u00e1c nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf, gi\u00fap c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean ti\u1ebft ki\u1ec7m th\u1eddi gian t\u1eadp trung v\u00e0o c\u00e1c ch\u1ee9c n\u0103ng c\u1ee7a web thay v\u00ec y\u1ebfu t\u1ed1 thi\u1ebft k\u1ebf.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u01b0 vi\u1ec7n UI components: <\/b><span style=\"font-weight: 400;\">Cung c\u1ea5p m\u1ed9t b\u1ed9 c\u00e1c th\u00e0nh ph\u1ea7n UI c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng, \u0111\u01b0\u1ee3c ki\u1ec3m tra k\u1ef9 l\u01b0\u1ee1ng c\u0169ng nh\u01b0 c\u00f3 th\u1ec3 truy c\u1eadp d\u1ef1a tr\u00ean Material Design.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch:<\/b><span style=\"font-weight: 400;\"> Angular Material ho\u1ea1t \u0111\u1ed9ng tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t ch\u00ednh nh\u01b0 Chrome, Mozilla Firefox, Microsoft Edge ho\u1eb7c Safari.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Truy c\u1eadp:<\/b><span style=\"font-weight: 400;\"> \u0110em l\u1ea1i n\u1ed9i dung web nh\u1ea5t qu\u00e1n v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng h\u01a1n. C\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a Angular Material \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf c\u00f3 kh\u1ea3 n\u0103ng truy c\u1eadp, h\u1ed7 tr\u1ee3 thu\u1ed9c t\u00ednh ARIA v\u00e0 c\u00e1c t\u00ednh n\u0103ng li\u00ean quan \u0111\u1ea3m b\u1ea3o trang web c\u00f3 th\u1ec3 truy c\u1eadp \u0111\u01b0\u1ee3c nhi\u1ec1u \u0111\u1ed1i t\u01b0\u1ee3ng nh\u1ea5t c\u00f3 th\u1ec3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh to\u00e0n c\u1ea7u h\u00f3a: <\/b><span style=\"font-weight: 400;\">\u1ee8ng d\u1ee5ng \u0111\u01b0\u1ee3c tr\u00ean nhi\u1ec1u qu\u1ed1c gia v\u1edbi nhi\u1ec1u ng\u00f4n ng\u1eef t\u01b0\u01a1ng th\u00edch.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u1ed1c \u0111\u1ed9 ph\u1ea3n h\u1ed3i:<\/b><span style=\"font-weight: 400;\"> Angular Material s\u1eed d\u1ee5ng b\u1ed1 c\u1ee5c d\u1ea1ng l\u01b0\u1edbi linh ho\u1ea1t, th\u00edch \u1ee9ng v\u1edbi nhi\u1ec1u k\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0n h\u00ecnh kh\u00e1c nhau. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng xem \u0111\u01b0\u1ee3c tr\u00ecnh duy\u1ec7t tr\u00ean \u0111i\u1ec7n tho\u1ea1i, m\u00e1y t\u00ednh b\u1ea3ng ho\u1eb7c laptop \u0111\u1ec1u th\u00edch h\u1ee3p.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hi\u1ec7u su\u1ea5t:<\/b><span style=\"font-weight: 400;\"> C\u00e1c th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a \u0111\u1ec3 t\u0103ng hi\u1ec7u su\u1ea5t, gi\u1ea3m thi\u1ec3u th\u1eddi gian t\u1ea3i \u1ee9ng d\u1ee5ng. \u0110i\u1ec1u n\u00e0y gi\u00fap c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng hi\u1ec7u qu\u1ea3 h\u01a1n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00edch h\u1ee3p v\u1edbi Angular:<\/b><span style=\"font-weight: 400;\"> Angular Material \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p li\u1ec1n m\u1ea1ch v\u1edbi Angular, t\u1eadn d\u1ee5ng h\u1ec7 sinh th\u00e1i bao g\u1ed3m Angular CLI, RxJS Observables,&#8230; gi\u00fap t\u0103ng kh\u1ea3 n\u0103ng hi\u1ec7u su\u1ea5t v\u00e0 kh\u1ea3 n\u0103ng truy c\u1eadp.\u00a0<\/span><\/li>\n<\/ul>\n<blockquote><p><i><span style=\"font-weight: 400;\">Xem th\u00eam: <\/span><\/i><strong><a href=\"https:\/\/itviec.com\/blog\/angular-la-gi\/\" target=\"_blank\" rel=\"noopener\"><i>Angular l\u00e0 g\u00ec? C\u00f3 ph\u1ea3i l\u00e0 v\u0169 kh\u00ed h\u1ea1ng n\u1eb7ng c\u1ee7a Front End Developer?<\/i><\/a><\/strong><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Thao_tac_co_ban_voi_Angular_Material\"><\/span><b>Thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Thi\u1ebft l\u1eadp Environment cho Angular<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 l\u00e0m vi\u1ec7c v\u1edbi Angular, b\u1ea1n s\u1ebd c\u1ea7n Node.js v\u00e0 Angular CLI (giao di\u1ec7n d\u00f2ng l\u1ec7nh) \u0111\u01b0\u1ee3c c\u00e0i \u0111\u1eb7t trong m\u00f4i tr\u01b0\u1eddng ph\u00e1t tri\u1ec3n c\u1ee7a m\u00ecnh. Node.js s\u1ebd cung c\u1ea5p c\u00e1c g\u00f3i m\u00e0 CLI c\u1ea7n \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng v\u00e0 m\u00e1y ch\u1ee7 ph\u00e1t tri\u1ec3n \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m tra ti\u1ebfn tr\u00ecnh c\u1ee7a m\u00ecnh theo th\u1eddi gian th\u1ef1c.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular CLI s\u1ebd l\u00e0 c\u00f4ng c\u1ee5 gi\u00fap b\u1ea1n t\u1ea1o d\u1ef1 \u00e1n Angular m\u1edbi v\u00e0 \u0111\u1ecbnh h\u00ecnh c\u1ea5u h\u00ecnh c\u00e1c th\u00e0nh ph\u1ea7n ho\u1eb7c d\u1ecbch v\u1ee5 Angular. M\u1ed9t d\u1ef1 \u00e1n Angular s\u1eed d\u1ee5ng TypeScript n\u00ean c\u1ea7n \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch v\u00e0 t\u1ed1i \u01b0u h\u00f3a \u0111\u1ec3 ch\u1ea1y tr\u00ecnh duy\u1ec7t, n\u1ebfu kh\u00f4ng c\u00f3 Angular CLI b\u1ea1n s\u1ebd c\u1ea7n thi\u1ebft l\u1eadp v\u00e0 k\u1ebft n\u1ed1i nhi\u1ec1u c\u00f4ng c\u1ee5 \u0111\u1ec3 l\u00e0m vi\u1ec7c c\u00f9ng nhau. \u0110i\u1ec1u n\u00e0y s\u1ebd d\u1eabn \u0111\u1ebfn t\u1ed1n nhi\u1ec1u th\u1eddi gian.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ch\u01b0a c\u00e0i \u0111\u1eb7t Node.js tr\u00ean m\u00e1y t\u00ednh, c\u00f3 th\u1ec3 truy c\u1eadp website v\u00e0 l\u00e0m theo h\u01b0\u1edbng d\u1eabn t\u1ea3i xu\u1ed1ng. Sau khi c\u00e0i \u0111\u1eb7t Node.js, h\u00e3y s\u1eed d\u1ee5ng NPM (\u0111i k\u00e8m v\u1edbi Node.js) \u0111\u1ec3 c\u00e0i \u0111\u1eb7t Angular CLI:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install -g @angular\/cli<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, t\u00f9y thu\u1ed9c v\u00e0o c\u00e1ch thi\u1ebft l\u1eadp m\u00e1y t\u00ednh m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n s\u1eed d\u1ee5ng sudo \u0111\u1ec3 d\u00f9ng c\u1edd -g (global)<\/span><\/p>\n<h3><b>T\u1ea1o Angular Project<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sau khi c\u00e0i \u0111\u1eb7t \u0111\u00fang Node.js v\u00e0 Angular CLI tr\u00ean m\u00e1y t\u00ednh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1ec7nh sau \u0111\u1ec3 thi\u1ebft l\u1eadp m\u1ed9t d\u1ef1 \u00e1n Angular m\u1edbi:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\"># t\u1ea1o m\u1ed9t d\u1ef1 \u00e1n Angular m\u1edbi thu\u1ed9c angular-material-tutorial<\/span>\r\n<span style=\"font-weight: 400;\">ng new angular-material-tutorial<\/span>\r\n\r\n<span style=\"font-weight: 400;\"># d\u1eddi v\u00e0o d\u1ef1 \u00e1n m\u1edbi<\/span>\r\n<span style=\"font-weight: 400;\">cd angular-material-tutorial<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">L\u1ec7nh \u0111\u1ea7u ti\u00ean s\u1ebd t\u1ea1o ra m\u1ed9t c\u1ea5u tr\u00fac th\u01b0 m\u1ee5c (trong m\u1ed9t th\u01b0 m\u1ee5c m\u1edbi c\u00f3 t\u00ean l\u00e0 angular-material-tutorial) v\u1edbi nhi\u1ec1u t\u1ec7p c\u1ea7n thi\u1ebft \u0111\u1ec3 b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o \u1ee9ng d\u1ee5ng Angular cho m\u00ecnh.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Trong qu\u00e1 tr\u00ecnh t\u1ea1o project, CLI s\u1ebd h\u1ecfi m\u1ed9t s\u1ed1 c\u00e2u h\u1ecfi v\u1ec1 c\u1ea5u h\u00ecnh project (nh\u01b0 s\u1eed d\u1ee5ng routing hay kh\u00f4ng, s\u1eed d\u1ee5ng CSS hay SCSS, etc.). L\u1ec7nh th\u1ee9 hai s\u1ebd di chuy\u1ec3n terminal c\u1ee7a b\u1ea1n v\u00e0o th\u01b0 m\u1ee5c g\u1ed1c c\u1ee7a d\u1ef1 \u00e1n.<\/span><\/p>\n<h3><b>C\u00e0i \u0111\u1eb7t Angular Material<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u00e0i \u0111\u1eb7t Angular Material l\u00e0m ph\u1ea7n ph\u1ee5 thu\u1ed9c c\u1ee7a d\u1ef1 \u00e1n, b\u1ea1n h\u00e3y ch\u1ea1y l\u1ec7nh sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install @angular\/material @angular\/cdk<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Hi\u1ec7n t\u1ea1i, b\u1ea1n s\u1ebd kh\u00f4ng th\u1ef1c hi\u1ec7n b\u1ea5t k\u1ef3 thay \u0111\u1ed5i n\u00e0o \u0111\u1ed1i v\u1edbi m\u00e3 ngu\u1ed3n c\u1ee7a d\u1ef1 \u00e1n. Tr\u01b0\u1edbc ti\u00ean, b\u1ea1n s\u1ebd c\u00e0i \u0111\u1eb7t th\u00eam m\u1ed9t s\u1ed1 dependency th\u00fa v\u1ecb cho d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Angular CLI \u0111\u1ec3 th\u00eam Angular Material v\u00e0o project. L\u1ec7nh n\u00e0y kh\u00f4ng ch\u1ec9 c\u00e0i \u0111\u1eb7t c\u00e1c package c\u1ea7n thi\u1ebft m\u00e0 c\u00f2n t\u1ef1 \u0111\u1ed9ng c\u1ea5u h\u00ecnh m\u1ed9t s\u1ed1 t\u00ednh n\u0103ng c\u01a1 b\u1ea3n.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">ng add @angular\/material<\/span><\/pre>\n<h3><b>Angular Material Theme<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sau khi c\u00e0i \u0111\u1eb7t Angular Material, b\u1ea1n s\u1ebd \u0111\u1ecbnh h\u00ecnh m\u1ed9t ch\u1ee7 \u0111\u1ec1 x\u00e1c \u0111\u1ecbnh m\u00e0u s\u1eafc n\u00e0o s\u1ebd \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c th\u00e0nh ph\u1ea7n Angular Material c\u1ee7a m\u00ecnh. \u0110\u1ec3 \u0111\u1ecbnh h\u00ecnh ch\u1ee7 \u0111\u1ec1 c\u01a1 b\u1ea3n, b\u1ea1n h\u00e3y m\u1edf t\u1ec7p src\/style.css v\u00e0 d\u00e1n m\u00e3 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">@import \"~@angular\/material\/prebuilt-themes\/indigo-pink.css\";<\/span><\/pre>\n<h3><b>Angular Material Gesture<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 components nh\u01b0 Slide Toggle, Slider ho\u1eb7c Tooltip \u0111\u1ec1u d\u1ef1a v\u00e0o th\u01b0 vi\u1ec7n HammerJS \u0111\u1ec3 ghi l\u1ea1i c\u00e1c c\u1eed ch\u1ec9 ch\u1ea1m (touch gestures). V\u00ec v\u1eady, b\u1ea1n s\u1ebd c\u1ea7n c\u00e0i \u0111\u1eb7t HammerJS v\u00e0 t\u1ea3i n\u00f3 v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. \u0110\u1ec3 th\u1ef1c hi\u1ec7n, t\u1eeb th\u01b0 m\u1ee5c g\u1ed1c c\u1ee7a d\u1ef1 \u00e1n, h\u00e3y ch\u1ea1y:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\"># from angular-material-tutorial<\/span>\r\n\r\n<span style=\"font-weight: 400;\">npm install hammerjs<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Sau khi c\u00e0i \u0111\u1eb7t, h\u00e3y th\u00eam d\u00f2ng sau v\u00e0o \u0111\u1ea7u t\u1ec7p src\/main.ts:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import 'hammerjs';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Tuy nhi\u00ean, t\u1eeb Angular 9 tr\u1edf l\u00ean, HammerJS kh\u00f4ng c\u00f2n l\u00e0 dependency b\u1eaft bu\u1ed9c cho h\u1ea7u h\u1ebft c\u00e1c components.<\/span><\/p>\n<h3><b>Material Icons<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t y\u1ebfu t\u1ed1 b\u1ea1n c\u00f3 th\u1ec3 c\u00e2n nh\u1eafc \u0111\u1ec3 th\u00eam v\u00e0o d\u1ef1 \u00e1n Angular c\u1ee7a m\u00ecnh l\u00e0 th\u01b0 vi\u1ec7n Material Icon. \u0110\u1ec3 c\u00f3 quy\u1ec1n truy c\u1eadp v\u00e0o th\u01b0 vi\u1ec7n kh\u1ed5ng l\u1ed3 n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 c\u1eadp nh\u1eadt t\u1ec7p src\/index.html nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!doctype html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html lang=\"en\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Tao_du_an_Angular_App_don_gian_voi_Angular_Material\"><\/span><b>T\u1ea1o d\u1ef1 \u00e1n Angular App \u0111\u01a1n gi\u1ea3n v\u1edbi Angular Material<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Sau khi \u0111\u00e3 thi\u1ebft l\u1eadp c\u1ea5u tr\u00fac d\u1ef1 \u00e1n Angular v\u00e0 m\u1ed9t s\u1ed1 ph\u1ee5 thu\u1ed9c, b\u1ea1n s\u1ebd b\u1eaft \u0111\u1ea7u ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng nh\u01b0 sau:\u00a0<\/span><\/p>\n<h3><b>Nh\u1eadp Material Components<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u \u0111\u1ea7u ti\u00ean b\u1ea1n c\u1ea7n l\u00e0m l\u00e0 t\u1ea1o m\u1ed9t t\u1ec7p m\u1edbi c\u00f3 t\u00ean l\u00e0 material.modules.ts trong th\u01b0 m\u1ee5c .\/src\/app. B\u00ean trong t\u1ec7p n\u00e0y, b\u1ea1n c\u1ea7n th\u00eam m\u00e3 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import {NgModule} from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@NgModule({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0imports: [],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0exports: []<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class MaterialModule {}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u00dd t\u01b0\u1edfng t\u1ea1o m\u1ed9t module Angular m\u1edbi l\u00e0 t\u1eadp trung nh\u1eefng g\u00ec b\u1ea1n s\u1ebd nh\u1eadp t\u1eeb Angular Material v\u00e0o m\u1ed9t file duy nh\u1ea5t. Tr\u01b0\u1edbc khi th\u00eam c\u00e1c th\u00e0nh ph\u1ea7n Angular Material v\u00e0o file, b\u1ea1n s\u1ebd c\u1ea7n nh\u1eadp c\u1ea5u h\u00ecnh n\u00f3 trong module ch\u00ednh c\u1ee7a m\u00ecnh (t\u1ee9c l\u00e0 file .\/src\/app\/app.module.ts) nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/\/ ... other import statements ...<\/span>\r\n<span style=\"font-weight: 400;\">import {BrowserAnimationsModule} from '@angular\/platform-browser\/animations';<\/span>\r\n<span style=\"font-weight: 400;\">import {MaterialModule} from '.\/material.module';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@NgModule({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/\/ ... declarations property ...<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0imports: [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0BrowserModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0BrowserAnimationsModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MaterialModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/\/ ... providers and bootstrap properties ...<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AppModule {}<\/span><\/pre>\n<h3><b>Angular Material Sidenav<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sau khi x\u00e1c \u0111\u1ecbnh m\u1ed9t n\u01a1i t\u1eadp trung \u0111\u1ec3 nh\u1eadp c\u00e1c th\u00e0nh ph\u1ea7n Angular Material, b\u1ea1n c\u00f3 th\u1ec3 t\u1eadp trung v\u00e0o vi\u1ec7c th\u00eam thanh \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. V\u1edbi \u0111i\u1ec1u n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 c\u1eadp nh\u1eadt file \u0111\u1ec3 tr\u00f4ng nh\u01b0 th\u1ebf n\u00e0y:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import {NgModule} from '@angular\/core';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">import { MatSidenavModule } from '@angular\/material\/sidenav';<\/span>\r\n<span style=\"font-weight: 400;\">import { MatToolbarModule } from '@angular\/material\/toolbar';<\/span>\r\n<span style=\"font-weight: 400;\">import { MatIconModule } from '@angular\/material\/icon';<\/span>\r\n<span style=\"font-weight: 400;\">import { MatListModule } from '@angular\/material\/list';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@NgModule({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0imports: [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatSidenavModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatToolbarModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatIconModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatListModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0exports: [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatSidenavModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatToolbarModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatIconModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MatListModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0]<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class MaterialModule {}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i n\u00e0y s\u1ebd l\u00e0m cho MatSidenavModule kh\u1ea3 d\u1ee5ng trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. Sau \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 c\u1eadp nh\u1eadt file \u0111\u1ec3 s\u1eed d\u1ee5ng th\u00e0nh ph\u1ea7n n\u00e0y:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;mat-sidenav-container&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;mat-sidenav\u00a0 #sidenav role=\"navigation\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;mat-nav-list&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a mat-list-item&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Login&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a mat-list-item&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;home&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Home&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a mat-list-item&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;dashboard&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Dashboard&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a\u00a0 mat-list-item type=\"button\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;LogOut&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/mat-nav-list&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/mat-sidenav&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;mat-sidenav-content&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;mat-toolbar color=\"primary\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div fxHide.gt-xs&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button mat-icon-button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon&gt;menu&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Material Blog<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div fxFlex fxLayout fxLayoutAlign=\"flex-end\"\u00a0 fxHide.xs&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ul fxLayout fxLayoutGap=\"20px\" class=\"navigation-items\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span\u00a0 class=\"label\"&gt;Login&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a &gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;home&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Home&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;dashboard&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Dashboard&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;LogOut&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/ul&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/mat-toolbar&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;main&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/main&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/mat-sidenav-content&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/mat-sidenav-container&gt;<\/span><\/pre>\n<h3><b>Angular Material v\u00e0 Flexbox<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng h\u01a1n khi x\u00e1c \u0111\u1ecbnh b\u1ed1 c\u1ee5c \u1ee9ng d\u1ee5ng Angular, b\u1ea1n s\u1ebd t\u1eadn d\u1ee5ng l\u01b0\u1ee3c \u0111\u1ed3 b\u1ed1 c\u1ee5c Flex \u0111\u01b0\u1ee3c gi\u1edbi thi\u1ec7u g\u1ea7n \u0111\u00e2y tr\u00ean <\/span><a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\"><span style=\"font-weight: 400;\">CSS<\/span><\/a><span style=\"font-weight: 400;\">. C\u1ee5 th\u1ec3 h\u01a1n, b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng ch\u1ec9 th\u1ecb Angular c\u00f3 t\u00ean l\u00e0 fxFlex \u0111\u1ec3 x\u1eed l\u00fd b\u1ed1 c\u1ee5c Flex. B\u1ea1n c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t Flex theo l\u1ec7nh sau:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install @angular\/flex-layout<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Sau \u0111\u00f3, b\u1ea1n nh\u1eadp c\u1ea5u h\u00ecnh c\u1ee7a n\u00f3 v\u00e0o file src\/app.modules.ts nh\u01b0 hi\u1ec3n th\u1ecb sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/\/ ... other import statements ...<\/span>\r\n<span style=\"font-weight: 400;\">import {FlexLayoutModule} from '@angular\/flex-layout';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@NgModule({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/\/ ... declarations property ...<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0imports: [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/\/ ... other modules ...<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0FlexLayoutModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\/\/ ... providers and bootstrap properties ...<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AppModule {}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc khi ch\u1ea1y \u1ee9ng d\u1ee5ng l\u1ea7n \u0111\u1ea7u ti\u00ean, b\u1ea1n h\u00e3y th\u00eam c\u00e1c quy t\u1eafc CSS sau v\u00e0o app.components.css \u0111\u1ec3 \u0111i\u1ec1u h\u01b0\u1edbng c\u1ee7a b\u1ea1n tr\u00f4ng \u1ed5n h\u01a1n:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">mat-sidenav-container, mat-sidenav-content, mat-sidenav {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 100%;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">mat-sidenav {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 250px;<\/span>\r\n<span style=\"font-weight: 400;\">}\r\n<\/span>\r\n<span style=\"font-weight: 400;\">a {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0text-decoration: none;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: white;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">a:hover,<\/span>\r\n<span style=\"font-weight: 400;\">a:active {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0color: lightgray;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.navigation-items {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0list-style: none;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0cursor: pointer;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.icon {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: inline-block;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 30px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 0 auto;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding-right: 5px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0text-align: center;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0vertical-align: middle;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 15%;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.label {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: inline-block;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0line-height: 30px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 0;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 85%;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">B\u00ean c\u1ea1nh \u0111\u00f3, b\u1ea1n c\u0169ng th\u00eam quy t\u1eafc sau v\u00e0o .\/src\/style.css \u0111\u1ec3 \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n kh\u00f4ng c\u00f3 b\u1ea5t k\u1ef3 l\u1ec1 tr\u1eafng n\u00e0o:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">@import \"~@angular\/material\/prebuilt-themes\/indigo-pink.css\";<\/span>\r\n\r\n<span style=\"font-weight: 400;\">body {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 0;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u1edbi c\u00e1c quy t\u1eafc n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3i quy\u1ebft ng serve t\u1eeb root d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh \u0111\u1ec3 ki\u1ec3m tra \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n trong l\u1ea7n \u0111\u1ea7u ti\u00ean ch\u1ea1y th\u1eed.\u00a0<\/span><\/p>\n<h3><b>Th\u00eam Angular Material Components<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u00e2y gi\u1edd b\u1ea1n \u0111\u00e3 c\u00f3 \u1ee9ng d\u1ee5ng v\u00e0 ch\u1ea1y v\u1edbi th\u00e0nh ph\u1ea7n Angular Material \u0111\u1ea7u ti\u00ean, b\u1ea1n c\u00f3 th\u1ec3 th\u00eam nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n cho d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh. \u0110\u1ea7u ti\u00ean, b\u1ea1n s\u1ebd \u0111\u1ecbnh ngh\u0129a hai th\u00e0nh ph\u1ea7n m\u1edbi cho \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh l\u00e0 WelcomeComponent v\u00e0 DashboardComponent. \u0110\u1ec3 t\u1ea1o hai th\u00e0nh ph\u1ea7n m\u1edbi, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Angular CLI nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">ng g c welcome<\/span>\r\n\r\n<span style=\"font-weight: 400;\">ng g c dashboard<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u quan tr\u1ecdng l\u00e0 ph\u1ea3i x\u00e1c \u0111\u1ecbnh module.app.module v\u00ec b\u1ea1n c\u00f3 m\u1ed9t module kh\u00e1c l\u00e0 material.module khi\u1ebfn Angular CLI kh\u00f4ng th\u1ec3 t\u1ef1 \u0111\u1ed9ng x\u00e1c \u0111\u1ecbnh module m\u1ee5c ti\u00eau. Sau khi ch\u1ea1y hai l\u1ec7nh n\u00e0y, h\u00e3y m\u1edf welcome.component.html v\u00e0 thay th\u1ebf m\u00e3 b\u1eb1ng hai m\u00e3 n\u00e0y:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;div style=\"text-align:center\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;h1&gt;Angular Content Management System&lt;\/h1&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0This is a platform for technical writers to manage their blog post contents related to angular.<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;br&gt; Click on Login to get Started!!!<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<h3><b>T\u1ea1o Routes<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Khi \u0111\u00e3 c\u00f3 c\u00e1c th\u00e0nh ph\u1ea7n, b\u1ea1n s\u1ebd c\u1ea7n \u0111\u1ecbnh ngh\u0129a m\u1ed9t s\u1ed1 \u0111i\u1ec1u h\u01b0\u1edbng (route) \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 truy c\u1eadp ch\u00fang. \u0110\u1ec3 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t t\u1ec7p c\u00f3 t\u00ean l\u00e0 app-routing.module.ts trong th\u01b0 m\u1ee5c .\/src\/app v\u00e0 th\u00eam m\u00e3 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import {NgModule} from '@angular\/core';<\/span>\r\n<span style=\"font-weight: 400;\">import {RouterModule, Routes} from '@angular\/router';<\/span>\r\n<span style=\"font-weight: 400;\">import {WelcomeComponent} from '.\/welcome\/welcome.component';<\/span>\r\n<span style=\"font-weight: 400;\">import {DashboardComponent} from '.\/dashboard\/dashboard.component';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const routes: Routes = [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0{path: '', component: WelcomeComponent},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0{path: 'dashboard', component: DashboardComponent}<\/span>\r\n<span style=\"font-weight: 400;\">];<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@NgModule({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0imports: [RouterModule.forRoot(routes)],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0exports: [RouterModule]<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AppRoutingModule {}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong file n\u00e0y, b\u1ea1n \u0111\u1ecbnh ngh\u0129a hai routes l\u00e0 m\u1ed9t cho WelcomeComponent v\u00e0 m\u1ed9t cho DashboardComponent. B\u00ean c\u1ea1nh vi\u1ec7c \u0111\u1ecbnh ngh\u0129a module, b\u1ea1n c\u0169ng c\u1ea7n c\u1eadp nh\u1eadt t\u1ec7p app.component.html \u0111\u1ec3 th\u00eam li\u00ean k\u1ebft c\u00e1c tuy\u1ebfn \u0111\u01b0\u1eddng m\u1edbi n\u00e0y:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;mat-sidenav-container&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;mat-sidenav\u00a0 #sidenav role=\"navigation\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0&lt;mat-nav-list&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a mat-list-item&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Login&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a mat-list-item<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0routerLink=\"\/\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;home&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Home&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a mat-list-item<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0routerLink=\"\/dashboard\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;dashboard&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Dashboard&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;a\u00a0 mat-list-item<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"button\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;LogOut&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/mat-nav-list&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/mat-sidenav&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;mat-sidenav-content&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;mat-toolbar color=\"primary\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div fxHide.gt-xs&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button mat-icon-button (click)=\"sidenav.toggle()\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon&gt;menu&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a routerLink=\"\/\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Material Blog<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div fxFlex fxLayout fxLayoutAlign=\"flex-end\"\u00a0 fxHide.xs&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ul fxLayout fxLayoutGap=\"20px\" class=\"navigation-items\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span\u00a0 class=\"label\"&gt;Login&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0routerLink=\"\/\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;home&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Home&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0routerLink=\"\/dashboard\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;dashboard&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;Dashboard&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;mat-icon class=\"icon\"&gt;input&lt;\/mat-icon&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;span class=\"label\"&gt;LogOut&lt;\/span&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/a&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/ul&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/mat-toolbar&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;main&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0&lt;\/main&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;\/mat-sidenav-content&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/mat-sidenav-container&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Cu\u1ed1i c\u00f9ng, b\u1ea1n c\u1ea7n c\u1eadp nh\u1eadt th\u00eam t\u1ec7p app.module.ts \u0111\u1ec3 s\u1eed d\u1ee5ng module m\u1edbi:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { BrowserModule } from '@angular\/platform-browser';<\/span>\r\n<span style=\"font-weight: 400;\">import { AppRoutingModule } from '.\/app-routing.module';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">@NgModule({<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0imports: [<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0BrowserModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0BrowserAnimationsModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0MaterialModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0AppRoutingModule,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0],<\/span>\r\n<span style=\"font-weight: 400;\">})<\/span>\r\n<span style=\"font-weight: 400;\">export class AppModule {}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ti\u1ebfn h\u00e0nh ch\u1ea1y th\u1eed module c\u1ee7a m\u00ecnh, b\u1ea1n s\u1ebd th\u1ea5y n\u1ed9i dung \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong t\u1ec7p HTML c\u1ee7a WelcomeComponent. N\u1ebfu b\u1ea1n nh\u1ea5p v\u00e0o li\u00ean k\u1ebft Dashboard, b\u1ea1n s\u1ebd th\u1ea5y t\u1ea3i th\u00f4ng b\u00e1o \u201cdashboard works!\u201d<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_Angular_Material\"><\/span><b> C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Angular Material<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>Angular Material vs Bootstrap: \u0110\u00e2u l\u00e0 framework ph\u1ed5 bi\u1ebfn h\u01a1n?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bootstrap l\u00e0 m\u1ed9t <\/span><a href=\"https:\/\/itviec.com\/blog\/front-end-framework-library\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">framework<\/span><\/a><span style=\"font-weight: 400;\"> CSS m\u00e3 ngu\u1ed3n m\u1edf gi\u00fap x\u00e2y d\u1ef1ng web v\u00e0 c\u00e1c \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng. Bootstrap cung c\u1ea5p m\u1ed9t lo\u1ea1i c\u00e1c thi\u1ebft k\u1ebf <\/span><a href=\"https:\/\/itviec.com\/blog\/html-la-gi\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">HTML<\/span><\/a><span style=\"font-weight: 400;\"> v\u00e0 CSS c\u00f9ng c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c \u0111\u1ecbnh ki\u1ec3u tr\u01b0\u1edbc nh\u01b0 danh s\u00e1ch th\u1ea3 xu\u1ed1ng, thanh ti\u1ebfn tr\u00ecnh v\u00e0 m\u1eabu \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c ph\u1ea7n c\u1ee7a Angular Material v\u00e0 Bootstrap trong c\u00f9ng m\u1ed9t d\u1ef1 \u00e1n l\u1eadp tr\u00ecnh web ho\u1eb7c \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng. Tuy nhi\u00ean, c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean c\u1ea7n c\u1ea9n th\u1eadn kh\u00f4ng s\u1eed d\u1ee5ng c\u00f9ng m\u1ed9t th\u00e0nh ph\u1ea7n, b\u1edfi ch\u00fang c\u00f3 th\u1ec3 g\u00e2y xung \u0111\u1ed9t v\u1edbi nhau.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 \u0111i\u1ec3m kh\u00e1c nhau gi\u1eefa Angular Material v\u00e0 Bootstrap b\u1ea1n c\u1ea7n l\u01b0u \u00fd nh\u01b0:\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Ti\u00eau ch\u00ed<\/b><\/td>\n<td><b>Angular Material<\/b><\/td>\n<td><b>Bootstrap<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Components<\/span><\/td>\n<td><span style=\"font-weight: 400;\">B\u1ed9 ch\u1ecdn ng\u00e0y, slider, toolbar, icon,&#8230;<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Carousel, t\u00ednh n\u0103ng thu g\u1ecdn,&#8230;<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Card<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Cung c\u1ea5p thi\u1ebft k\u1ebf card \u0111\u01a1n gi\u1ea3n<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Cung c\u1ea5p t\u00f9y ch\u1ecdn m\u00e0u s\u1eafc kh\u00e1c nhau<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Dialog\/Model<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ch\u1ec9nh s\u1eeda v\u00e0 chuy\u1ec3n d\u1eef li\u1ec7u<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u00f9y ch\u1ec9nh kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng c\u1ee7a pop-ups<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Menu<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Thanh c\u00f4ng c\u1ee5 m\u1edf r\u1ed9ng v\u00e0 sidebar<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Thanh \u0111i\u1ec1u h\u01b0\u1edbng c\u00f3 th\u1ec3 thu g\u1ecdn (collapsible) v\u00e0 m\u1edf r\u1ed9ng (extendable)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Expansion Panel<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Hi\u1ec3n th\u1ecb t\u00f3m t\u1eaft n\u1ed9i dung v\u1edbi thi\u1ebft k\u1ebf hi\u1ec7n \u0111\u1ea1i<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u1ea3i ti\u1ebfn v\u1ec1 ki\u1ec3u d\u00e1ng CSS<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Ki\u1ebfn tr\u00fac<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Nhi\u1ec1u ch\u1ee9c n\u0103ng c\u1ed1t l\u00f5i v\u1edbi \u0111a d\u1ea1ng t\u00f9y ch\u1ecdn<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ki\u1ebfn tr\u00fac t\u1eadp trung v\u00e0o UI<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Responsive Design<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 h\u1ed7 tr\u1ee3 nh\u01b0ng kh\u00f4ng to\u00e0n di\u1ec7n<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 h\u1ed7 tr\u1ee3<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Kh\u1ea3 n\u0103ng truy c\u1eadp v\u00e0 to\u00e0n c\u1ea7u h\u00f3a<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Theo ti\u00eau chu\u1ea9n WCAG 2.0 v\u00e0 cung c\u1ea5p h\u1ed7 tr\u1ee3 ARIA<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Theo ti\u00eau chu\u1ea9n WCAG 2.0 v\u00e0 h\u1ed7 tr\u1ee3 i18n b\u1ed5 sung<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><b>Khi n\u00e0o n\u00ean s\u1eed d\u1ee5ng Angular Material?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 \u0111i\u1ec3m m\u1ea1nh \u1edf Angular Material m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 c\u00e2n nh\u1eafc khi s\u1eed d\u1ee5ng framework n\u00e0y, c\u1ee5 th\u1ec3 nh\u01b0:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng thi\u1ebft k\u1ebf Angular Material<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cung c\u1ea5p h\u1ec7 sinh th\u00e1i thi\u1ebft k\u1ebf c\u1ee7a Google: Material Design c\u00f3 th\u1ec3 nh\u1eadn d\u1ea1ng \u0111\u01b0\u1ee3c v\u00ec l\u00e0 ki\u1ec3u m\u1eb7c \u0111\u1ecbnh c\u1ee7a Google, gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng s\u1eed d\u1ee5ng c\u00f9ng giao di\u1ec7n v\u1edbi Google nh\u01b0 Gmail, Google Drive ho\u1eb7c Google Calendar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kh\u1ea3 n\u0103ng x\u00e2y d\u1ef1ng web nhanh ch\u00f3ng: \u0110i\u1ec1u n\u00e0y s\u1ebd gi\u00fap t\u0103ng t\u1ed1c \u0111\u1ed9 d\u1ef1 \u00e1n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c t\u1ea1o s\u1eb5n v\u00e0 m\u1edf r\u1ed9ng d\u1ef1 \u00e1n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng CDK ho\u1eb7c s\u01a1 \u0111\u1ed3 \u0111\u1ec3 t\u1ea1o th\u00e0nh ph\u1ea7n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi c\u1ea7n h\u1ed7 tr\u1ee3 cho c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169: Angular Material c\u00f3 th\u1ec3 kh\u00f4ng h\u1ed7 tr\u1ee3 t\u1ed1t cho c\u00e1c phi\u00ean b\u1ea3n tr\u00ecnh duy\u1ec7t c\u0169.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_Angular_Material\"><\/span><b>T\u1ed5ng k\u1ebft v\u1ec1 Angular Material<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>Angular Material<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n th\u00edch h\u1ee3p \u0111\u1ec3 t\u1ea1o c\u00e1c \u1ee9ng d\u1ee5ng web v\u1edbi hi\u1ec7u \u1ee9ng h\u1ea5p d\u1eabn v\u00e0 nh\u1ea5t qu\u00e1n. B\u00ean c\u1ea1nh \u0111\u00f3, n\u00f3 c\u0169ng l\u00e0 m\u1ed9t framework th\u00edch h\u1ee3p v\u1edbi nh\u1eefng b\u1ea1n m\u1edbi b\u1eaft \u0111\u1ea7u t\u00ecm hi\u1ec3u v\u1ec1 Angular c\u00f9ng nh\u1eefng l\u1ee3i \u00edch tuy\u1ec7t v\u1eddi c\u1ee7a n\u00f3.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n c\u00f3 \u0111\u1ecbnh h\u01b0\u1edbng ph\u00e1t tri\u1ec3n l\u1eadp tr\u00ecnh theo Angular ho\u1eb7c c\u00e1c \u1ee9ng d\u1ee5ng m\u1ea1nh m\u1ebd th\u00ec Angular Material s\u1ebd l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n \u0111\u00e1ng \u0111\u1ec3 b\u1ea1n c\u00e2n nh\u1eafc \u0111\u1ea5y!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular l\u00e0 m\u1ed9t framework front-end ph\u1ed5 bi\u1ebfn trong l\u0129nh v\u1ef1c l\u1eadp tr\u00ecnh v\u00e0 ph\u00e1t tri\u1ec3n website, trong \u0111\u00f3 c\u00f3 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u00edch h\u1ee3p v\u1edbi Angular ch\u00ednh l\u00e0 Angular Material. Angular Material \u0111\u01b0\u1ee3c xem l\u00e0 th\u01b0 vi\u1ec7n Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) d\u00e0nh cho c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean Angular. \u0110\u1ecdc b\u00e0i [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":81076,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-80876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Angular Material l\u00e0 m\u1ed9t framework giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 s\u1eed d\u1ee5ng t\u00edch h\u1ee3p v\u1edbi Angular. C\u00f9ng t\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 framework n\u00e0y!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material\" \/>\n<meta property=\"og:description\" content=\"Angular l\u00e0 m\u1ed9t framework front-end ph\u1ed5 bi\u1ebfn trong l\u0129nh v\u1ef1c l\u1eadp tr\u00ecnh v\u00e0 ph\u00e1t tri\u1ec3n website, trong \u0111\u00f3 c\u00f3 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u00edch h\u1ee3p v\u1edbi Angular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/angular-material-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-12T02:02:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/Angular-material-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material - ITviec Blog","description":"Angular Material l\u00e0 m\u1ed9t framework giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 s\u1eed d\u1ee5ng t\u00edch h\u1ee3p v\u1edbi Angular. C\u00f9ng t\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 framework n\u00e0y!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material","og_description":"Angular l\u00e0 m\u1ed9t framework front-end ph\u1ed5 bi\u1ebfn trong l\u0129nh v\u1ef1c l\u1eadp tr\u00ecnh v\u00e0 ph\u00e1t tri\u1ec3n website, trong \u0111\u00f3 c\u00f3 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u00edch h\u1ee3p v\u1edbi Angular","og_url":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-11-12T02:02:04+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/Angular-material-vippro.jpg","type":"image\/jpeg"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"13 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material","datePublished":"2024-11-12T02:02:04+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/"},"wordCount":3297,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/Angular-material-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/","url":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/","name":"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/Angular-material-vippro.jpg","datePublished":"2024-11-12T02:02:04+00:00","description":"Angular Material l\u00e0 m\u1ed9t framework giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 s\u1eed d\u1ee5ng t\u00edch h\u1ee3p v\u1edbi Angular. C\u00f9ng t\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 framework n\u00e0y!","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/angular-material-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/Angular-material-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/11\/Angular-material-vippro.jpg","width":1500,"height":790,"caption":"Angular material - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/angular-material-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Angular Material l\u00e0 g\u00ec: C\u00e1c thao t\u00e1c c\u01a1 b\u1ea3n v\u1edbi Angular Material"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/80876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=80876"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/80876\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/81076"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=80876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=80876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=80876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}