D4mations.com

MdBootstrap Tutorial – Integrating Material Design, Bootstrap 4 & Angular 5

[ad_1]
https://i.ytimg.com/vi/m68xvSiuijE/hqdefault.jpg



Written Tutorial: https://goo.gl/3VQCNT
SUBSCRIBE for more! Check out https://coursetro.com

In this tutorial, I’m going to show you how to use MdBootstrap (mdbootstrap.com) to integrate with Angular 5. MdBootstrap allows you to quickly integrate Bootstrap 4 with Material Design specs in your Angular 5 app. It also works with jQuery, React, Vue, and other frameworks.

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

Original source

d4mer

,
, , , , , , , , , ,

43 responses to “MdBootstrap Tutorial – Integrating Material Design, Bootstrap 4 & Angular 5”

  1. Hi,

    Thank you.

    This is one of the awesome tutorial that I have seen. Really a great job.

    I have one question, I have found two commands for installing MDBootstrap.

    Can you/ anyone please tell me what is the difference between these two commands ?

    => npm install mdbootstrap

    or

    => npm install angular-bootstrap-md

    Thanks in Advance.

  3. Ok so an update to get this to compile successfully:

    – Regarding the angular-cli.json file, there is none as of Aug 2019. Use the angular.json file instead.
    – In this file, replace lines 2 & 3 that you are provided to add from Gary to the 'styles' section (as what was before excludes the 'assets' folder, and that there is no mdb-free.scss but an 'mdb.scss' file) as follows:

    "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",

    Next, regarding the animation you'll need to install another external library from MDBootstrap ( https://mdbootstrap.com/docs/angular/css/animations/ ) as follows:

    npm install animate.css –save

    …and add to the angular.json file an additional library under 'styles':

    "node_modules/animate.css/animate.css",

     Hope this works/helps for others.

  5. when we set up the project and serve it, it has occurred the following error. can you guide me what mistake I am doing?

    92% additional asset processing scripts-webpack-plugin× ｢wdm｣: Error: ENOENT: no such file or directory, open 'project_path_addressmdbs2node_modulesbootstrapdistjsbootstrap.min.js'
    at Object.openSync (fs.js:438:3)
    at Object.readFileSync (fs.js:343:35)
    at Storage.provideSync (project_path_addressmdbs2node_modulesenhanced-resolvelibCachedInputFileSystem.js:98:13)
    at CachedInputFileSystem.readFileSync (project_path_addressmdbs2node_modulesenhanced-resolvelibCachedInputFileSystem.js:259:32)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (project_path_addressmdbs2node_modules@ngtoolswebpacksrcwebpack-input-host.js:35:51)
    at Observable._trySubscribe (project_path_addressmdbs2node_modulesrxjsinternalObservable.js:44:25)
    at Observable.subscribe (project_path_addressmdbs2node_modulesrxjsinternalObservable.js:30:22)
    at SyncDelegateHost._doSyncCall (project_path_addressmdbs2node_modules@angular-devkitcoresrcvirtual-fshostsync.js:22:20)
    at SyncDelegateHost.read (project_path_addressmdbs2node_modules@angular-devkitcoresrcvirtual-fshostsync.js:49:21)
    at WebpackCompilerHost.readFileBuffer (project_path_addressmdbs2node_modules@ngtoolswebpacksrccompiler_host.js:129:44)
    at VirtualFileSystemDecorator.readFile (project_path_addressmdbs2node_modules@ngtoolswebpacksrcvirtual_file_system_decorator.js:42:54)
    at Promise (project_path_addressmdbs2node_modules@angular-devkitbuild-angularsrcangular-cli-filespluginsscripts-webpack-plugin.js:69:49)
    at new Promise (<anonymous>)
    at scripts.map.fullPath (project_path_addressmdbs2node_modules@angular-devkitbuild-angularsrcangular-cli-filespluginsscripts-webpack-plugin.js:68:24)
    at Array.map (<anonymous>)
    at hook (project_path_addressmdbs2node_modules@angular-devkitbuild-angularsrcangular-cli-filespluginsscripts-webpack-plugin.js:67:43)

  9. Hi sir…
    I use your tutorial to enbede mdb in my project but i got an error while starting the server errror is
    "additional asset processing scripts webpack plugin wdm: Error: NDENT such file or directory, open "G:langularrefreshinode modul
    eschart.JsVdist Charts

    Sir will you help me with this….

  16. Hi Simon, what a great video. I was able to replicate what you did here but failed when I tried to do sidenav. Please could you do a video on MdBootstrap sidenav or point me to an existing video if possible. Thank you for your work.

  20. Pasting from a post becasue someone may face this error because i faced the same.
    After upgrading to Angular 6, I encountered the "ERROR in No NgModule metadata found for 'AppModule'." with the angular-bootstrap-md package, which requires a tsconfig.json "include" as follows:

    "include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],

    After days of troubleshooting and hair pulling, the solution was to arrange the list so that the app.module.ts was located first, under "src/**/*.ts". An Angular bug, perhaps?

    "include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

    I genuinely hope this helps somebody, as I tried everything in this posting and nothing helped. After this change, everything compiles and works beautifully, as expected.

  21. Nice tutorial sir but i have getting error when I apply the steps in Angular 6
    there is no angular-cli.json file. I wonder if you would like to update a tutorial for Angular 6 and MDBootstrap. Thank's and keep up the good work sir 🙂

  22. Is MDB an alternative to installing Bootstrap 4? I'm currently using Bootstrap 4 with Angular 6 and the nav bar hamburger button/toggle button is not responsive (I even tried pasting the JQuery CDN). How do I use Bootstrap 4 with Angular correctly?

  23. Hey I wanna add a login pop-up in the navbar.. And I have created a separate component for login in which I have put the ready code in login. Html component.. Un able to bring the pop-up.. Pls help me with this

  24. After upgrading to Angular 6, I encountered the "ERROR in No NgModule metadata found for 'AppModule'." with the angular-bootstrap-md package, which requires a tsconfig.json "include" as follows:

    "include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],

    After days of troubleshooting and hair pulling, the solution was to arrange the list so that the app.module.ts was located first, under "src/**/*.ts". An Angular bug, perhaps?

    "include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

    I genuinely hope this helps somebody, as I tried everything in this posting and nothing helped. After this change, everything compiles and works beautifully, as expected.

  28. i created a project as you did in the video but my project is throwing some error like
    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

    91% additional asset processing scripts-webpack-plugin× ｢wdm｣: Error: ENOENT: no such file or directory, open 'C:Usersusernode_moduleschart.jsdistchart.bundle.min.js'
    can please tell why this is happening

  29. Why should i always get an error when i am doing what is in your video
    i always got node modules error file is not there but file is node modules i am using all are laterst versions
    node 8.9.4
    angular cli 6.0.8
    64 bit windows 7 os

  30. Hello, I'm following your instruction properly with your written tutorial as well. Unfortunately I couldn't run the project.
    After running ng serve I'm getting this error: "91% additional asset processing scripts-webpack-plugin✖ ｢wdm｣: Error: ENOENT: no such file or directory, open '/home/mamun/Webdesign/Angular Design/MDBOOTSTRAP/node_modules/chart.js/dist/Chart.js'"
    I checked angular.json file and there Chart.js file located in this way /chart.js/dist/Chart.js.
    What could be wrong for this error?

  34. i am trying to do same with fixed navbar with full background cover picture example in the md bootstrap tutorials. And the cover picture is not comign full page, i have tos eparately set the height feature in css. backround to cover does not work somehow. can someone pleasehelp _

  35. I tried using the full cover page background example, with angular 4 on visual studio code. But at run time, html element and body elements take only half of the browser height, resulting into the div tags also taking same height. Can you please help ? I tried setting background size to cover and 100% but still no luck. Mainly because the html and body tags itself are taking only half of the browser height !!

Leave a Reply