Angular 12 Semantic UI Tutorial for beginners with examples


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

You can check my previous post primeng angular tutorial

What is Semantic UI framework ?

Semantic UI is UI library for build and develop responsive HTML websites fastly. It is like the bootstrap framework and has builtin 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 integrate Semantic UI in Angular project

Angular 12 is a 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 npm library for the angular framework

ng2-semantic-ui Angular Example

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

npm install ng2-semantic-ui --save

This installs semantic ui library and add an entry in package.json.

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

Once npm library is installed, Please configure 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 inAngular 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

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 ng serve command. The application can be accessed using localhost:4200. Output Angular Semantic UI tutorial with examples

Conclusion,

Semantic UI is a 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.