{

Angular 13 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 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.

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 Angular project

Angular 13 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 library for the angular framework

ng2-semantic-ui Angular Example

Semantic UI provides 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 in 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 Example
</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 in Angular application.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.