Questions tagged [angular-material-5]
Angular Material is an implementation of Material Design in Angular. Do not use this tag for AngularJS Material, the implementation of Material Design for the older AngularJS framework.
157
questions
0
votes
1answer
19 views
Hide mat-optGroup's label dynamically
I am using mat-optgroup and mat-option to create a dropdown using angular material. In one case, I have mat-optgroup's label as empty. I don't want to show the label in that case. Is there an option ...
0
votes
0answers
33 views
how to use angular-material 5 checkbox
I want to uncheck box and disable the button, Which only works when opened for the first time.
Here is my template:
<form>
<div class="container">
<div *ngFor=&...
0
votes
1answer
149 views
How to change the color of the mat icon of a specific row in angular material table when clicked?
I have a mat-table with columns: Name and Plot.
The html, .ts and .css code that i have tried is as below:
.html
<ng-container matColumnDef="name">
<th mat-header-cell *...
0
votes
1answer
37 views
How to manipulate angular materials checkbox inside a table
So I am using angular materials 5 table and checkbox set up basically verbatum here. Its the example where the table has a selection checkbox. https://v5.material.angular.io/components/table/api. ...
0
votes
0answers
552 views
Angular material table multiple headers not working
I'm trying to implement double headers for my material table, however the 2nd header row doesn't appear once data is loaded(subscribe). Angular 5, Material 5
I've been trying to follow : https://...
0
votes
1answer
733 views
Select the second button in an angular material modal
I have a simple modal in angular material. I want to focus the yes button when it opens / is loaded. I did achieve this by setting tabindex='-1' on the no button and autoFocus: true in the provider. ...
0
votes
2answers
1k views
How to close parent dialog from child in angular?
I have one parent dialog inside which there is one child dialog box resides.
In child dialog box there is a close button .
On click of this close button, I want to close both parent and child dialog ...
0
votes
1answer
852 views
How to center align a button in mat-grid-tile-footer
I have mat-grid-list where I am listing items in the view.
issue 1:
Each item has a mat-grid-tile-footer section where I display a angular material button. The button is currently aligned left side ...
0
votes
2answers
466 views
Angular Material Row when looping through data
My Data Source is like below
[{"isGroup":true,"groupName":"MV Reddy","items":[{"id":1,"name":"MV Reddy","verticalid":5,"vertical":"Colocation - Large > 20 Racks","target":"150","sap":"80","colo":"...
0
votes
1answer
156 views
How to enable Material tab from another tab
My tabs definition
this.tabLinks = [
{ label: 'NEW', link: 'crud' },
{ label: 'SEARCH', link: 'search' },
{
label: 'MEDIA',
link: 'media',
disabled: true,
...
0
votes
1answer
112 views
Getting error “Property 'tpl' does not exist on type 'ListComponent'.” using Angular material table
I am getting the following error while implementing the angular material table.
Error:
Property 'tpl' does not exist on type 'ListComponent'.
I am explaining my code below.
<div class="mt-9"&...
0
votes
1answer
139 views
Allow click event only once on html element
I am using below code in my application.Here my problem is I have included below code in a every table column header. So when ever I click on mat-select a new currentddvalues will be formed and will ...
0
votes
2answers
3k views
Angular Material cdk-container and main site fixed header z-index override
I have site with fixed header in angular material with z-index of 1100.
While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular ...
5
votes
1answer
5k views
How to theme angular material component shapes?
Is there any way to theme component shapes in angular material? I know material design has a shape concept that allows you to create more rounded, less rounded or even cut corners for all small/medium/...
0
votes
1answer
586 views
Trigger Angular MatDataSource filter manually
I got a search input and a select dropdown that shows predefined filters. To realize the filter I extended the Angular MatDataSource filter predicate with a custom filter:
this.invitationsDataSource....
2
votes
1answer
489 views
Angular table material won't complie: Unexpected closing tag “ng-container”
I'm working n Angular project integrating angular material5.2.5:
Here is my app.component.ts:
import { Component } from '@angular/core';
import {MatTableDataSource} from '@angular/material';
@...
0
votes
2answers
577 views
Index number in descending order
My table contains indexing number and when i add a new row its should show me in 2,1,0 i need current value in the top index number 2.As per my code its working 0,1,2.
But i need it in 2,1,0.
This is ...
2
votes
1answer
2k views
Create Scroll to top button in Angular material 5
<button mat-icon-button>
<mat-icon>keyboard_arrow_up</mat-icon>
</button>
How to create scroll to top button in angular material 5?
0
votes
1answer
381 views
Apply style on first line only in angular material tooltip
I am using Angular material tooltip in my project.
I want insert to the tooptip more the 1 sentence, and I want to add bold styling to the first line only.
My HTML code:
<div fxFlex="100" *ngFor=...
0
votes
1answer
3k views
How to set default value of mat-select when options are retrieved?
<mat-form-field [ngClass]="classes">
<mat-select [placeholder]="placeholder" [(ngModel)]="selectValue" [multiple]="true" #multiSelect (change)="onChange()"
#itemSelect="ngModel">
...
2
votes
1answer
4k views
Center Mat-Menu, Center MatMenu Overlay to Button
Per Material Issue 9631 centering the mat-menu to the button is as follows.
the issue is that supporting it deviates from the spec and may end up looking weird.
I have a need for this ...
3
votes
3answers
3k views
My sidenav does not push the content, it overcomes it
I'm trying to make the Side Material Sidenav push the content when I open the bar and obviously when it closes; the elements that were pushed back into place. Currently what it does is open up over ...
7
votes
5answers
16k views
How to place “mat-toolbar” on top of “mat-sidenav” Angular Material 5
I'm writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I'm trying to get the Sidenav to go under the toolbar and the toolbar always occupies the top part, ...
0
votes
2answers
6k views
How to change default width of sidenav (drawer)
How to customize default width of side-nav?
I have tried to change as in the documentation:
mat-drawer {
width: 200px;
}
but it doesn't work. If I add !important then the expand functionality is ...
4
votes
1answer
3k views
How to prevent material menu from closing without user permission in angular 7
I am having a mat-menu containing multiple checkboxes, and I want the user to close it when he checks all types of filter he wants.
The actual behavior is when you click on anything it will be ...
3
votes
3answers
4k views
How to change mat-select placeholder color?
I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code:
/deep/ .mat-select-placeholder {
color: red;...
1
vote
1answer
179 views
Angular5 typescript when calling a function within ngOnInit [duplicate]
Having trouble with the following Angular5 code:
constructor(protected snackBar: MatSnackBar) {}
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
...
0
votes
1answer
548 views
How to add max digit number validation in angular material 5?
I have an input field of number type.I want that anyone can only enter 4 digits on that field. How Can I achieve it?
0
votes
1answer
1k views
how to pass data to angular material select to use more the one select in one form
I am trying to use the angular material select as component in my application to use that component multiple place in one form ideally.
but my question is how to pass the data to each of this select ...
1
vote
2answers
514 views
Theming outlined mat-input box, mat-select and mat-paginator
I am trying to theme the above mentioned elements. However, if I apply the styles at a global scope, it just does not theme every aspect of the element.
Here is the approach that I have implemented/...
3
votes
1answer
7k views
How to add space between underline classes in mat-form-field elements?
I'm trying to add multiple form fields, I wanted to add 2 form fields in a row but I'm not able to add space between form fields ( not able to separate underline)
<li>
<mat-form-field&...
0
votes
1answer
2k views
how to manipulate mat-select multiple from outside of the select?
I have a mat select which contains a list of contrats and evrey time i click on the contrat i add it to a list in order to display it under the mat-select .
<mat-form-field style="width: 100%;"&...
1
vote
0answers
619 views
Angular 6 Mat Autocomplete patch value from remote server on updating entity
I'm trying to do an update operation on my entity. I have two mat autocompletes in my form. Second of them is being subscribed upon the first autocomplate's Id and it's value changes accordingly. So ...
0
votes
1answer
64 views
Angular 5 - get list after sort header
I use Angular 5, Angular Material and Angular DataTable.
I have following table
HTML file :
<div class="material-datatables table-responsive">
<table id="example" datatable [...
-1
votes
1answer
1k views
Sorting and pagination not working on Angular 5 data table.
I am trying to use this Angular material 5 data table component in my project: https://stackblitz.com/angular/jyerrrrdxrp?file=polyfills.ts that features filtering, sorting and pagination. So far, my ...
0
votes
0answers
268 views
How to use two mat-pagination in a single page to get different page index
I am facing an issue when using a mat-pagination for my angular 5 applications where I have two tables with pagination. For one table the pagination is working fine. But when there is change in the ...
1
vote
1answer
316 views
How to create Card using Angular material?
I'm new to Angular Material Here i have mention Image of What Actually i Need?
I don't how to split row in card
0
votes
1answer
1k views
angular 5 why the change does not work within the mat-menu
why it does not work (change) inside a mat-menu.
this is the code that I have
<mat-menu #texpublicity="matMenu">
<button mat-menu-item [matMenuTriggerFor]="size">Tamaño de letra</...
0
votes
0answers
5k views
Date/Month picker using Angular Material
I am using Angular 5 and with that, Angular Material. I have a datepicker that when opened, defaults to picking a month. However, it still requires you to select a day after you select a month, and ...
0
votes
1answer
57 views
Connect datasorce with api using angular-material datatable
I have a component in angular which provide search functionality . When user enter value it call service code which inturns call POST API and retrieve result based on query . I want to show that ...
1
vote
2answers
7k views
Angular Material Dialog Component Scrolling Issue at Startup
I am using Angular Material Dialog component within my app and within this dialog, I am presenting the a user a HTML table of data, that may have a scrollbar.
My issue is though, when I click the ...
3
votes
1answer
914 views
Mat Input placeholder text is blurry
The matInput placeholder text is blurry on Chrome/Safari (I think everything).
Code:
<div class="form-group">
<mat-form-field>
<input matInput placeholder="Email" ...
0
votes
3answers
2k views
CSS Code To Remove Angular Material v5 Modal Backdrop
I want to remove the backdrop on the modal, i know there is a hasBackdrop property when opening the modal but i only want to hide the backdrop based on some condition which will take place on the ...
0
votes
1answer
179 views
How To Retain Modal Data In Angular Material 5
i have a modal with several checkboxes which are populated with data i'm getting from my database.
My problem is anytime i close the modal and open it, it has to load all the data again from my ...
0
votes
1answer
798 views
Expand root nodes in Angular Material Tree
I know there are available methods for expanding and collpasing all nodes but I just want to expand the first level of nodes (the root nodes). How is that possible?
0
votes
0answers
247 views
What is the preferred way to use Type when defining getters and setters for boolean property inputs when using angular-cdk's coerceBooleanProperty()?
Angular Material2 & CDK make extensive use of coerceBooleanProperty in setters for boolean property inputs, but does not use Type consistently. Within their own code, in some cases we see both the ...
4
votes
4answers
26k views
How to disable particular option dynamically in Angular Mat-Select
I have a list with an object has name and id properties:
[
{
"name": "open",
"id": "1"
},
{
"name": "inprogress",
&...
1
vote
2answers
2k views
How to group mat-radio-button row wise in angular material tabel
Normally angular material table groups radio buttons column wise, How can I achieve row wise grouping?
1
vote
1answer
2k views
Angular Material - Refused to apply style
I want to use angular material but facing the problem while importing angular material theme css file -
I imported
<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel=...
1
vote
1answer
2k views
Angular 5 Material - Sticky Div / component inside Dialog
This is my material dialog.
<h1 mat-dialog-title>Title</h1>
<mat-dialog-content>
<app-container> </app-container>
</mat-dialog-content>
In the app-container ...