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


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

43 thoughts on “MdBootstrap Tutorial – Integrating Material Design, Bootstrap 4 & Angular 5

  • October 7, 2020 at 16:51
    Permalink

    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.

  • October 7, 2020 at 16:51
    Permalink

    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.

  • October 7, 2020 at 16:51
    Permalink

    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)

  • October 7, 2020 at 16:51
    Permalink

    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….

  • October 7, 2020 at 16:51
    Permalink

    i followed your steps. i am import mdbootstrap Double Navigation with fixed SideNav & fixed Navbar no more errors . but its not work . why?

  • October 7, 2020 at 16:51
    Permalink

    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.

  • October 7, 2020 at 16:51
    Permalink

    When I want to launch the browser I get "ERROR in no NgModule metadata found for ''AppModule". does anyone know the fix for this?

  • October 7, 2020 at 16:51
    Permalink

    Sir I have error in . I don't know how to solve . please help me. ENOENT: no such file or directory, open ' ..node_moduleschart.jsdistChart.js'

  • October 7, 2020 at 16:51
    Permalink

    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.

  • October 7, 2020 at 16:51
    Permalink

    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 🙂

  • October 7, 2020 at 16:51
    Permalink

    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?

  • October 7, 2020 at 16:51
    Permalink

    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

  • October 7, 2020 at 16:51
    Permalink

    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.

  • October 7, 2020 at 16:51
    Permalink

    I am not very good when it comes to design and I never really find frameworks etc. that fit my needs. Your videos are pure gold for that, it helps so much! Thank you for your videos!

  • October 7, 2020 at 16:51
    Permalink

    Thanks man.. this has helpful.. would love it if you also release MDBootstrap new Angular tutorials and installtion.. Great work done here

  • October 7, 2020 at 16:51
    Permalink

    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

  • October 7, 2020 at 16:51
    Permalink

    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

  • October 7, 2020 at 16:51
    Permalink

    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?

  • October 7, 2020 at 16:51
    Permalink

    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 _

  • October 7, 2020 at 16:51
    Permalink

    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 !!

  • October 7, 2020 at 16:51
    Permalink

    npm ERR! code E404
    npm ERR! 404 Not Found: angular-bootstrap-mb@latest

    npm ERR! A complete log of this run can be found in:
    Why?

  • October 7, 2020 at 16:51
    Permalink

    Great tutorial, except you missed to initialise Wow.js & also forgot to import wowjs, web animation js files. Without those, the ripple effects and animation won't work properly.

Leave a Reply