Hello everyone, I have an application built with jHipster 7.6.0 and I am trying to integrate Angular Material into it.
When I run the command ng add @angular/material, I encounter this error:
https://i.stack.imgur.com/J3ErS.png
The issue I am facing with installing material design is shown in the screenshot below:
https://i.stack.imgur.com/F7jy9.png
It seems like I am encountering a similar problem during the installation of Angular Material.
If you're looking to incorporate Material Design for Bootstrap 5 & Angular 13 into your project, here's a step-by-step guide:
Start by installing the MDB Angular UI KIT: npm i mdb-angular-ui-kit
Next, add the MDB stylesheet import to your
src/main/webapp/content/scss/vendor.scss@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
https://fonts.googleapis.com and https://fonts.gstatic.com in the content security policy rules of your src/main/resources/config/application.ymljhipster:
...
security:
content-security-policy: "... style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; ... font-src 'self' data: https://fonts.gstatic.com"
global.scss file:/* Error highlight on input fields */
.ng-valid[required],
.ng-valid.required {
border-left: 5px solid green;
}
.ng-invalid:not(form) {
border-left: 5px solid red;
}
.dropdown-menu to have its display set to none..dropdown-menu {
padding-left: 0;
display: none;
}
For reference, here's a screenshot showcasing these updates.
I'm working on setting up an ag-grid with columns for date, time, and location. Below is the code snippet: list.component.ts columnDefs: any = [{ headerName: 'Date', field: 'date', valueFormatter: (data: any) => { ...
Currently, I am utilizing ng-bootstrap to create my modals. I have been pondering the most effective approach to customize the modal window's HTML. The default appearance of the modal html is somewhat like this: <div role="document" class="modal- ...
After successfully uploading images into my firebase storage, I want to retrieve the downloadURL and add it to my firestore database. When console logging "url", I am able to see the desired link. However, I am facing difficulties in using it. When attemp ...
I am facing difficulties in testing a component with FormGroupDirective in the viewProviders section. I am unable to create a mock of the parent and set an empty formGroup. The component code is as follows: @Component({ (...) viewProviders: [ ...
I've been attempting to integrate ngx-owl-carousel-o into my Angular 11 application, but I keep encountering the following message in my console: There are no slides to show. As a result, the carousel will not be re-rendered. Unfortunately, nothing ...
I am currently developing an Angular 2 typescript application on my localhost. I recently encountered an issue when trying to access an external REST API in my application, resulting in the following error message: Cross-Origin Request Blocked: The Same ...
I'm experiencing an issue with my user component where it fails to update the form after making a restful call to retrieve user data. Even though the data is being fetched correctly and mapped to the model, the form does not reflect these changes. Th ...
I'm encountering an issue while attempting to execute npm install in the angular project directory obtained from ASP.NET Boilerplate. The error I'm facing is related to npm's inability to locate a specific file. D:\Dev\AspNetBoiler ...
I am currently developing a project using Angular 6 integrated with Electron. I have managed to successfully incorporate the electron-log library using ngx-electron. As a result, my application is functioning well and logging data to the default path: C:&b ...
In my Angular 8 project, there is a service function responsible for copying data. However, I encountered an issue where if I copy the data on a page, navigate to another page, and then return to the original page to copy the data again, it ends up duplica ...
I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...
Form elements that do not function properly with the formArray have been identified. Despite rendering, clicking on a button does not trigger any action. The editChoice() event fails to execute even when a break point is set in it. The controls also fail ...
I'm having an issue with switching the observable using the switchMap operator: return this.db.list(`UserPlaces/${this.authData.auth.auth.currentUser.uid}`, { query: { orderByChild: 'deleted', equalTo: false } }) .ma ...
Back with an intriguing predicament! Currently, I am in the process of developing an angular2 application using RXjs observable data stores to supply data to my app. Upon launch, if a user is logged in, the app resolvers fetch the relevant user data and po ...
Consider a scenario where I have a set of parent-child components in Angular structured like this: Child component class: export class ChildComponent { @Input() addTask:any; } Child component template: <button (click)="addTask('cleaning&a ...
I recently utilized the Angular CLI (version 12) to initiate my Angular project, but I noticed that the csproj file is missing. Is there a method to generate the csproj without compromising any of the existing files? Any help would be greatly appreciated ...
I am currently working on developing a Node.js API that is broken down into several small APIs (microservices) communicating with each other through requests and responses. Additionally, I am utilizing Angular for the frontend. My next step is to enhance ...
I started a project using angular cli. My intention is to incorporate scss into the project. In the terminal of WebStorm, I entered : ng set defaults.styleExt scss I proceeded by renaming all the .css files to .scss and adjusted the imports accordingly ...
I recently developed a chat application using Angular that utilizes the stomp socket from @stomp/ng2-stompjs. To display all messages, I am leveraging *ngFor. <p *ngFor="let item of messages" style="padding: 5px; font-size: 18px"> <span style ...
Is there a way to integrate Firebase Admin SDK into my Angular application? Currently, I am using Firebase Authentication services in my application and everything I need for user registration and authentication is handled by Angularfire2. I've read ...