Monday, October 1, 2018

Angular Semantic UI Tutorial for beginners with examples | ng2-semantic-ui Angular Examples

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

Semantic UI framework Angular Tutorial

Semantic UI is UI library for build and develop responsive HTML websites fastly. It is like the bootstrap framework

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/Angular 4/ Angular 5/ ANgular 6 versions
Angular 6 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 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 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.2.13/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.

Angular Semantic UI tutorial with examples

Related article


EmoticonEmoticon