CODEWITHSUNDEEP
angularangular6semantic-ui
Archimede
Archimede

Reputation: 727

Angular 6 and Semantic UI integration

I would like to integrate Semantic UI in my Angular 6 to use their very nice web controls.

I found an example the Angular official Ng-Book (pg. 32), I see that I should copy and paste some files from the book repo (src/app/vendor/, src/assets/images/ and src/styles.css). OK, it works, but this is specific example from a already-build app and I want understand very well how make it in general case.

So, I searched some general way to make it, not only with this example referred from the book code. And, in the official Semantic UI website, I have seen that Angular 6 specific integration tool is not yet developed; I found only a implementation very old, referred to Angular 1.x.

How can I correctly (manually) integrate the Semantic UI in my Angular 6 application and how can I recall in my code a couple of very simple customized control? It were enough also a very simple example, with for example a Semantic-UI text field or a Semantic-UI button. Have you a very simple tutorial link or step-by-step?

Upvotes: 1

Views: 3086

Answers (1)

Zooly
Zooly

Reputation: 4787

In your Angular project :

npm install semantic-ui --save

angular.json file :

{ ... "styles": [ "node_modules/semantic-ui/dist/semantic.min.css", "src/styles.css" ], ... }

That's all !

EDIT : Now you can use Semantic UI CSS classes in your Angular project.

https://stackblitz.com/edit/angular-tfnnry

Upvotes: 5

Related Questions