Integrate Semantic UI in Angular 6+



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

Site Footer