Site Loader

Integrate Semantic UI in Angular 6.*


Node 6.9.0 or higher

   $ node -v

Npm 3.0.0 or higher

$ npm -v


$ npm install -g typescript


$ npm install -g @angular/cli


$ npm install --global gulp-cli

Installing Semantic UI in your Angular 6 project:

Go to your angular Folder

Problem with less@3. So we need a lower Less version.

$ npm install less@2.7.3 --save-dev

Install Semantic UI

$ npm install semantic-ui

Select how and where you want to install it.
Create the Semantic UI theme

Go to the new semantic folder and run:

$ gulp build

Now we have a new dist folder
Link your semantic theme with your angular project.
Open your angular.json and include your css file

"styles": [

How to include the Semantic UI Js, if it requires Jquery? and we hate jquery!!

Install ng2-semanti-ui

$ npm install ng2-semantic-ui --save
Import the main module in your app.module.ts
import {SuiModule} from 'ng2-semantic-ui';

    declarations: [AppComponent, ...],
    imports: [SuiModule, ...],  
    bootstrap: [AppComponent]
export class AppModule {}

Remember to rerun the ng-serve command now.

And that is all, this should be the result:

Selim Reza

Selim Reza

Software Developer , MBA - NSU.

Follow us on Facebook

Just a Text Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu nulla vitae elit interdum sagittis.