{"id":3541,"date":"2025-11-13T10:55:48","date_gmt":"2025-11-13T03:55:48","guid":{"rendered":"https:\/\/portal-atlasx.cdg.co.th\/home\/?post_type=docs&#038;p=3541"},"modified":"2025-11-13T10:55:48","modified_gmt":"2025-11-13T03:55:48","slug":"styles-in-angular-project","status":"publish","type":"docs","link":"https:\/\/portal-atlasx.cdg.co.th\/home\/docs\/gis-design-system-v1-0\/how-to-use\/styles-in-angular-project\/","title":{"rendered":"Styles in Angular Project"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"styles-in-angular-project\">Styles in Angular Project<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01 GIS Design System \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e02\u0e2d\u0e07 library PrimeNG \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 PrimeNG \u0e17\u0e35\u0e48 Angular Project \u0e01\u0e48\u0e2d\u0e19 \u0e42\u0e14\u0e22\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e28\u0e36\u0e01\u0e29\u0e32\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48\u00a0<a href=\"https:\/\/primeng.org\/installation\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/primeng.org\/installation<\/a><br><br>** \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07 @angular\/core \u0e43\u0e19 Project \u0e01\u0e48\u0e2d\u0e19 \u0e41\u0e25\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 primeng \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e17\u0e35\u0e48\u0e15\u0e23\u0e07\u0e01\u0e31\u0e19 (\u0e40\u0e0a\u0e48\u0e19 \u0e16\u0e49\u0e32\u0e2b\u0e32\u0e01\u0e43\u0e0a\u0e49 @angular\/core v.14 \u0e01\u0e47\u0e43\u0e2b\u0e49\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 primeng@14 \u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e19)<\/li>\n\n\n\n<li>\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01 library \u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e19 @atlasx \u0e40\u0e01\u0e47\u0e1a\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19 Private Repository \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e01\u0e32\u0e23 login \u0e01\u0e48\u0e2d\u0e19 \u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e19\u0e35\u0e49<br><br><code>npm login --scope=@atlasx --registry=https:\/\/atlasx.cdg.co.th\/nexus\/repository\/npm-private\/<\/code><br><br>** \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e17\u0e35\u0e21 Tech \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e02\u0e2d Username, Password \u0e41\u0e25\u0e30 Email \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a login<\/li>\n<\/ol>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 library \u0e17\u0e35\u0e48 Angular Project \u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e19\u0e35\u0e49<br><br><code>npm install --save @atlasx\/gis-design-system-style<\/code><\/li>\n\n\n\n<li>\u0e17\u0e33\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21 css \u0e2b\u0e23\u0e37\u0e2d scss \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48 Angular Project \u0e42\u0e14\u0e22\u0e40\u0e1e\u0e34\u0e48\u0e21 path \u0e44\u0e1b\u0e22\u0e31\u0e07 .css\/.scss \u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19\u0e44\u0e1f\u0e25\u0e4c angular.json<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>    ...\n    \"styles\": &#91;\n        \"src\/styles.css\",\n        \"node_modules\/primeicons\/primeicons.css\",\n        \"node_modules\/primeng\/resources\/themes\/lara-light-blue\/theme.css\",\n        \"node_modules\/primeng\/resources\/primeng.min.css\",\n        \"node_modules\/@atlasx\/gis-design-system-style\/design-system.css\"\n    &#93;\n    ...<\/textarea><\/pre><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">    ...<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #A31515\">&quot;styles&quot;<\/span><span style=\"color: #000000\">: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #A31515\">&quot;src\/styles.css&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #A31515\">&quot;node_modules\/primeicons\/primeicons.css&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #A31515\">&quot;node_modules\/primeng\/resources\/themes\/lara-light-blue\/theme.css&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #A31515\">&quot;node_modules\/primeng\/resources\/primeng.min.css&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #A31515\">&quot;node_modules\/@atlasx\/gis-design-system-style\/design-system.css&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    &#93;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    ...<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e19\u0e33 GIS Design System \u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e17\u0e35\u00a0<a href=\"https:\/\/gitlab.gisc.cdg.co.th\/tech-001.technology\/gisdesignsystem\/atlasxdesignsystem\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/gitlab.gisc.cdg.co.th\/tech-001.technology\/gisdesignsystem\/atlasxdesignsystem<\/a><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/assets\/images\/guideline\/compare\/breadcrumb.png\" alt=\"\" title=\"null\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/assets\/images\/guideline\/compare\/TriStateCheckbox.png\" alt=\"\" title=\"null\"\/><\/figure>\n","protected":false},"featured_media":0,"parent":3529,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nav_title":"","positive":"","negative":"","footnotes":""},"docs_category":[],"class_list":["post-3541","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/comments?post=3541"}],"version-history":[{"count":2,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3541\/revisions"}],"predecessor-version":[{"id":3543,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3541\/revisions\/3543"}],"up":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3529"}],"wp:attachment":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/media?parent=3541"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs_category?post=3541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}