Metronic

The World’s #1 Bootstrap 4 HTML, Angular 8, React & VueJS

Admin Dashboard Theme Framework

Angular

Overview

Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.

The default version theme has static CSS only components. Those components are by default available in the angular version as well. You can copy and paste the html and use it in angular components.

Angular with Full Demo Pages

Angular source code can be found in [metronic]/theme/angular/ and available in separate app in various demos.

Path Description
themeThe Metronic theme pacakge.
angularThe Angular's demo
demo1Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo2Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo3Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo4Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo5Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo6Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo7Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo8Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo9Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo
demo10Full Metronic's Angular application with sample pages. See Angular files structure below.
Demo URL See demo

Angular Files Structure

Angular source code can be found in [metronic]/theme/angular/[demo]/.
Below is the list of demo file structure in Angular app.
Path Description
distThe build output of Angular. This folder does not included in the package. Run command ng build to build it.
e2eEnd-to-end tests using Protractor. Visit link https://angular.io/cli/e2e for more info.
node_modulesThe package.json file in the app root defines what libraries will be installed into node_modules/ when you run npm install.
srcYour app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.
appMain app folder
coreThe core of theme
_baseContains the Metronic core elements: CRUD, layout and common services.
_configContains the main config for the theme of demo layout and internationalization configuration.
authApp authorization module core
e-commerceE-commerce module core
reducersNGRX main Reducer's file
core.module.tsImport list of core modules
viewView components
pagesDemos pages
partialsShared angular components
themeThe layout of the Metronic theme
asideLeft sidebar menu components.
baseBase component for the base layout.
brandThe brand logo component
contentContain layout builder components and custom pages. Eg. error page
footerFooter components.
headerHeader components.
subheaderSubheader components.
html-class.service.tsHTML class service for the HTML body, header, etc. based on the config.
theme.module.tsThe theme module for imports.
app.component.htmlMain app template.
app.component.tsMain app typescript.
app.module.tsMain app module. The place where to import and declare required components.
app-routing.module.tsBase routing for the app. Disable unused demo layout in this file to exclude the module.
assetsThis folder will contain all the Metronic core assets needed for the Angular application.
environmentsThis folder contains one file for each of destination environments, each exporting simple configuration variables to use in application
environment.prod.tsProduction environment config
environment.tsDevelopment environment config
index.htmlThe index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.
main.tsThe main entry point for your app.
polyfills.tsAngular is built on the latest standards of the web platform. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.
IE9, IE10 and IE11 requires to enable polyfills. Read more angular.io/guide/browser-support
style.angular.scssGlobal styles go here which styles that affect all of your app need to be in a central place.
test.tsVisit link https://angular.io/guide/testing for more info.
tsconfig.app.jsonVisit link https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more info.
tsconfig.spec.jsonVisit link https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more info.
tslint.jsonWhen using the CLI or many third-party tools, a file named tslint.json or tslint.yaml is used to configure which rules get run and each of their options. Visit link https://palantir.github.io/tslint/usage/configuration/ for more info.
typings.d.tsUse TypeScript type definition files—d.ts files—to tell the compiler about the libraries you load. Visit link https://angular.io/guide/typescript-configuration#typescript-typings for more info.
.editorconfigEditor configuration, see http://editorconfig.org
.gitignoreGit uses it to determine which files and directories to ignore, before you make a commit.
angular.jsonConfiguration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is built. Check out the official documentation if you want to know more.
package.jsonA package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
package-lock.jsonpackage-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json
tsconfig.jsontsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
tslint.jsonLinting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent.
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes! Jonathan Bartlett, Metronic Customer

Powerful Framework

Everything within Metronic is customizable globally to provide limitless unique styled projects

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 8 & React Support

Enterprise ready Angular and React integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

75,000+ Strong

Metronic is the only theme trusted by over 70,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is written with a code structure that all developers will be able to pick up easily and fall in love

The Ultimate Bootstrap Admin Theme Trusted By Over 70,000 Developers World Wide