Angular 6 + Semantic UI

Photo by Marcus dePaula on Unsplash

A plan B for Bootstrap Lovers. Today I’m going to talk about how to install semantic in your angular project without Jquery! 

First of all, I hate to see so many solutions that include Jquery in an Angular project, and let’s been honest, that is not how it works, you don’t need Jquery in your Angular project! 

Check this answer from Quora.

So, let's back to our business: 


  • Node 6.9.0 or higher
    $ node -v
  • Npm 3.0.0 or higher
    $ npm -v
  • Typescript:
    $ npm install -g typescript
  • Angular-Cli:
    $ npm install -g @angular/cli
  • Gulp:
    $ npm install --global gulp-cli

Installing Semantic UI in your Angular 6 project:

  1. Go to your angular Folder
    1. Problem with less@3
      1. For today: 20/May/2018, there is an issue, so we need a lower Less version. 
        $ npm install less@2.7.3 --save-dev
  2. Install Semantic UI
    1. $ npm install semantic-ui
    2. Select how and where you want to install it.
  3. Create the Semantic UI theme
    1. Go to the new semantic folder and run: 
      $ gulp build
    2. Now we have a new dist folder
  4. Link your semantic theme with your angular project. 
    1. Open your angular.json and include your css file
      "styles": [
  5. How to include the Semantic UI Js, if it requires Jquery? and we hate jquery!! 
    1. Install ng2-semanti-ui
      $ npm install ng2-semantic-ui --save
    2. 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: 

with and without

 At the left, without Semantic UI and on the right with Semantic UI. 


Remember, do not use Jquery!

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.