3

I am new to Angular and I was wondering if it was possible to use angular form directives (tags?) like mat-error, mat-form-field, mat-button, etc in a normal html page; i mean not as a part of nodejs application. For example by adding the necessary css and js files in the head section of the html page.

I have spend hours to find an example on the net without any success. All examples I found are in combination of npm and nodejs. so I appreciate any suggestion.

By to way I am aware of the possibility of Angular tags discussed here: https://material.angularjs.org/latest/demo/input but this is not what I am looking for.

Improve this question
3
  • why not use a material framework? bootstrap-ui allows you to download a customized css and js to avoid including the components that you will not use Commented Apr 5, 2018 at 11:29
  • Are you using Angular Material or AngularJS Material? Please update your tags. Angular 1.x Material should now be named as AngularJS Material. Commented Apr 5, 2018 at 12:34
  • You can also use Material Design Ccomponents by Google, Material Design Lite by Google (although no longer supported), as well as Materializecss Commented Apr 9, 2018 at 5:39

2 Answers 2

Reset to default
4

If you want to use material components with pure HTML, you can have a look at other material frameworks, like MUI or Materialize, where you can simply import the JS file from a CDN and have access to all the usual components.

For example, this is a very basic template built with MUI, where the only thing you need is some HTML.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- load MUI -->
    <link href="//cdn.muicss.com/mui-0.9.39-rc1/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.muicss.com/mui-0.9.39-rc1/js/mui.min.js"></script>
  </head>
  <body>
    <!-- example content -->
    <div class="mui-container">
      <div class="mui-panel">
        <h1>My Title</h1>
        <button class="mui-btn mui-btn--primary mui-btn--raised">My Button</button>
      </div>
    </div>
  </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

MaterializeCSS its make you can use things like mat-error, mat-form-field, mat-button but if you want the same thing from Material.io you need install using NPM or Bower

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.