Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
MdBootstrap Tutorial – Integrating Material Design, Bootstrap 4 & Angular 5 | D4mations.com
  • Saturday , 31 October 2020

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

Code Canyon
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

3d Ocean

Related Posts

43 Comments

  1. Saurabh Mahajan
    October 7, 2020 at 16:51

    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.

  2. Ayush Gandhi
    October 7, 2020 at 16:51

    Why won't you create more course on angular?

  3. Dan W
    October 7, 2020 at 16:51

    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.

  4. stylaz95
    October 7, 2020 at 16:51

    This video is from 2018, how come he is using cli 1.6.6????

  5. Naman Jain
    October 7, 2020 at 16:51

    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)

  6. C Siwele
    October 7, 2020 at 16:51

    lol, love how you segue into your coursetro plugs.

  7. C DV
    October 7, 2020 at 16:51

    During creation of project, is –style="scss" mandatory ?

  8. Juan Esteban Katz
    October 7, 2020 at 16:51

    Hi, someone has the problem No NgModule metadata found for 'AppModule', I am using Angular CLI 7.3.8 Thanks.

  9. Navin vishwakarma
    October 7, 2020 at 16:51

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

  10. Himanshu Tiwary
    October 7, 2020 at 16:51

    Sir not working on Ubuntu but perfectly working on windows .. please help

  11. Froggen Fury
    October 7, 2020 at 16:51

    bg-blue and bg-pink had changed to blue or pink, for anyone getting white background

  12. Felix ASTO BERROCAL
    October 7, 2020 at 16:51

    please, repeat tutorial with Angular 7, please

  13. Nithya Kalyani
    October 7, 2020 at 16:51

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

  14. Daniel Burnside
    October 7, 2020 at 16:51

    really good tutorial thank you ive been looking for a way to use bootstrap and MD

  15. Raphael
    October 7, 2020 at 16:51

    How can i use that, With laravel and vue js, in laravel project?

  16. Kts Ng
    October 7, 2020 at 16:51

    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.

  17. WessTech
    October 7, 2020 at 16:51

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

  18. Bryan Bowman
    October 7, 2020 at 16:51

    +1 on the shirt!

  19. Anis Fathima
    October 7, 2020 at 16:51

    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'

  20. shubham sharma
    October 7, 2020 at 16:51

    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. Argyl Rebanal
    October 7, 2020 at 16:51

    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. Bailin Huang
    October 7, 2020 at 16:51

    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. Niriksha Mewade
    October 7, 2020 at 16:51

    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. Raj Kathal
    October 7, 2020 at 16:51

    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.

  25. Tobias Maier
    October 7, 2020 at 16:51

    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!

  26. Adebayo Taiwo
    October 7, 2020 at 16:51

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

  27. mohit nagar
    October 7, 2020 at 16:51

    Hello sir , my scss not work , if you have any solution

  28. Sreedhar Vutukuri
    October 7, 2020 at 16:51

    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. Vijay Kumar
    October 7, 2020 at 16:51

    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. almspb
    October 7, 2020 at 16:51

    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?

  31. Sangeeth VS
    October 7, 2020 at 16:51

    Could you please let me know the need of using MdBootstrap? Couldn't we just use Bootstrap & Angular Material?

  32. Moshiur Rahman
    October 7, 2020 at 16:51

    How install MDboostrap in angular6

  33. John Phel De Torres
    October 7, 2020 at 16:51

    Hope you make also backend application with laravel angular js.

  34. invinciblekd
    October 7, 2020 at 16:51

    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. Kuldeep Adhikari
    October 7, 2020 at 16:51

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

  36. Jason Limon
    October 7, 2020 at 16:51

    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?

  37. Anup Shekhar Sharma
    October 7, 2020 at 16:51

    Great Video. Thanks man

  38. Abhishek Kumar
    October 7, 2020 at 16:51

    Thankyou so much
    First ui i created by this video

  39. Digamber Singh
    October 7, 2020 at 16:51

    Thanks for this tutorial, helped a lot !

  40. khawaja Umair
    October 7, 2020 at 16:51

    Awesome .. But your speed is little bit fast.

  41. Sayantan Roy
    October 7, 2020 at 16:51

    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.

  42. Ivelin Ivanov
    October 7, 2020 at 16:51

    love your tutorials man, keep coming back to this video for reference every time I do a new install 😀

Leave A Comment

You must be logged in to post a comment.