Questions tagged [angular-material]

2

votes
0

answer
20

Views

to change the tab index of mat-stepper using output

i am using mat-stepper for my view and in each mat-step there is a component with form. when my form gets submitted i am passing an event using @output and receiving in parent component and incrementing the index of mat-stepper using stepper.next() but it is now incrementing for the first time it is...
subhashish negi
1

votes
1

answer
1.3k

Views

How to show and hide mat spinner on API call

I was trying to show mat spinner on API method call. Below is my API call code on which I subscribe to get the data, Usually it is just 2 min work but this time didn't work, also I know this happens due to a subscribe method so any easy way to implement that? this.loading = true; this.ticketModelSer...
1

votes
1

answer
1.8k

Views

Cannot read property 'page' of undefined when making a material paginator

I have been following the Angular Material Data Table paginator tutorial here. When they construct their paginator, they declare a paginator using @ViewChild(MatPaginator) paginator: MatPaginator; in their component.ts file. With this declaration, they are able to access properties later in the same...
Atticus29
1

votes
3

answer
1.8k

Views

How to set autofocus on a matInput element on click event in Angular 6?

Similar to Google Login page, I want to have autofocus on input element after on click event. I have tried @ViewChild('id') and document.getElementId('id'). Both of it doesn't work. It's always null or undefined. How can I achieve this? Next
1

votes
3

answer
1.3k

Views

How to add Icon inside the Angular material Snackbar in Angular 5

I am new to angular and I am using Angular Material Design for UI. In my application I have a snackbar . Now I want to set an Icon inside the snackbar but I tried some Stackoverflow post I can't set it . code: this.snackBar.open('You are already registered.Please log in.','', { duration: 2000 }); I...
Zhu
1

votes
2

answer
1.8k

Views

Angular Material | Check if dialog is open

I'm using the Angular Material dialog to show a warning message in my app. I need to check if a dialog is already open like this: private _openDialog() { // if (this.dialog.isOpen()) return;
Vingtoft
1

votes
2

answer
1.4k

Views

How to include material icon library in angular?

