Stack Overflow
Stack Overflow

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.

Usage

  • This tag is intended for questions which ask about Angular Material using Angular 5.x.x

    Note: Consider also tagging such questions with the tag, as well as the tag

  • Please take note that you should use the tag for AngularJS 1.x Material questions instead of this tag.

Goal

Taken from the official repo:

The goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

Asking a question

Learn more

To learn more about Angular Material, visit the following resources to help you get started:

160 questions
76
votes
10 answers

get index of row in angular material table v5

I'm trying to get the index of row in table, in html, which has been implemented using angular material v5.2. Is there any method available to get the index? The code for reference:
ShivangiBilora
  • 2,912
  • 4
  • 20
  • 27
39
votes
8 answers

Inline editing in the Angular Material data table

Consider an example below. Is it possible to make the angular material data table with inline editing feature? Or making cells under specific columns as editable on load itself (see the image below where Email column fields are editable). If so…
Sundar
  • 655
  • 2
  • 7
  • 13
29
votes
4 answers

How to get Id of selected value in Mat-Select Option in Angular 5

How to get the id of selected option value in mat-select angular 5. Get only value of selected option in onchangeevent. but how can get id of selected option value. client.component.html
AtmanSangeetha
  • 425
  • 1
  • 4
  • 11
23
votes
3 answers

Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'

I am trying to get the current value of a mat-slide-toggle but unfortunatly I will get an error: Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'. I am using the toggle like this in the…
d4rty
  • 3,970
  • 5
  • 34
  • 73
21
votes
7 answers

Angular 5: clicked button that triggers a dialog becomes highlighted after the dialog is closed

I noticed that button gets classes cdk-focused and cdk-program-focused added after the dialog it triggered is closed. If I click anywhere effect disappears. app.component.html [fragment]
Paul
  • 481
  • 5
  • 15
20
votes
5 answers

Vertical tabs with Angular Material

Using the proper Angular Material directive, how do I change the direction to vertical? Starting with vertical tabs: Then want to drop to content below mat-select dropdown: EDIT: Will be working on adapting https://stackoverflow.com/a/43389018…
A T
  • 13,008
  • 21
  • 97
  • 158
19
votes
5 answers

Binding 'this' in Angular Material Autocomplete displayWith using Angular 5

I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function…
Sriram Jayaraman
  • 800
  • 1
  • 8
  • 15
16
votes
4 answers

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", "id": "2" }, { "name": "close", "id": "3" } ] And using MatSelect with *ngFor to iterate over an…
Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
15
votes
4 answers

Angular Material 5: how to call a function when a tab is selected (clicked)?

I have the following html code

Some more tab content

 and this is the function, tabClick(){ console.log('Tab clicked...'); } but…
1Z10
  • 2,801
  • 7
  • 33
  • 82
14
votes
5 answers

How to export Angular Material Table to excel or pdf or csv

i am creating an angular table using this example from angular material https://material.angular.io/components/table/overview is there anyway to export it in excel or pdf?
Kamran Mushtaq
  • 183
  • 1
  • 2
  • 13
13
votes
4 answers

Adding ripple to mat-card without the card expanding on click/touch

Im trying to add a ripple effect to a card using angular material. The ripple effect works the way it supposed except that it expands the hight of the card when the effect is active. How can I stop the card from expanding? …
Jonas Andreasson
  • 165
  • 2
  • 9
13
votes
1 answer

What does startWith('') typescript code do?

I'm learning Angular 5 with Typescript. I'm trying to implement an angular material autocomplete and I've found the following code which is very obscur to me : this.filteredStates = this.stateCtrl.valueChanges .pipe( startWith(''), …
Anthony Hocquet
  • 348
  • 1
  • 3
  • 9
12
votes
6 answers

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, something like this: Example Here´s my…
S. A
  • 493
  • 2
  • 6
  • 14
10
votes
6 answers

Angular 5 Material Multiple mat-menu

I am quite new to Angular 5 and have just started learning it. Recently, I have been trying to create a menu bar with multiple menus for my app using Angular 5 Material. The menu will be triggered/opened during mouse enter and closed when the mouse…
Artanis Zeratul
  • 963
  • 2
  • 14
  • 40
10
votes
1 answer

How to import Angular Material Css

I'm trying to use Angular Material in my project and the tags are imported, but not all of the styling is there. In my HTML:
matchifang
  • 5,190
  • 12
  • 47
  • 76
1
2 3
…
10 11