| Documentation | Github Repository | Support |
Angular components for Semantic UI and Fomantic UI
This is the code for the test and documentation Angular application.
The core Angular components are here: /projects/mantic-ui
The Semantic UI Theme is here: /projects/semantic-ui
The Fomantic UI Theme is here: /projects/fomantic-ui
Install base package for angular and Semantic UI theme
npm i @mantic-ui/angular @mantic-ui/semantic-ui-angular
app.module.ts
import { SemanticUiModule } from '@mantic-ui/semantic-ui-angular';
@NgModule({
imports: [
...
SemanticUiModule
]
})
export class AppModule { }
app.component.html
<m-semantic-ui-theme>
<!-- Import common styles for site -->
<m-semantic-ui-site></m-semantic-ui-site>
<!-- Import reset to normalize values for CSS properties -->
<m-semantic-ui-reset></m-semantic-ui-reset>
<!-- Import local hosted lato font -->
<m-semantic-ui-lato-local></m-semantic-ui-lato-local>
</m-semantic-ui-theme>
As alternative for , you can use a CDN
<link rel="stylesheet" href="/sitelet?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fsemantic-ui%402.4.2%2Fdist%2Fsemantic.min.css">
Or install via Semantic Docs
angular.json
"projects": {
"<your-project-name>": {
"architect": {
"build": {
"options": {
"assets": [
// Copy all package assets to app asset folder on build
{
"glob": "**/*",
"input": "./node_modules/@mantic-ui/semantic-ui-angular/assets",
"output": "/assets/"
}
}
}
}
}
}
}
Original css from Semantic UI
The Fomantic UI theme is not yet ready. So it is not published. If you are interested, do not hesitate to write us and we try to get it ready soon!
Original css from Fomantic UI
Currently we are not yet done. So please do not expect a perfect framework
If you have a issue, look in our issue tracker on github
To support us fork our github repository
Direct contact (German, English) via email, WhatsApp or join our Discord server
m-example-code / m-example are bound to the ngx-highlightjs directive API, which is not
stable across majors. Up to v10 [highlight] took a languages array and auto-detected within
it; from v11 on [highlight] has a required single language and the array moved to
[highlightAuto], which is what these components use now. A mismatch does not fail the build —
the directive throws NG0950 at runtime and every code block on the page renders empty. So
ngx-highlightjs is not a free npm update: check the directive inputs, and keep the
peerDependencies range in projects/mantic-ui-doc/package.json honest about what the templates
actually bind.
The highlighted HTML is written in an animation frame. Nothing renders while the tab is hidden, which makes a headless or background-window check of a code block look like a bug.
Only register keys in classes that are really set as classes. The "Unknown attribute"
warning of BaseComponent already accepts every input of the component (read with
reflectComponentType), so registering an input name just to silence it is not needed and hides
typos. Directives have no public input reflection, so a
BaseDirective still only accepts registered classes and the global attributes. Keep the
otherwise empty super() constructors: without them Angular uses the inherited factory, which
injects null for useUiClass and drops the ui class.