How to use UIkit with angular-cli

In this post, I’ll 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’s no need for violence :) First I’ll assume that you already have an angular Project or you can create a new one using angular-cli command

ng new new-project-name

then move to the project folder

cd new-project-name

next we have to add dependency to jquery and uikit

npm install jquery — save

npm install uikit — save

Now we have to edit the file .angular-cli.json and add some jquery and UIKit scripts scroll to the part of scripts then add the scripts of jquery, UIkit and UIkit icons

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/uikit/dist/js/uikit.min.js",
        "../node_modules/uikit/dist/js/uikit-icons.min.js"
      ],
JSON
Copy

Now we can use UIKit wherever we want, next I’ll show simple way to use UIKit alert First I prefer to use sass instead of css, So in the file .angular-cli.json change the end of it to be like the next lines I just changed styleExt from css to scss

"defaults": {
    "styleExt": "scss",
    "component": {}
 }
JSON
Copy

and then you have to rename two files styles.css to styles.scss and in the app folder change app.components.css to app.components.scss and in the file app.components.ts it should look like this

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "app";
}
JavaScript
Copy

then to use the UIKit alert the same file will be like this

import { Component } from "@angular/core";
declare var UIkit: any;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "app";
  showAlert(): void {
    UIkit.modal.alert("UIkit alert!");
  }
}
JavaScript
Copy

now we have to change the app.component.html file to add the alert, add the next code

<div (click)="showAlert()">alert</div>
HTML
Copy

next we have to add UIKIT styling so in the styles.scss file add the next line

@import "../node_modules/uikit/src/scss/variables-theme.scss";
@import "../node_modules/uikit/src/scss/mixins-theme.scss";
@import "../node_modules/uikit/src/scss/uikit-theme.scss";
JavaScript
Copy

That’s all you can find this post on my medium account too here

How to use UIkit with angular-cli

Some useful Links: