How to connect Angular 4 or Angular 2 to Semantic UI

How to connect Angular 4 or Angular 2 to Semantic UI

In this lesson, we are going to talk about, how to connect semantic UI with angular 2 or 4. Steps are really easy and i will guide you step by step. Gets get started.

First of all we need to make a new angular project using angular cli. ( if you don’t know how to get started with angular cli, comment below and ill help you)

ng new your-app-name

then go inside to your newly created application folder and open a terminal or command prompt. Now we are going to install semantic UI to our angular project. Semantic UI is built on top of jquery. Because of that, we need to install jquery along side with semantic UI to make it work. We can use below commands to install both jquery and semantic UI.

npm install semantic-ui-css jquery --save

( if your computer can’t recognize “NPM” , you have to install node js package manager.)

After you finish installing, you can see both of your newly installed packages inside your node_modules folder.

then open your .angular-cli.json file and add semantic UI js file, jquery js file and semantic UI css file to it as it shown below.

That’s it. Now you are good to go. Add some semantic UI elements to your app and you will see the semantic elements inside your app. Happy coding… 🙂

I am Pasindu dineth peiris and im working as a software engineer. Im mainly working as a mobile application developer, but i love to work with python and other languages also. Im good with android, ios and also with cross platform frameworks like ionic 2, Nativescript, Fusetools. Using this website i am going to teach what i learn. KIT..

Leave a Reply

Your email address will not be published. Required fields are marked *