How to use UIkit with angular-cli

9/4/2017

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


1ng new new-project-name

then move to the project folder


1cd new-project-name

next we have to add dependency to jquery and uikit


1npm install jquery — save


1npm 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


1"scripts": [
2        "../node_modules/jquery/dist/jquery.min.js",
3        "../node_modules/uikit/dist/js/uikit.min.js",
4        "../node_modules/uikit/dist/js/uikit-icons.min.js"
5      ],

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


1"defaults": {
2    "styleExt": "scss",
3    "component": {}
4 }

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


1import { Component } from "@angular/core";
2@Component({
3  selector: "app-root",
4  templateUrl: "./app.component.html",
5  styleUrls: ["./app.component.scss"]
6})
7export class AppComponent {
8  title = "app";
9}

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


1import { Component } from "@angular/core";
2declare var UIkit: any;
3@Component({
4  selector: "app-root",
5  templateUrl: "./app.component.html",
6  styleUrls: ["./app.component.scss"]
7})
8export class AppComponent {
9  title = "app";
10  showAlert(): void {
11    UIkit.modal.alert("UIkit alert!");
12  }
13}

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


1<div (click)="showAlert()">alert</div>

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


1@import "../node_modules/uikit/src/scss/variables-theme.scss";
2@import "../node_modules/uikit/src/scss/mixins-theme.scss";
3@import "../node_modules/uikit/src/scss/uikit-theme.scss";

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