0.0.14 • Published 8 years ago
semantic-ng2 v0.0.14
Semantic-ng2
Installation
Using Angular CLI
Open terminal, go into folder where you want to create the project and run these commands
npm install -g angular-cli
ng new project-name
Go into the newly created folder and run
npm install -S semantic-ng2
After installing the semantic-ng2 package, edit following files:
angular-cli-build.js
vendorNpmFiles: [
...
'semantic-ng2/**/*'
]
src/system-config.ts
const map: any = {
'semantic-ng2': 'vendor/semantic-ng2'
};
const packages:any = {
'semantic-ng2': {defaultExtension: 'js'}
};
src/index.html
Into the head
tag
<link rel="stylesheet" href="vendor/semantic-ng2/build/css/vendors.css">
<link rel="stylesheet" href="vendor/semantic-ng2/build/css/semantic-ng2.css">
Before </body>
tag
<script src="vendor/semantic-ng2/build/js/vendors-min.js"></script>
src/main.ts
import {SMT_PROVIDERS} from "semantic-ng2/semantic-ng2";
import {HTTP_PROVIDERS} from "@angular/http";
bootstrap(... , [HTTP_PROVIDERS, SMT_PROVIDERS]);
You can now use semantic-ng2 into all your components !
Usage
The import for all semantic-ng2 package classes is
import {...} from "semantic-ng2/semantic-ng2";
Edit src/app/project-name.component.ts
file and add
import {SMT_DIRECTIVES} from "semantic-ng2/semantic-ng2";
Add into @Component
annotation
@Component({
...,
directives: [SMT_DIRECTIVES]
})
Edit src/app/project-name.component.html
file and add
<a smt-button [circular]="true" [color]="'red'" [icon]="'user'">Button</a>
Finally, in the terminal, start the project
ng server
Now open your browser and go to the http://localhost:4200/
url.
You should be able to see a red circular button with a user icon and Button
text :)