How to use UIkit with angular-cli

How to use UIkit with angular-cli

Read this article on my new tool Medium Plus, for a smart, customizable reading experience.

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 :)

One last thing, I published my first Article Series about Angular 5. If you’re interested, You can check them here:

Angular 5 Article Series

1. Creating Angular 5 application with Angular-cli
2. Using Angular Material with Angular 5
3. Deploy Angular 5 Application to Netlify
4. Build PWA with Angular 5 App
5. Build Dynamic themes for Angular Material
6. Using FlexLayout with Angular 5
7. Building News App using Angular 5

Final Demo here

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"
      ],

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": {}
  }

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';
}

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!');
  }
}

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

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

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";

Well, That’s all.

Before you go, check me out the next useful Links: 👀

👨️ My Website/Portfolio

🔥 Get your $50 in FREE hosting credit HERE

⚡ Best Web Browser for 2019 | Privacy First & Chromium Based

🤑️ No Stripe? How To Get Paid With Payoneer ⇒ $25 + $10 Sign UP Bonus

I wrote a series about Angular If you’re interested you can check them

Angular 5 Article Series

Angular 6 Article Series

Support me with Brave