https://www.ahmd.world/_next/static/chunks/pages/blog/how-to-use-u…it-with-angular-cli-1aa967b4cee3e79c7ad8.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[371],{66485:function(e){e.exports=function(e){if(navigator.clipboard)return navigator.clipboard.writeText(e).catch((function(e){throw void 0!==e?e:new DOMException("The request is not allowed","NotAllowedError")}));var t=document.createElement("span");t.textContent=e,t.style.whiteSpace="pre",t.style.webkitUserSelect="auto",t.style.userSelect="all",document.body.appendChild(t);var n=window.getSelection(),o=window.document.createRange();n.removeAllRanges(),o.selectNode(t),n.addRange(o);var r=!1;try{r=window.document.execCommand("copy")}catch(a){console.log("error",a)}return n.removeAllRanges(),window.document.body.removeChild(t),r?Promise.resolve():Promise.reject(new DOMException("The request is not allowed","NotAllowedError"))}},68679:function(e,t,n){"use strict";n.r(t),n.d(t,{meta:function(){return c},default:function(){return m}});var o=n(26265),r=n(38347),a=(n(67294),n(3905)),i=n(98962);function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var c={title:"How to use UIkit with angular-cli",publishedAt:"2017-09-05T00:52:12+02:00",draft:!1,image:"angular-logo.webp",icon:"uikit.svg",subTitle:"",tags:["Angular","UIKit"]},u={meta:c},p=function(e){var t=e.children;return(0,a.kt)(i.Z,{meta:c},t)};function m(e){var t=e.components,n=(0,r.Z)(e,["components"]);return(0,a.kt)(p,l(l(l({},u),n),{},{components:t,mdxType:"MDXLayout"}),(0,a.kt)("span",{className:"first-letter"},"I"),"n this post, I\u2019ll talk about the best way to use `UIkit` with `angular 2` or 4 using `angular-cli` I wrote this post just to use it later as I forgot too much. Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there\u2019s no need for violence :) First I\u2019ll assume that you already have an `angular` Project or you can create a new one using `angular-cli` command",(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-bash"}),"ng new new-project-name\n")),(0,a.kt)("p",null,"then move to the project folder"),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-bash"}),"cd new-project-name\n")),(0,a.kt)("p",null,"next we have to add dependency to ",(0,a.kt)("inlineCode",{parentName:"p"},"jquery")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"uikit")),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-bash"}),"npm install jquery\u200a\u2014\u200asave\n")),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-bash"}),"npm install uikit\u200a\u2014\u200asave\n")),(0,a.kt)("p",null,"Now we have to edit the file ",(0,a.kt)("inlineCode",{parentName:"p"},".angular-cli.json")," and add some ",(0,a.kt)("inlineCode",{parentName:"p"},"jquery")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"UIKit")," scripts\nscroll to the part of scripts then add the scripts of ",(0,a.kt)("inlineCode",{parentName:"p"},"jquery"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"UIkit")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"UIkit icons")),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-json"}),'"scripts": [\n        "../node_modules/jquery/dist/jquery.min.js",\n        "../node_modules/uikit/dist/js/uikit.min.js",\n        "../node_modules/uikit/dist/js/uikit-icons.min.js"\n      ],\n')),(0,a.kt)("p",null,"Now we can use ",(0,a.kt)("inlineCode",{parentName:"p"},"UIKit")," wherever we want, next I\u2019ll show simple way to use ",(0,a.kt)("inlineCode",{parentName:"p"},"UIKit alert"),"\nFirst I prefer to use sass instead of css, So in the file ",(0,a.kt)("inlineCode",{parentName:"p"},".angular-cli.json"),"\nchange the end of it to be like the next lines\nI just changed ",(0,a.kt)("inlineCode",{parentName:"p"},"styleExt")," from ",(0,a.kt)("inlineCode",{parentName:"p"},"css")," to ",(0,a.kt)("inlineCode",{parentName:"p"},"scss")),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-json"}),'"defaults": {\n    "styleExt": "scss",\n    "component": {}\n }

