I am in the process of developing an Angular-based application. ISSUE: I included md-stretch-tabs in my md-tabs element, but when I switch to tab#2, the tab retracts as if there is not enough space to flex. Is this problem related to dependencies or the c ...
Utilizing angular and angular material, I'm creating a mat-grid-list using the following code: template <mat-grid-list cols="2" [rowHeight]="rowHeight | async"> component rowHeight = this.breakpointObserver.observe(Breakpoints ...
I need help styling my mat-tabs to achieve a specific look. Here is the design I am trying to replicate: https://i.stack.imgur.com/tg6XC.png https://i.stack.imgur.com/tth0z.png However, I'm encountering an issue where the white border under the curr ...
While using angularJs and implementing ngView, it's known that scroll position is maintained when navigating back and forth between different views. However, I've incorporated angular material directives like md-toolbar and md-content in my views, but unfo ...
I recently integrated a material progress bar into my Angular project. Here is the code snippet: <mat-progress-bar mode="determinate" value="40"></mat-progress-bar> However, I encountered an issue where upon page refresh, ...
Currently, I'm facing the challenge of integrating a Scanner device with my Angular application. On one of the pages dedicated to scanning, users are able to view an alert indicating the connection status of the Scanner as well as any scanned documents. ...
I've been working on a Login and Registration Page in Ionic 5. I wanted to showcase error messages beneath the input text field like shown in this example https://i.stack.imgur.com/d83ZV.png Thus, I integrated Angular Responsive Forms into my project. ...
I recently installed Angular 10 along with Angular Materials using the command ng add @angular/material I opted for the custom theme: Purple/Green The next step was to add a Toolbar by simply copying and pasting code from Google's site. However, I am hav ...
I was trying to implement a way to disable the selected mat-tab and its elements when a button is clicked, //HTML <mat-tab-group #tabGroup> <mat-tab *ngFor="let subject of subjects" [label]="subject.name"> {{ subject.name }} ...
Inside the Angular application I'm working on, there is a toolbar component that consists of three different links. The first link directs to the main app page, while the other two lead to distinct components within the app. Each link is styled with class= ...
I need to show an error message that says Please enter valid email. when an invalid email is entered, but I cannot use the ng-pattern attribute with this specific regex pattern. <md-input-container class="md-block" flex-gt-xs> <label>Ema ...
I've been struggling to set a background image on my mat-dialog, but for some reason it's not showing up at all. I attempted using a panelClass as well, but still no luck. .custom-panel .mat-dialog-container { background-image: url("../. ...
For quite some time now, I've been attempting to adjust the number of items in a mat-autocomplete without any luck. My project involves using material.angular.io Below is a snippet of my code import { Component, OnInit } from '@angular/core&a ...
Greetings! I am currently in the process of developing an app using angularjs (1.5.0) and following jonhpapa's rules for best practices. In addition, I have incorporated angular material 1.0.6 into the project. However, I have encountered an issue when tr ...
Attempting to design an Angular Form for editing a record. When the user navigates to this edit form from the records list page, I aim to populate the fetched record from the API into the form elements while it loads. Utilizing the patchValue method within ...
After upgrading Angular Material to version 9, I encountered an issue where a bottom border appears under the sorted column heading in my mat-table. Strangely, the border disappears when clicked upon. Upon inspecting the browser's CSS, I discovered that t ...
Presenting a catalog of products, showcasing available products along with all related rate plans. Each rate plan includes a toggle button for adding the product + rate plan to the order. Below are the functions used to add and remove items from the order ...
My Angular 7 application includes a Material Design form with input text fields, and I have not implemented any autocomplete feature within the code. Despite deleting all navigation data from my Chrome browser, I am still experiencing autocomplete suggesti ...
Issue with dropdown position: The dropdown should display below the select element, but when selecting the second value, it appears on top of the select element. I have removed any relevant CSS to troubleshoot, but the problem persists. See screenshots for ...
I'm currently working on a unique form element that combines checkboxes and radio buttons to create a multi-level selection feature. For instance, you can use it to configure properties for a car where a radio option (Digital or FM) is dependent on t ...
Currently, I am in the process of developing a single page application using Angular 2. Within this project, I have implemented angular material mat-sidenav and mat-toolbar components. The toolbar includes a sidenav toggle button, as well as buttons that a ...
Here is a unique link you can check out: https://stackblitz.com/angular/nabbkobrxrn?file=src/app/cdk-drag-drop-enter-predicate-example.ts. In this example, I have specific goals: I want to be able to select only one number from the "Available numbers" l ...
When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...
I recently deployed my Angular Application on a server and encountered an issue with the Angular Material table. Despite data being present in the logs, it does not display on the table. This problem only occurs in production, as everything works perfectl ...
I'm currently tackling a challenge in my personal Angular project that utilizes Angular Material. I'm struggling to find a solution for the following issue: For instance, I have a lengthy text passage like this: When you take the Dodge action, you focus ...
I am facing a simple issue where I need to display strings with spaces like "st ri ng" in rows within a material data table. However, the spaces are being trimmed and I cannot figure out how to keep them intact. Here is a demo on stackblitz: https: ...
I have designed a mat expansion panel and I would like to ensure that only one panel can be expanded at a time. In other words, I want it so that when one record is expanded and I click on another record of the mat expansion, the previously expanded reco ...
My implementation involves a dialog controller: .controller('loadingDialogCtrl', function($scope, $mdDialog, $rootScope, loadingDialog) { $scope.loadingDialog = loadingDialog; }); In another controller, I use the dialog controller and manipulate it u ...
After reviewing the HTML snippet provided below, it is evident that there is a table with looping through mat cell using *matCellDef="let model". Inside each cell, there are input fields which are reactive forms. Each row or cell needs to have it ...
If I were to implement a material datepicker with a selection strategy, I would refer to this example There are instances where the selection strategy should not be used. The challenge lies in setting the selection strategy conditionally when it is insta ...
Seeking Guidance: What is the recommended approach for locating the Virtual Repeaters in Protractor? A Closer Look: The Angular Material design incorporates a Virtual Repeater to enhance rendering performance by dynamically reusing visible rows in the v ...
Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, t ...
Hey there! I managed to create a select element that displays the current year, 5 years from the past, and 3 years from the future. But now I need to figure out how to make the current year the default selection using Reactive Forms. Any ideas on how to ac ...
Creating a loop to generate objects. Action.ts public campaing:any = { 'id': '', 'campaing_code': '', 'campaing_type': '', 'start_date': this.currentDate, 'end ...
Currently, I am using a mat auto complete text box with a search icon that is aligned to the left of the input. I am looking to align this search icon to the right instead. Can anyone provide assistance on how to achieve this? <mat-form-field floatLa ...
I need help adding the FULLCALENDAR feature to my Angular v14 project. Despite going through all the necessary setup steps, I encountered an unexpected error. Can anyone provide guidance on how to resolve this issue? package.json "@fullcalendar/angul ...
Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While material but ...
How can I disable future dates in Formly with Material datepicker in Angular? Despite searching online, I am unable to find a solution! export class AppComponent { form = new FormGroup({}); model: any = {}; options: FormlyFormOptions = {}; fields: ...
I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...
Can anyone help me figure out how to recreate this design using Flex within my Angular2 materialDesign stack? https://i.stack.imgur.com/le1ld.png Currently, I'm facing an issue where blocks 2 and 3 keep ending up below block 4... https://i.stack.im ...
I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...
Recently, I've started working with angularCLI and I'm facing an issue in creating a table where the dataSource is fetched from a fake API. Let me share my component class: import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormContr ...
I am currently facing issues with implementing mat-select-autocomplete in my project. Firstly, I have noticed that the function's (selectionChange)="getSelectedOptions($event)" is triggered every time I click on mat-select-autocomplete. Is there a way to ...
Hey everyone, I recently updated my project to node version v14.18.0, but now I'm encountering a "module not found" issue (see screenshot below). Any suggestions on how to resolve this? https://i.stack.imgur.com/k0u82.png ...
As stated in the Angular Material Documentation, it is necessary to include the entire theme in order for the framework to function properly. This entails styles for all components. However, I am creating a component library and only pulling specific comp ...
I am currently working on implementing inline editing for a mat table. I found a helpful guide at this link. When I try to edit the second row on page 1 (the edit symbol icon changes), and then move to the next page without saving the changes, the second r ...
Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. It see ...
When filtering an array based on multiple selections from a mat-select, everything works smoothly except for one issue - if I select an option and then deselect it, the entire array disappears from the UI. However, if I select a few other options after tha ...
Check out the Angular Material Documentation Site passing {} to the Homepage route: {path: '', component: HomePage, pathMatch: 'full', data: {}} I'm interested in knowing the significance of data: {}. Recent Discovery Closer ex ...
I have implemented a mat-menu to showcase a list of choices for the user. The objective is to trigger the submission of my formGroup when a user selects an option from the menu. dropdown.component.html <form [formGroup]="myForm" (ngSubmit)=onSubmit(my ...
Despite reading numerous blogs and conducting extensive searches on Google, I am still unable to resolve the CSS issue related to Angular material below. Your assistance in fixing this problem would be greatly appreciated. Desktop view: https://i.stack.im ...
In one of my projects, I have implemented a polling system where users can choose a question from a list and then proceed to the options page. On the options page, users can select their answer choices and submit their responses. The results are then displ ...
I am currently working on implementing a feature where I need to show unique options for the select using angular material. Below is what I have so far: where appitem is an array of items. <mat-form-field> <mat-select placeholder="Select app ...
I am currently working with angular version 1.6.2 and angular-material version 1.1.4. Below is the implementation of a component I am using for $mdDialog: class CommentReplySettingsController { /** @ngInject */ constructor($mdDialog, $log) { this. ...
I am working with two components, namely Order and OrderDetail. Within the Order component, I have a MatTableDataSource that gets populated from a service. OrderComponent Prior to the constructor listData: MatTableDataSource<DocumentDetailModel>; ...
In my application, I am working with a MatTable that has a datasource consisting of AbstractControls (FormGroups) to create an editable table. At the end of each row, there are action buttons for saving or deleting the elements. My goal is to implement tr ...
I attempted the code below, but it only works for angular material 11. My requirement is to use only angular material 10. providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ] There are many ma ...
Currently, the application does not utilize any forms. I am interested in making the input field invalid under certain conditions within the component. For example, if a user leaves the input field blank, I would like the bottom outline to turn red when an ...
I've encountered a strange issue with the current version of the Material Angular DatePicker. After upgrading from A5 to A6, it started to parse my date one day earlier than expected. You can see an example of this problem here: https://stackblitz.com/edit ...
Here is the code snippet I am working with: <mat-form-field> <mat-select [(ngModel)]="valueFromDB.name"> <mat-option>None</mat-option> <mat-option *ngFor="let option of options" [value]="option. ...
When trying to open a mat-autocomplete in Angular Material, I noticed that the background content is still able to scroll. I attempted using the block strategy but it didn't have the desired effect. ...
Is there a way to dynamically set options based on the form control name in Angular? For example, if we have a countries dropdown, we typically assign all countries to a specific variable and iterate over them using *ngFor. I am looking to change the opt ...
In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so far n ...
I am working with an Angular Material table that has rows with checkboxes. To view the example of this, please visit Material Table. I would like to perform a manipulation on other fields based on the checkbox selection status of a row. ...
Looking for a way to display user roles in Angular using a mat-table that were previously selected with <mat-select>. When I use a regular <select>, a new entry shows up in the table, but the styling is not ideal. <label>Role</labe ...
Material has introduced a new density component modifier (Check out the links here and here). After importing material/density, I followed the recommended code structure in my scss file: @use "@material/button"; .my-custom-button { // Adjusts ...
https://i.stack.imgur.com/32kfE.png When scrolling, the Sidenav is not expanding to take up 100% of the screen and it continues to scroll along with the page content. <div layout="column"> <section layout="row" flex> <!-- siden ...
A complex Angular table structure has been implemented with three columns. Each column header contains an input field for Stock Number, Case, and Availability. Users have the flexibility to search using a Single Input (Stock Number OR Case OR Availability ...
When attempting to load a large amount of data into a MatTableDataSource, I am facing an issue. I would like to display a loader until the data is fully set, but I am unsure of when that happens. I attempted to use a promise like this: return new Promise(r ...
I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...
I am attempting to develop a custom form control by implementing MatFormFieldControl, ControlValueAccessor, and Validator interfaces. However, I encounter issues when including NG_VALUE_ACCESSOR or NG_VALIDATORS. @Component({ selector: 'fe-phone-n ...
As I work on my project utilizing angular 6 with Spring-boot, I have encountered an error that I am struggling to resolve. Specifically, the error message reads: Uncaught ReferenceError: process is not defined at Object../node_modules/util/util.js (ut ...
I have been working on customizing the style of an Angular Material input. So far, I successfully altered the background-color with the following code: md-input-container { padding-bottom: 5px; background-color: #222; } I also changed the placeh ...
I included the MatFormFieldModule in my code like so: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; ...
I'm facing an issue with displaying data in an HTML table using an API. I've tried to implement pagination to show 3 or 6 rows per page, but it's not working as expected. Currently, all the data is being displayed without any pagination, whe ...