Angular 15 Semantic UI Tutorial for beginners with examples

Angular 15 Semantic UI Tutorial for beginners with examples

In this blog Tutorial, We are going to learn the Integration of Semantic UI in Angular Applications with examples.

You can check my previous post primeng angular tutorial

What is the Semantic UI framework?

Semantic UI is a UI library for building and developing responsive HTML websites quickly. It is like the bootstrap framework and has built-in UI components.

Semantic UI Features

  • Support for any screen of size
  • It provides more than 20 plus themes
  • Can be used as Independent HTML/CSS files or NPM package manager
  • Inbuilt Beautiful UX design and provides various Inbuilt components
  • Support Angular2/4/5/6/7/9/10/11/12/13 versions.

How to add Semantic UI to the Angular project

Angular 15 is the latest Frontend MVC framework for building Dynamic UI applications.

First Create an angular Application using angular CLI. It generates the required basic components and typescript files and configuration files. ng2-semantic-ui is one of the npm libraries for the angular framework

ng2-semantic-ui npm Angular Example

Semantic UI provides the NPM library ng2-semantic-ui which this library doesn’t need a jquery library.

Install ng2-semantic-ui library as given below

npm install ng2-semantic-ui --save

This installs the semantic UI library and adds an entry in package.json.

{
  "dependencies":{
    "ng2-semantic-ui":"0.9.7";
  }
}

Once an npm library is installed, Please configure the semantic UI CDN CSS file in index.html

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>

ng2-semantic-UI provides each component in angular modules, To use semantic UI components, First you need to import SuiModule main module in the application module

Import SuiModule module in app.module.ts

please import SuiModule into the application module app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { SuiModule } from "ng2-semantic-ui";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SuiModule, // Add Semantic UI module
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Html Template changes

Added two semantic UI buttons for Increment and decrement. added click event for each button.

<div style="text-align:center">
  <h1>Angular Semantic UI tutorials With Examples</h1>
</div>
<div style="text-align:center">
  <button class="ui primary button" (click)="IncrementEvent()">
    Increment
  </button>
  <button class="ui primary button" (click)="DecrementEvent()">
    Decrement
  </button>
</div>
<div style="text-align:center">Clicks Count: {{count}}</div>

Typescript component changes

Added two events for increment and decrement in component

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  count: number = 0;

  IncrementEvent() {
    this.count++;
  }
  DecrementEvent() {
    this.count--;
  }
}

The development server is started using the ng serve command. The application can be accessed using localhost:4200. Output

Angular Semantic UI tutorial with examples

Conclusion

Semantic UI is an easy UI library with inbuilt components, In this tutorial, Learned how to integrate Semantic UI into an Angular application.