1\n')),(0,a.kt)("p",null,"and then you have to rename two files ",(0,a.kt)("inlineCode",{parentName:"p"},"styles.css")," to ",(0,a.kt)("inlineCode",{parentName:"p"},"styles.scss")," and in the app folder change ",(0,a.kt)("inlineCode",{parentName:"p"},"app.components.css")," to ",(0,a.kt)("inlineCode",{parentName:"p"},"app.components.scss"),"\nand in the file ",(0,a.kt)("inlineCode",{parentName:"p"},"app.components.ts")," it should look like this"),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-javascript"}),'import { Component } from "@angular/core";\n@Component({\n  selector: "app-root",\n  templateUrl: "./app.component.html",\n  styleUrls: ["./app.component.scss"]\n})\nexport class AppComponent {\n  title = "app";\n}\n')),(0,a.kt)("p",null,"then to use the ",(0,a.kt)("inlineCode",{parentName:"p"},"UIKit alert")," the same file will be like this"),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-javascript"}),'import { Component } from "@angular/core";\ndeclare var UIkit: any;\n@Component({\n  selector: "app-root",\n  templateUrl: "./app.component.html",\n  styleUrls: ["./app.component.scss"]\n})\nexport class AppComponent {\n  title = "app";\n  showAlert(): void {\n    UIkit.modal.alert("UIkit alert!");\n  }\n}\n')),(0,a.kt)("p",null,"now we have to change the ",(0,a.kt)("inlineCode",{parentName:"p"},"app.component.html")," file to add the ",(0,a.kt)("inlineCode",{parentName:"p"},"alert"),", add the next code"),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-html"}),'<div (click)="showAlert()">alert</div>\n')),(0,a.kt)("p",null,"next we have to add ",(0,a.kt)("inlineCode",{parentName:"p"},"UIKIT")," styling so in the ",(0,a.kt)("inlineCode",{parentName:"p"},"styles.scss")," file add the next line"),(0,a.kt)("pre",null,(0,a.kt)("code",l({parentName:"pre"},{className:"language-javascript"}),'@import "../node_modules/uikit/src/scss/variables-theme.scss";\n@import "../node_modules/uikit/src/scss/mixins-theme.scss";\n@import "../node_modules/uikit/src/scss/uikit-theme.scss";\n')),(0,a.kt)("p",null,"That's all you can find this post on my medium account too ",(0,a.kt)("a",l({parentName:"p"},{href:"https://medium.com/@geeksamu/how-to-use-uikit-with-angular-cli-9641a868758e"}),"here")))}m.isMDXComponent=!0},3626:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/how-to-use-uikit-with-angular-cli",function(){return n(68679)}])},71385:function(e,t,n){"use strict";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function r(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!==typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"===typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}n.d(t,{Z:function(){return r}})},16248:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.useClipboard=void 0;var r=o(n(66485)),a=n(67294),i=n(16778);function s(e){return e&&("TEXTAREA"===e.nodeName||"INPUT"===e.nodeName)}t.useClipboard=function(e){void 0===e&&(e={});var t=i.useTimedToggle(!1),n=t[0],o=t[1],l=a.useRef(null),c=a.useRef(e);return c.current=e,{copied:n,copy:a.useCallback((function(e){var t=c.current,n=l.current;function a(){t.onSuccess&&t.onSuccess(),t.copiedTimeout&&o(t.copiedTimeout),t.selectOnCopy&&s(n)&&n.select()}function i(){t.onError&&t.onError(),!1!==t.selectOnError&&s(n)&&n.select()}function u(e){r.default(e).then(a).catch(i)}"string"===typeof e?u(e):n&&u(n.value)}),[]),isSupported:function(){return!!navigator.clipboard||"function"===typeof document.execCommand&&"function"===typeof document.queryCommandSupported&&document.queryCommandSupported("copy")},target:l}}},16778:function(e,t,n){"use strict";

1Object.defineProperty(t,"__esModule",{value:!0}),t.useTimedToggle=void 0;var o=n(67294);t.useTimedToggle=function(e){var t=o.useState(!1),n=t[0],r=t[1],a=o.useRef(),i=o.useRef(e);return o.useEffect((function(){return function(){return clearTimeout(a.current)}}),[]),[n,function(e){clearTimeout(a.current),r(!i.current),a.current=window.setTimeout((function(){return r(i.current)}),e)}]}}},function(e){e.O(0,[329,8962,9774,2888,179],(function(){return t=3626,e(e.s=t);var t}));var t=e.O();_N_E=t}]);