Site Loader

Integrate Semantic UI in Angular 6.*

Requirements:

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:

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": [
              "semantic/dist/semantic.min.css",
              "src/styles.css"
            ],

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

@NgModule({
    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.