Create Angular project with material design
> ng new angular --strict-false
If we add above command in terminal strict mode removed in angular project.
First will install bootstrap libraries
> npm install bootstrap --save
after install bootstrap please install below command also, due to if not install below command not working dropdown with button and dropdown list in our application.
> npm install @popperjs/core
package.json
--------------
"styles": [
"src/styles.css".
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts":[
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
after install bootrtrap will install angular meterial install.
> ng add @angular/material
After installation @angular/material below added new line in styles array
package.json
--------------
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts":[
"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
index.html
------------
Default display in body tag like below added
<body class="mat-typography">
<app-root></app-root>
</body>
Note:- Please remove class="mat-typography" (if you use this class every time override bootstrap classes.)
<body>
<app-root></app-root>
</body>
then enter below command in terminals
> ng serve -open
(or)
> ng serve -o
once run the application index.html will go to angular.json then control will go to main.ts file
After install angular material will got some time below error
c:\Users\<systemname>\AppData\Roaming\npm\ng.ps1 can not be loaded because running scripts is disabled on this system
once remove this file "ng.ps1" will not get any error