(i refer this link for that https://github.com/angular/angular-cli/issues/2662), i add add css in angular.json and import library instyle.css (it gives error like ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)), what is the proper way to ins...
DDD
1

votes
1

answer
382

Views

Angular material multi select get selected value on hide

Scenario : I have a filter in angular material multi-select Todo : I want to get the selected values on hide of dropdown.. I googled and tried to find the doc but could not found any ref to add hide event to miltiselect
Md. Parvez Alam
1

votes
1

answer
118

Views

Set default directive for all input in app

I use mat-form-field with custom css in order to change the be look like appearance='outline' directive. In Angular Material v 7.2.1 appearance='outline' was added to the mat-form-field options. How can I declare appearance='outline' as a default for each input fields in my app?
Stack Overflow
1

votes
1

answer
33

Views

Angular Material input | How to make 'focus' layout default

I'm using Angular Material in my application. I have input fields like this: E-mail Which produces a input form: Focusing on the input form triggers an animation that transforms the input field to the following layout: Question: Is it possible to have the 'focus' layout (label floating in the to...
Vingtoft
1

votes
1

answer
79

Views

Angular Material card shadow colour

Is there any way to change the colour of the shadow which is dark under the card? If any solution please let me know or any other workaround is appreciated!
Tot
0

votes
1

answer
18

Views

Make a generic method for multiple components using service

I have a multiple method for sorting different tables: sortFruits(sort: Sort) { const direction = sort.direction === 'asc' ? 'asc' : 'desc'; this.data.fruits= orderBy(this.data.fruits, [sort.active], [direction]); } sortFamily(sort: Sort) { const direction = sort.direction === 'asc' ? 'asc' : 'desc'...
Mfarhs
2

votes
1

answer
22

Views

Performance of mat-table with 30 000 rows

I use Angular 6, Firebase and Angular Material. I have 30,000 json objects stored in firebase that I want to load them into a mat-table. Only I get way below that I wish. I wait 30 seconds before I can click on my application, sometimes chrome is in error ... Yet I load my data after pagination. Can...
Alan ENTEM
0

votes
0

answer
4

Views

Angular - Open Bottom Sheet (MatBottomSheet) inside parent container

I'm trying to open a material bottom sheet inside a div container, as default it's opening as the last element inside the body. Looking at the documentation, I need to use the viewContainerRef, but I can't make it work. This is similiar to what I'm trying to do: app.component.html: ... ... app.compo...
ET-CS
1

votes
1

answer
957

Views

Mat-select panel min-width

I'm trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below: and I don't know where its calculating this min-width. also I tried to add panelClass and override the min-width from this class, for example: &.multiple-panel { min-width: 200px !i...
Tomer Aronovsky
1

votes
2

answer
373

Views

Angular Material Table TypeError: Cannot read property 'cars' of undefined

I am having a problem with Angular Material Table (Angular Material Table) I ran ng generate @angular/material:material-table --name=car-table to generate the default angular table, which works fine. But if I try to inject the data (cars) to the CarsTableDataSource it stops working. It must be some...
Denis Barzanov
1

votes
3

answer
50

Views

Angular Material fixed side bar header not a fixed

Im tried to crate Angular material Fixed side nav , but I face some conflict on my projects, My issue is side bar header not fixed, i added content details and scrolls the content then header is hide, Stack blitz code here how can I fix this issue please help me to fix this one Thanks. My code sid...
core114
1

votes
2

answer
276

Views

Change color of Angular material expansion header on hover

I have an Angular Material 7 Expansion Panel. When I hover over one of the mat-expansion-panel-header the color is changing. How can I change this color? Code: Titel Hi Content Thank you in advance.
A.Service
1

votes
1

answer
491

Views

Angular material date-picker min and max date validation messages

How to show the validation messages for min and max dates validation errors in Angular Material Datepicker Date is Required Here Required validation has been set. Like same I want to show Date should be higher than 01/01/2019 message if user typed the date which is less than minDate. I knew that all...
Karthik Arwin
1

votes
4

answer
69

Views

To close dialog component based on api response

I have component called AddCustomerComponent which i am calling as dialog component,In the AddCustomerComponent after filling the input fields i am performing POST operation.Now POST operation working fine. But after POST operation based on the api response, I want perform following operations: If P...
Empty_Soul
1

votes
2

answer
83

Views

How to get style from click event target?

In angular material table, there is 24px padding-left on first cell: td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type, th.mat-header-cell:first-of-type { padding-left: 24px; } How can i get it? ev.target.style.paddingLeft is empty. stackblitz
yantrab
1

votes
0

answer
141

Views

Custom md-icon set not working

I am trying to build a set of custom SVG icons for use with Angluar Material 1.x as described here: https://material.angularjs.org/latest/api/directive/mdIcon I have setup the .config properly using: $mdIconProvider .iconSet('social', 'App8/images/svg/social-circle.svg', 24); Using the following in...
Andy Theimer
1

votes
1

answer
359

Views

Angular 4 OverlayContainer duplicate

In my project I'm using md2 components and angular material dialog component. After running my code in my browser, when I open a md2-select or a md2-datepicker, it adds a cdk-overlay-container div to the page's body: Every time I use an md2 component which needs an overlay, it uses the existing one....
Ben
1

votes
0

answer
90

Views

column-count and Angular Material: button is not clickable in Chrome

I'm using Angular v5.1.3 + Angular Material v5.0.3 for a website. I have a problem with a button not being clickable in Chrome(v63.0.3239.84), while it works fine in Firefox(v57.0.3). Here is a demo. The buttons Test 1, and Test 2 should be clickable. The way I see it is as follow: when using nested...
Moi
1

votes
1

answer
67

Views

Error in Autocomplete-search feature implemented using Angular Material

Error TypeError: Cannot read property 'name' of undefined HTML form Input Field Autocomplete HTML {{person.name}} Component with error name and basis are decalared as FormControl: filteredOptions: Observable < string[] > ; ngOnInit() { this.filteredOptions = this.name.valueChanges.pipe(map(val => th...
Nidhi
1

votes
2

answer
101

Views

Form data not updated on live server with --prod flag

email {{loginData|json}} If built with ng serve --aot everything works as expected. However, if added --prod the loginData output is not updated when I typed. The loginForm2 and emailField are valid objects but just the loginData not output correctly. i have checked everywhere many times but can'...
Mave
1

votes
2

answer
818

Views

What is the use of “items” property in MatMenu of angular/material2?

In the Angular material, MatMenu documentation https://material.angular.io/components/menu/api, the API has a 'items' property which is documented like an attribute of type QueryList to the MatMenu component. In the Angular documentation for QueryList, https://angular.io/api/core/QueryList, the live...
Paul Thomas
1

votes
1

answer
1.6k

Views

How to prevent Dialog opening twice in angular material using angular5

{{ person.name }} | ID: {{person.id}} {{person}} This is my method in the component class:- Actually selectedPersonsInDialog function is being called twice so, always it displays 2 times dialog with latest selected and one previous selected value. I want to display a dialog only once with lates...
Nidhi
1

votes
1

answer
591

Views

How to use Angular Material Component mat-form-field in JHipster Project

JHipster project is created and we are using visual code editor for accessing angular components. For using angular material components we installed them using command npm install --save @angular/material. We try to import angular material using import { MatFormFieldModule } from '@angular/material'...
user1627301
1

votes
0

answer
443

Views

afterClose subscribe not working in mat dialog tests

I am trying to write a test that involves knowing when a has closed. In my component class I am doing this dialogRef.afterClosed().subscribe((data) => { // do something with data }); And that observable occurs as soon as the dialog is closed. But when I do it in my spec file for my test, it never g...
Fernando
1

votes
1

answer
71

Views

Pop window does not closes after calling hide also in Angular JS

This is my function (function(){ 'use strict'; function TablePopUpController($http, prod, tableName, $mdDialog, $scope,$timeout,$location) { $scope.tableName=tableName; var datas=[]; //$location.reload(); $scope.submitData = function() { if (tableName == 'WFSmartPriority') { var url = prod.TrfUrl +...
Atharv Thakur
1

votes
2

answer
525

Views

Angular - encapsulate a mat-dialog to a module

I have a dialog that I want to share across different parts of my app. Different components in different modules should all be able to trigger this same dialog and the logic that goes with it. The logic of interacting with the dialog is embedded within a service that also handles what to do with th...
John Arrowwood
1

votes
0

answer
2.6k

Views

angular 5 make picture fit on mat-toolbar with matmenu

Not that familiar with css or perhaps tools I could use to make this work, what is the best way to make an image fit in the toolbar such that: 1) the matmenu button appears in the right hand corner on top of the picture not next to the picture. 2) the picture resizes from a wide screen to a mobile s...
oudekaas
1

votes
1

answer
1.3k

Views

How to use routing inside mat tabs?

I have read the documentation of angular material on mat-tabs. The basic concept of mat-tabs is very easy to understand but the concept where the routing is used inside the mat tabs is some what confusing. Here's the example that is provided for using routing inside the mat-tabs which is done by u...
Harish
1

votes
0

answer
256

Views

property 'filter', 'pagination', 'sort' 'doesn't exist on the userdatasource

I have created a table with pagination, sort, and filter using Angular Material with static JSON data. It's working fine below is my source code URL Code URL working with static Json. But I am trying to convert into service but it's showing Typo like 'property 'filter', 'pagination', 'sort' 'doesn't...
ramu
1

votes
1

answer
326

Views

Module not found: Error: Can't resolve '@angular/material' when building dist for npm package

I'm building an npm package that depends on @angular/material. I've included in my package.json (hiding irrelevant info) { 'main': 'dist/index.js', 'module': 'dist/index.js', 'types': './dist/index.d.ts', 'scripts': { 'test': 'echo \'Error: no test specified\' && exit 1', 'build': 'ngc' }, 'peerDepe...
7ball
1

votes
0

answer
489

Views

How to change height of md-slider ticks?

I am setting tick-interval='1' in md-slider and I want to set height of tick to create scale for slider. How can I change this height? I found out that when I add rule with 'ng-deep' .mat-slider-horizontal .mat-slider-ticks { height: 5px !important; } Last tick changes it's height and I don't know...
Adam Michalski
1

votes
1

answer
1.6k

Views

Angular 5 Material - Dynamically change toolbar name when I change routerLink

I'm trying to change the material toolbar name dynamically when i switch between pages on sidenav. App-component.html Home Products Orders menu Products
PrakashGD
1

votes
1

answer
878

Views

mat-select not working in mat-expansion-panel

We have to show a form inside mat-expansion-panel. There are multiple fields in the form, for few of them I am using mat-select and for another few I am using mat-input. In expansion panel, matInput is working fine but mat-select is not showing the options for selecting a possible value. Though mat-...
Ajay
1

votes
1

answer
110

Views

How to highlight searched string only instead of complete row or cell in Angular 4 Material table?

Am using Angular material table to display data and using filter function search data. Now i want to highlight searched string only instead of complete row or cell in Angular 4 Material table.
Anshul Mehta

View additional questions