Category Archives: Semantic-UI

Semantic UI with Angular

Semantic UI with Angular 6

How to include Semantic UI to an angular project

Step: 1
Open the terminal then go into your angular project then run the command below

 sudo npm install semantic-ui-css jquery -D 

Step: 2
Open angular.json file then find “styles”: and then add the line below

 "./node_modules/semantic-ui-css/semantic.min.css" 

Step: 3
Open angular.json file then find “scripts”: and then add the line below

"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/semantic-ui-css/semantic.min.js"

Step: 4
Open app.component.ts file then add the line below

declare var $:any;

Step: 5
Open app.component.ts file then add the line below in AppComponent

  toggleSidebar():void {
    $('.ui.labeled.icon.sidebar').sidebar('toggle');
  }

So the app.component.ts file should be like this

import { Component } from '@angular/core';

declare var $:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Semantic UI';

  toggleSidebar():void {
    $('.ui.labeled.icon.sidebar').sidebar('toggle');
  }

}

Step: 6
Open app.component.html file then add the line below anywhere into this file

<div (click)="toggleSidebar()" class="ui animated button" tabindex="0">
  <div class="visible content">Next</div>
  <div class="hidden content">
    <i class="right arrow icon"></i>
  </div>
</div>

Step: 7
Finally run ng serve to see the output of a semantic sidebar that we have added above.

ng serve --open

Thanks. 🙂