Angular 2 building blocks :package: based on Semantic UI

Related tags

Angular ngSemantic
Overview

GitHub version Dependency Status Build Status MIT licensed Support via PayPal

Angular2 & Semantic UI

Angular 2
Angular2 - Semantic UI

Live demo

ng-semantic.herokuapp.com

  • Angular 2
  • Semantic UI version: 2.2.2

Installation

npm install ng-semantic --save

Angular CLI configuration ( Webpack )

Install jQuery with NPM

npm install jquery --save

Download Official Semantic UI bundle ( .zip ) from Semantic-Org

Add semantic.min.css, semantic.min.js, jquery to the angular-cli.json as follows:

...

"apps": [{
  ... 
  "styles": [
      "styles.css",
      "../path/to/semantic.min.css" // 
  ],
  "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../path/to/semantic.min.js"
  ],
  ...
}]

Use

Then you can use in a component as follows:

Hello ` }) export class DemoComponent {}">
// Module
import { NgModule } from "@angular/core";
import { NgSemanticModule } from "ng-semantic";

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, NgSemanticModule ]
})
export class AppModule {}

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

@Component({
selector: 'demo-cmp',
template: `
 
   
    Hello
 
 `
})
export class DemoComponent {}

Custom configuration

Semantic UI ( minified versions of css and js ) must be loaded in index.html

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js">script>

Support / Donations

If you’d like to support me developing this project you’re able to do so by donating on PayPal or if you have any special needs/ feature requests don’t hesitate to send me an email.

Support via PayPal

Angular 2 QuickStart with ngSemantic

https://github.com/vladotesanovic/angular2-quickstart-ngsemantic

Angular 2 CLI with ngSemantic

https://github.com/vladotesanovic/angular2-cli-webpack

Development

git clone https://github.com/vladotesanovic/ngSemantic.git
cd ngSemantic

# install dependencies
npm install

# compile demo project
npm start

Components

  • sm-accordion
  • sm-button
  • sm-loader
  • sm-header
  • sm-message
  • sm-popup
  • sm-segment
  • sm-modal
  • sm-sidebar
  • sm-dimmer
  • sm-flag
  • sm-input
  • sm-checkbox
  • sm-rating
  • sm-dropdown
  • sm-select
  • sm-search
  • sm-textarea
  • sm-progress
  • sm-card
  • sm-shape
  • sm-tabs & sm-tab
  • sm-list
  • sm-item
  • smDirTooltip
  • smDeviceVisibility
  • smDirVisibility

Licence

MIT License

Comments
  • Update to angular 2.0.0

    Update to angular 2.0.0

    Let me know if you also want to upgrade Typescript to version 2 as in https://github.com/angular/quickstart/commit/d3a977e900f0ab25ec57e54f5be9e6184f5e44d5

    opened by frankadrian 10
  • Update to rc6

    Update to rc6

    Updated to rc6 according to https://github.com/angular/angular/blob/master/CHANGELOG.md

    I think its worth thinking about creating a separate module for each component. Please let me know what you think!

    opened by frankadrian 10
  • Angular RC 1 support

    Angular RC 1 support

    Thanks for the great project!

    Now that RC 1 it out, the Angular team changed the import to @angular/... instead of angular2/.... Would be great if ngSemantic could be updated too.

    Cheers, Andy

    opened by aaweb 7
  • <modal-actions> and <modal-content> need directives

    and need directives

    https://github.com/vladotesanovic/ngSemantic/blob/master/ng-semantic/modal/modal.ts#L23

    Can't bind to 'selector' since it isn't a known property of 'div'. ("Click me</button>
    <sm-modal title="Hello from Modal" class="" icon="home" #videoEditModal>
        <div [ERROR ->][selector]=modal-content>
            {{video}}
        </div>
    "): SemanticModalComponent@30:9
    Can't bind to 'selector' since it isn't a known property of 'div'. ("
            {{video}}
        </div>
        <div [ERROR ->][selector]=modal-actions>
            <div class="ui buttons">
                <div class="ui button primary""): SemanticModalComponent@33:9 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
    Can't bind to 'selector' since it isn't a known property of 'div'. ("Click me</button>
    <sm-modal title="Hello from Modal" class="" icon="home" #videoEditModal>
        <div [ERROR ->][selector]=modal-content>
            {{video}}
        </div>
    "): SemanticModalComponent@30:9
    

    It appears we need directives for modal-content and modal-actions.

    opened by brjadams 6
  • Set selected options on multiple selection

    Set selected options on multiple selection

    Thanks for the components! Great job!

    I am trying to fill a multiselect of countries with async call but when I try to check the selected items I can not... Its possible? `

    `

    Should be like this, right?

    opened by tomtobac 5
  • Node engine version limit

    Node engine version limit

    I've got a node package that uses "ng-semenatic": "^1.1.11", however yarn install fails because ng-semantic restricts node versions > 6 in package.json:

    "engines": { "node": ">= 5.4.1 < 6" },

    image

    This error can be circumvented with yarn install --ignore-engines, however I belive current node version to be supported. As far as I am aware npm does not check for this, yarn however does.

    opened by Christian-Seematter 4
  • Problems to install in MAC

    Problems to install in MAC

    I have a problem, result the error:

    [email protected] start /Volumes/WINDOWS/Dropbox (Pessoal)/Dropbox - 2016/www-2016/Angular2/ngSemantic

    tsc && concurrently "tsc -w" "npm run tsc:w" "lite-server -c dev.config.js"

    error TS6053: File '/Volumes/WINDOWS/Dropbox (Pessoal)/Dropbox - 2016/www-2016/Angular2/ngSemantic/typings/index.d.ts' not found.

    npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.6.0 npm ERR! npm v3.10.3 npm ERR! code ELIFECYCLE npm ERR! [email protected] start: tsc && concurrently "tsc -w" "npm run tsc:w" "lite-server -c dev.config.js" npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "npm run tsc:w" "lite-server -c dev.config.js" '. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the ng-semantic package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! tsc && concurrently "tsc -w" "npm run tsc:w" "lite-server -c dev.config.js" npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs ng-semantic npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls ng-semantic npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request: npm ERR! /Volumes/WINDOWS/Dropbox (Pessoal)/Dropbox - 2016/www-2016/Angular2/ngSemantic/npm-debug.log

    opened by farnetani 4
  • Problem creating a sm-select component

    Problem creating a sm-select component

    Hi vladotesanovic,

    I have a problem, actually 2 problems:

    1. Do not use English well, I apologize for writing.
    2. I'm using sm-select component, but does not work as expected. Do not load the placeholder. The label attribute does not work.

    In this plunker I try to show my problem: http://plnkr.co/edit/TS4nQomysX2s3PZ6za3U?p=preview

    Another thing that intrigues me, By modifying the sample files, this is not reflected in the demo app. Why?

    Thanks for your help... Excellent work!

    opened by fgtdr 4
  • Possible bug in dropdown.ts: options override

    Possible bug in dropdown.ts: options override

    As I could not run sm-dropdown having it installed via npm (#26), I tried to make it run "directly" using dropdown.ts. Then I verified that on dropdown setup, the "options" were overrriden. I could fix it with the following modification:

    export class SemanticDropdownComponent implements AfterViewInit {
        @Input() class: string;
        @Input() title: string;
        @Input() items: Array<{}>;
        @Input() options: any = {};
        @Output() onChange: EventEmitter<string|number> = new EventEmitter<string|number>();
        @ViewChild("dropdown") dropdown: ElementRef;
    
        ngAfterViewInit(): void {
            this.options.onChange = (value: string|number) => this.onChange.emit(value)
            jQuery(this.dropdown.nativeElement).dropdown(this.options);
        }
    }
    

    Regards.

    opened by Eduardo-M-Cavalcanti 4
  • added SemanticAccordion components

    added SemanticAccordion components

    I know I would still need to create a demo entry for this, but I noticed you were also working on the accordion, and I wanted you to be able to take a look at my accordion implementation. My team and I are really interested in adding angular2 support for semantic. Your repo seemed further along than anything else out there, so if you're interested, we could work on this together to get it feature complete.

    opened by thuey 4
  • semantic css files not available

    semantic css files not available

    I used the following npm command to install semantic npm install ng-semantic --save But i couldn't find css/scss/less files downloaded inside node_modules/ng-semantic folder.

    As a result my dropdown is not themed at all.

    opened by mkndn 3
  • Error when use ngSemantic with Angular6

    Error when use ngSemantic with Angular6

    I follow the instruction to install ng-semantic. It is installed.

    When I try to start the app using "ng serve", I got the following error:

    ERROR in ./node_modules/ng-semantic/src/search/search.js Module not found: Error: Can't resolve 'rxjs/add/operator/debounceTime' in '/Users/user/Documents/Work/NodeJS_WorkSpace/LibraryManager/node_modules/ng-semantic/src/search' ERROR in ./node_modules/ng-semantic/src/search/search.js Module not found: Error: Can't resolve 'rxjs/add/operator/distinctUntilChanged' in '/Users/user/Documents/Work/NodeJS_WorkSpace/LibraryManager/node_modules/ng-semantic/src/search'

    Here is my info:

    ` Angular CLI: 6.0.8 Node: 8.9.3 OS: darwin x64 Angular: 6.0.7 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

    Package Version

    @angular-devkit/architect 0.6.8 @angular-devkit/build-angular 0.6.8 @angular-devkit/build-optimizer 0.6.8 @angular-devkit/core 0.6.8 @angular-devkit/schematics 0.6.8 @angular/cli 6.0.8 @ngtools/webpack 6.0.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.2.1 typescript 2.7.2 webpack 4.8.3

    `

    opened by longjingjun 2
  • How can i delete a certain item on sm-select multiple item

    How can i delete a certain item on sm-select multiple item

    I know that with a model you can change the multiple selection but if i clear the model to an empty array, the selected items still exist how can i delete it with my own preferences which item i want to delete

    opened by willihogan97 0
  • sm-tab active input does not change tab contents

    sm-tab active input does not change tab contents

    When you click on a tab to activate it, the content is activated at the same time. When the activate Input() is used to activate a tab programmatically via the component.ts file however, the content is not activated and only the tab changes.

    opened by grahnj 0
Owner
Vlado Tesanovic
pinmap.co creator medium.com/@vlado.tesanovic
Vlado Tesanovic
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Heavily inspired by Angular Forms, this package provides utilities for complex Model-driven form management in Lit-based Web Components.

Heavily inspired by Angular Forms, this package provides utilities for complex Model-driven form management in Lit-based Web Components.

Michele Stieven 8 Dec 9, 2022
Angular Library workspace to creating and testing angular libraries

Library Workspace Run Locally Clone the project https://github.com/sametcelikbicak/library-workspace.git Go to the library project directory cd li

Samet ÇELİKBIÇAK 4 Nov 1, 2022
Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Rainer Hahnekamp 7 Nov 16, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angu

NG-ZORRO 8.3k Jan 6, 2023
Customizable Angular UI Library based on Eva Design System

Nebular Documentation | Stackblitz Template | UI Bakery - Angular UI Builder | Angular templates Nebular is a customizable Angular 10 UI Library with

Akveo 7.7k Dec 31, 2022
Covalent: UI Platform based on Angular-Material

Covalent: UI Platform based on Angular-Material Covalent is a reusable UI platform from Teradata for building web applications with common standards a

Teradata Corporation 2.3k Jan 1, 2023
An enterprise-class UI components based on At UI Design and Angular. 🚀 🚀 🚀

An enterprise-class UI components based on At UI Design and Angular. ?? ?? ??

塟愛鎵镞de栤仯 113 Dec 16, 2022
A component built in angular 13 which can generate an signature image in different fonts based on the selection.

AngularSignatureGenerator This project was generated with Angular CLI version 13.2.6. Development server Run ng serve for a dev server. Navigate to ht

Rohith P 4 Apr 26, 2022
Monorepo for all the tooling related to using ESLint with Angular

Angular ESLint Monorepo for all the tooling which enables ESLint to lint Angular projects

angular-eslint 1.4k Dec 29, 2022
Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

RxAngular 1.5k Jan 5, 2023
The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

PatternFly 87 Nov 15, 2022
Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBAngular 5 Demo 500+ material UI components Super s

MDBootstrap 1.1k Dec 30, 2022
Component infrastructure and Material Design components for Angular

Official components for Angular The Angular team builds and maintains both common UI components and tools to help you build your own custom components

Angular 23.2k Jan 3, 2023
Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

null 910 Dec 8, 2022
Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

AngularUI 14.4k Jan 3, 2023
NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

ng-bootstrap 8k Dec 24, 2022
🚀 Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Swimlane 654 Dec 24, 2022