Here's a simple question - how can I create a button with both icon and text in material 15? <button mat-button> <mat-icon>keyboard_arrow_left</mat-icon> Back To Home </button> https://i.stack.imgur.com/Llhx1.png However, the ...
I am facing an issue with my predefined model (selectedVegetables) in connection with an md-select. It appears to be not functioning properly when the model already contains a key and value pair. You can view the code sample here: Code Pen. Here is a snip ...
Having trouble getting the mat sort functionality to work on my table, as it keeps showing as undefined. I've tried various solutions from the documentation but nothing seems to be working for me. (I have removed ngIf, changed static to false, and tried u ...
I am completely new to AngularJS and I want to incorporate the material design version of AngularJS for developing a form. I followed the beginner's guide and attempted to create something, but it didn't turn out like the one on the website. So, ...
I am faced with two scenarios: The first scenario involves using a FORM GROUP with Angular 5 and Angular Material Design. Below is the code for handling multiple checkboxes: <div *ngSwitchCase="'checkboxField'" class="checkbox-field"> <div *n ...
I am facing a new challenge and feeling unsure about how to approach it. The issue at hand is filtering a table based on the date range obtained through the ngx-daterangepicker-material library. This library triggers events that provide a start date and a ...
I've searched for various solutions, but none seem to work with mat-list. It's crucial for me because mat-list is the only solution where drag&drop functionality works (I always face this issue with mat-table in tables and I can't find a ...
Whenever I try to change the appearance of the form field to outline, the floating label ends up breaking the outline. Here is a code snippet for reference: <mat-form-field appearance="outline"> <mat-label>Password&l ...
Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...
Incorporating angular 6 along with angular-material, I am striving to trigger the matMenu by right-clicking in order to utilize it as a context menu. The present structure of my code is as follows. <span #contextMenuTrigger [matMenuTriggerFor]="context ...
I'm currently working on implementing the Material autocomplete component with filtering using my own array of values. However, I encountered the following error: core.js:1624 ERROR TypeError: You provided an invalid object where a stream was expecte ...
I have a specific requirement for managing the opening and closing of my mat-expansion-panel. In my implementation, I want to rely solely on the panel's [expanded] input property to control its state. To achieve this, I am using NGRX as my state management ...
Is it possible to show a mat dialog on top of another mat-dialog component? I have a grid with an edit button, and when the user clicks on it, an Edit Dialog window opens for editing data. If the user wants to close this window without saving, I want to di ...
I have recently created a project using Yeoman (angular-fullstack, angular-material) and encountered an issue with triggering the md-dialog box. When clicking on a div element, the dialog box is supposed to appear. However, instead of showing the popup the ...
I have designed an interface that includes another interface: export interface Parent { children: Child[]; } export interface Child { identifier: string; data: string; } Is there a more efficient way to initialize and add items to the array? Curren ...
My button group consists of 3 radio buttons for filtering data, and I would like to have a specific button selected by default when the page loads. Below is the code snippet: <md-radio-group ng-model="status" aria-label="filter" ng-model="status" name ...
Is there a way in Angular to highlight mat-list-item elements with red color when clicking on Notification, Dashboard, or Comments? <mat-list> <mat-list-item style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item ...
Could it be that I’m starting this project from scratch using Angular Material 10, a framework I’m not familiar with yet, or am I simply missing something? My mat-table isn’t showing up on the page at all, which is completely new to me. Here’s the ...
I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...
I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...
I am working on an Angular6 form that includes a field for email input. Currently, the email field has proper validation which displays an error message when an invalid email is entered. However, even if the error message is shown, the form is still saved ...
Hello everyone, I'm new to posting questions on Stack Overflow and I'm seeking some assistance with an issue I'm having with Mat-Tree. Despite the fact that my data is present when I console log it, the children are not appearing. I am fetching the data f ...
I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...
Is it possible to initiate an http request before another ongoing http request finishes (For example, fetching a token/refresh token from the server before the current request completes)? I successfully implemented this functionality using Angular 5's htt ...
I am working on a basic form that includes an input field with autocomplete using Angular Material components. The issue I am facing is that when I select a value from the autocomplete box, the input field displays [Object object] as the value instead of t ...
I have integrated the mat-select-filter library in my Angular project, but I am facing an issue with the displayMember filter. Currently, it only filters by code, but I would like it to also filter by name simultaneously. Is there a way to achieve this u ...
Is there a way to customize the font style for the panel header, title, and content in mat-expansion? ...
I've encountered an issue with my code in Angular 7.3.9, here's the snippet; import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { ToastrService } fr ...
Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content layout- ...
I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...
Our list of document numbers is completely unique, with no duplicates included. I am attempting to implement a feature in Angular Material that automatically selects the unique entry when it is copied and pasted. https://i.stack.imgur.com/70thi.png Curr ...
When attempting to utilize checkboxes to filter data in a material table, I ensured there were no errors present on my terminal or console. However, upon checking a checkbox in the browser, an error message stating "nameValue.toLowerCase is not a function" ...
Why isn't the menu item highlighted when clicked on? Check out the screenshot below: https://i.stack.imgur.com/ZLZAG.png <div ng-controller="DropdownCtrl as ctrl"> <md-menu> <md-button aria-label="Menu" class="md-icon-bu ...
I am currently working on an Angular 7 app and I am facing an issue: I cannot hide the data in the column for Company Name. The field "Name" in the report control JSON is labeled as Company Name. The report control is a table that contains various fields ...
Currently in the process of setting up an Angular and React project within a Nx monorepo workspace. Encountering trouble while attempting to install Angular Material using npm i @angular/material I'm running Angular v16. Below is the specific error message ...
I have been using ngModel and formControlName together, which is causing a warning to appear in the console. I am trying to resolve this issue by removing ngModel, but I'm unsure of what to replace it with. I've attempted a few solutions, but none seem to ...
Currently using Browser - Chrome 67.0.3396.99 In my DialogsModule, I have a component called ConfirmDialog.component.ts that utilizes the template confirm-dialog.component.html confirm-dialog.component.html <mat-dialog> <mat-dia ...
I am experiencing an issue with searching while using ngx-mat-select-search. I am able to display the options, but when I try to type in a search query, nothing appears on the screen. Can anyone provide assistance? Below is the code snippet: <div *ng ...
I am working with an angular material stepper, where I need to validate user selections at each step before allowing them to proceed. The first step displays a list of 'deliveries' for the user to choose from, and I want to ensure that at least one deliver ...
I am a beginner in Angular and I am using Angular 10 to design a simple page with a side bar and footer using Angular Material components. I am encountering an issue with displaying the left side navigation correctly as it is currently being duplicated. Be ...
My data table contains a list of items with a row at the end showing the totals. | name | value1 | value2 | --------------------------- | Emily | 3 | 5 | | Finn | 4 | 6 | | Grace | 1 | 3 | | TOTAL | 8 | 14 | I've c ...
In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...
When the user clicks on the Date column for sorting, it is required to exclude empty rows from the sorting. Empty rows are present due to the application of ngIf on those particular rows. The requirement states that rows with empty column values should eit ...
https://i.stack.imgur.com/cDQY7.png <ng-container matColumnDef="scheduled"> <th mat-header-cell mat-sort-header *matHeaderCellDef> Scheduled </th> <td mat-cell *matCellDef="let station"> ...
I am attempting to dynamically adjust the height of a dialog box in order to ensure all content is fully displayed within it. Additionally, I am looking to decrease the top padding of the modal to maximize available space.... Any suggestions on how I can ...
Is there a way to apply an 'or' filter on a MatTable? For instance, I have two independent search fields and want to filter the data if it matches either of them. Can this functionality be achieved by default or would I need to create a custom filter predi ...
I am encountering an issue with a mat-select in my Angular application that has multiselect enabled. Within the mat-select, there is an input used for filtering available options. The problem arises when I select some options, filter using the search inp ...
Trying to implement a Select Header is giving me the error message "Error: md-input-container can only have one child input, textarea or select element!" This is the code causing the issue: <md-input-container> <label>Vegetables</l ...
I have spent countless hours trying to find clear documentation on setting up an Angular Material app with a theme, including changing the theme dynamically. Despite searching through numerous search results and visiting various pages, I have not been able ...
I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig. Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (jus ...
My current task involves dynamically creating multiple <mat-select> elements based on the number of "tag types" retrieved from the backend. These <mat-select> elements are then filled with tag data. Users have the ability to add new "tag types, ...
https://stackblitz.com/edit/dynamic-columns-mat-table This is the current status of my table implementation. The table renders perfectly, but my need is to dynamically set column names without prior knowledge. For instance: Instead of ${element.descript ...
In the process of configuring angular material for my Angular (4) application using webpack, I discovered that including a default theme is necessary for it to function properly. One of the recommendations provided in the documentation is to use @import ' ...
I've been working on a micro front end project and running into some issues with opening modal popup windows. I've tried both the Angular material and bootstrap approaches, but ran into problems with both. With Angular material, the popup window appears be ...
Just starting out with Angular and trying to implement pagination for mat-cards instead of just tables. I have a lot of code and want to display only 8-10 cards per page. How can I achieve this? Below is my HTML and TypeScript code. .html file <div cl ...
After updating Angular Material to version 15, I noticed that I can no longer apply custom coloring to the material tooltip. Here is an example code in .html: <button mat-raised-button matTooltip="Tooltip message" matTooltipClass="cu ...
Within a web app, I am utilizing the Dialog component from Angular Material. The Dialog consists of only a textarea that is initially empty. I aim to automatically focus on the textarea when the user opens the modal dialog. How can I achieve this? Despite ...
I'm struggling with positioning content next to the tabs on the right side. I attempted placing content in a disabled mat-tab, but I don't want the content (located on the right) to be disabled. In addition, the content includes a dropdown menu. Refer t ...
I'm currently working on developing a unique abstract table component that utilizes the MatTable component. This abstract table will serve as a child element, and my goal is to pass a custom interface (which functions like a type) from the parent to the ch ...
I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...
In this example, I am attempting to make the first occurrence the default: plunkr However, I encountered the following error: Unhandled Promise rejection: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("dBu ...
export interface post { id: number; title: string; published: boolean; flagged: string; updatedAt: Date; } ...
Is it possible to have the progress bar updated in real-time without having to reload the page every time? <mat-progress-bar *ngIf="row.stage === 'importing_in_progress'" class="exchange-files__progress-bar" mode=&quo ...
I am encountering an issue with my material angular mat-tree based application. The code runs without errors, but the values are not displayed on the screen. I need help resolving this problem so that I can proceed with the development. Upon opening the a ...
I am using material with angularjs and have encountered an issue with my two md-tabs. Both tabs have a similar DOM structure, but contain some unique content. Instead of duplicating the common DOM twice, I am looking for an alternative solution. Is it poss ...
Struggling to include a chip list of Angular material within an Ng form? Unable to add a new chip list upon button click and uncertain about displaying the value of the array added in the new chip list. Take a look at this example: https://stackblitz.com/e ...
I have adjusted the size of my mat dialog, but the content is still stuck at the original size. To illustrate, here are some images: https://i.stack.imgur.com/2lLV2.jpg After researching, I found that it can be resized using CSS. I attempted the followin ...
Recently, I put together a lengthy form with the help of Angular Material. The issue I'm facing is that when the page loads, it doesn't start from the beginning of the form but rather somewhere in the middle. Could this be a browser-related problem (like i ...
I'm looking to create a grid list with 2 columns, each containing 2 checkboxes stacked vertically. While I found this helpful question, it still involves a lot of nested divs. Is there a cleaner way to achieve this layout? Here's how I currentl ...
Currently, I am utilizing a mean stack in order to craft a bug tracking system. The issue arises when my express.js service returns an array of issues, which I assign to another array that functions as the dataSource for mat-table. However, despite the ar ...
Currently, I am utilizing Materialize CSS for the design of my website and incorporating AngularJS to enhance its flexibility. However, I have encountered some issues with certain properties of Materialize (such as Select, date-picker, radio-button) not wo ...
Recently, I came across the code for the angular material google map library, and most of it made sense to me. However, there is one section in particular that still puzzles me (found in map-event-manager.ts). /** This method returns an observable that ad ...
My goal is to implement pagination on my webpage, displaying 3 rows per page and enabling navigation through pages using Angular Material pagination. In usersComponent.ts, I retrieved data from an API: import { Component, OnInit, ViewChild } from '@an ...
I have developed a custom Angular library called @foo/bar, and it has the following dependencies: "peerDependencies": { "@angular/common": "^10.0.14", "@angular/core": "^10.0.14" }, "depend ...
I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...