Implementing angular-material-design into an Angular 4 application with the help of Angular CLI

Is there a proper way to use bootstrap-material-design in an Angular 4 app with Angular CLI?

In my project, I included the css file in my styles.css like this:

@import "~bootstrap-material-design/dist/css/bootstrap-material-design.min.css";

Although I can access the bootstrap-material-design classes, some elements such as inputs are not functioning correctly.

I've tried adding the jQuery and bootstrap-material-design scripts to the .angular-cli.json file, but it didn't solve the issue.

According to the documentation, I need to initialize the material JavaScript on my site by adding the following script:

$.material.init()
jqueryangulartypescriptangular-clibootstrap-material-design

Answer №1

After successfully installing the library with this command:

npm install --save bootstrap-material-design

You can now easily link all the necessary CSS and JS files to your project.

To accomplish this, update your angular-cli.json file with the following entries in the respective arrays: styles for the CSS and scripts for the JS files.

  "styles": [
    ...
    "../node_modules/bootstrap-material-design/sass/bootstrap-material-design.scss"
    ...
  ]

  ...

  "scripts": [
    "../node_modules/bootstrap-material-design/scripts/index.js"
  ]

Hopefully, this solution will work smoothly for you!

UPDATE:

If you're looking for an easier way to implement Material Design, consider using this option:

https://github.com/angular/material2

This is the official material design package that is well-integrated with the Angular framework.

Answer №2

Gratitude goes out to Nano for his helpful answer.

To incorporate my styles and scripts in angular-cli.json, I followed this structure:

    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.min.css",
        "styles.css"
    ],
    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/bootstrap-material-design/dist/js/material.min.js"
    ]

Next, bootstrap-material-design initialization is crucial. It should be done post-context initialization. For me, accomplishing this within a ngOnInit() method was ideal. I implemented it in my app.component.ts as follows:

import { Component, OnInit } from '@angular/core';

declare let jQuery: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
    ngOnInit() {
        // Init bootstrap-material-design
        jQuery.material.init();
    }
}

The result is just as desired - normal inputs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove child elements in Jquery that do not match the specific numbers saved in the array

I've got this array: var numbersArray = [1, 2, 4, 5] and also an unordered list in HTML <ul> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> <li> item 5 ...

javascriptjqueryarrays

Using PHP, find the number of div elements within a parent div and then determine the code to add based on the summary

Seeking assistance with creating PHP code that can count the number of divs inside a parent div and add additional code if the inner divs match a specific count. The HTML structure is as follows: <div class="row-fluid str_category"> <div cl ...

phpjqueryhtml

What is the best method for incorporating a private key into a service without exposing it in the front-end code?

I am currently working on incorporating a private API key into a service by fetching it from a secure endpoint on the server. However, I am unsure of the correct approach to integrate this key into the required service. Confession time - I'm feeling ...

angularhttp-headersangular6

Expanding upon TypeScript by inheriting interfaces

My goal is to create a User module with multiple classes such as UserDetail, UserResetPassword, and more. These classes will have some common properties that need to be shared. One approach is to declare the properties in each class and initialize them in ...

ooptypescriptinheritance

Simple steps to rearrange columns in a material table in Angular without affecting functionality

Is there a way to rearrange the order of columns in a material table with data being obtained from an API in JSON format? I need to dynamically generate headers and columns based on the API data. https://i.sstatic.net/Kh9ZO.png ...

angularangular-materialmaterial-tableangular-material-table

JavaScript dialog on top of a flash video

I have a unique system in place: Upon opening the main site, a flash image gallery appears. When a user clicks on an image, I utilize Flash's "ExternalInterface.call" function to invoke a JavaScript function that opens a Java dialog modal called NyroM ...

javascriptjqueryajaxflashdialog

Retrieve category descriptions in Angular using their corresponding IDs

During the edit form process, I am sending categories by ID but displaying them as descriptions in options. Here is an example: new-campaign.html <mat-label>categories</mat-label> <mat-select multiple formControlName="VehicleCa ...

angular

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

Error in Directive: NgControl Provider Not Found

I encountered an issue with my Directive while attempting to inject 'NgControl' and received a 'No provider for NgControl' error. Here is the structure of my File Directory: app folder |--directives folder |--myDirec ...

angulartypescript

displaying variables in tooltips along with their translations

Could you please assist me with this tooltip issue? It seems to be malfunctioning. <div class="btn-edit-nounderline" matTooltipClass="custom-tooltip" (click)="edit(row.widgetAccess)" title="{{getTitle(row.widgetAccess ...

htmlangulartypescript

Mistakes encountered during jQuery's XML interpretation

I am curious about the type of information that jQuery can provide when parsing XML. Check out this example. Here is the summary of the error message: Error: Invalid XML: This isn't valid XML at all. You can also retrieve the error message using ...

jqueryxmlerror-handling

The SourceMap in DevTools encountered a parsing error with the message: "chrome-extension

It's been about a week since I first noticed warning messages appearing in my Google Chrome console. https://i.sstatic.net/Aurgz.png Clearing the cache hasn't made a difference; the messages only vanish when in incognito mode. Any suggestio ...

javascriptangulargoogle-chrome

Tips for transitioning from Angular 4 to Angular 5

As a newcomer to Angular, I recently launched a project using Angular CLI. However, a new version has been released since then. I am looking to update my project to the latest version of Angular (v5). How should I go about migrating it? ...

angular

Just starting out with JS, curious if it's possible to transform these circles into diamonds instead

My goal is to transform this animated field of blinking circles into rectangles or diamonds, whichever is easier. Link: http://jsfiddle.net/Jksb5/1/ HTML <canvas id="pixie"></canvas> JS var WIDTH; var HEIGHT; var canvas; var con; var g; va ...

javascriptjquerycanvas

Discovering the various value types within a double-nested object in TypeScript

My query has similarities to Types from both keys and values of object in Typescript, however, I am adding another level of nesting: interface Outer { a: { b: number }, c: { d: string } } I am specifically interested in obtaining the unio ...

typescript

What is the best way to collapse all other nodes within a bootstrap4 list?

My goal is to implement a Bootstrap 4 event that collapses expanded lists in a navigation bar, ensuring that only one list is expanded at a time. The challenge is that the list is hierarchical, with items that can contain sub-lists. The current code only ...

jquerybootstrap-4

Looking to update the background color of a div every 3 seconds?

Every 3 seconds, I need to change the background color of each div. To do this, I attempted to modify the values in the color array every 3 seconds. For example, the value at index 0 (which is "red") would move to index 1, then the value at index 1 would ...

javascriptjqueryhtmlcss

The magic of $.ajax lies in its ability to load an unexpected URL, diverging from my original

Every time I send a request using an absolute URL, Ajax is posting the wrong URL. For instance, when I request "http://localhost/app/home/session", it mistakenly calls "http://localhost/app/home/home/session" var baseURL = function(link) { var url = & ...

javascriptjqueryajax

Dropdown element with PrimeNG adorned with a span

I am trying to create a simple form with text inputs and dropdowns. I have successfully implemented the textInput, but I am struggling with the dropdowns. Below is the code that I have so far: <div class="p-grid p-dir-col p-offset-2"> ...

htmlcssangularprimeng

Is there a way to convert TSX source code into regular TS code?

I am in need of the functionality offered by @babel/plugin-transform-react-jsx, while keeping all types, TypeScript language features, ESNext syntax, comments, etc. I aim to convert TypeScript XML-formatted code into plain TypeScript using a specific JSX ...

reactjstypescriptbabeljstsx