Questions tagged [angular-material-7]

Angular Material2 is an implementation of Material Design in Angular. This tag is for version 7.x of Angular Material2 for Angular 7. Do not use this tag for other versions (e.g. v5, v6) or for AngularJS Material (the implementation of Material Design for the older AngularJS framework).

Usage

  • This tag is intended for questions which ask about Angular Material2 v7.x
  • 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:

Our 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

  • Mention the versions of Angular and Angular Material2 that you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on stackblitz.com
  • If there's a bug (or some unintentional behavior), try to troubleshoot the problem. (If it's a bug report, please create a new issue at Angular Material2's Github repository instead.)

Learn more

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

162 questions
1
vote
1 answer

How to submit a form by pressing Enter Key from any field in the form in Angular Material?

I want to submit the form by pressing enter key without clicking on update button once any field is edited and update button gets enabled as below in the screenshot. This update form is a dialog which opens up on click of edit functionality on a row…
1
vote
1 answer

How to change size of angular materail outline border?

Im using angular materials. I do not know how to change the size of the border when focusing. I do not want the thickness to be seen.
1
vote
1 answer

Angular Material Autocomplete control once Opened is not getting closed for external actions like Page level scroll

As shown in the stackblitz, I'm facing an issue with Angular Material Autocomplete control in which the control stays opened on external events like Page Scroll as shown in the attached sample and the issues even occurs in the Angular Material demo…
1
vote
2 answers

Angular material date picker width is too long when we use within fxFlex of FLEX LAYOUT

I am facing some width issue of mat-date-picker element and the issue is when i use mat-form-field within flex layout for normal inputs, alignments are ok. but when i use same mat-form-field with mat-date-picker, alignments are not ok and i am…
1
vote
0 answers

Problem with displaying icons in Angular-material

I have a problem with angular icons, all my browsers are not able to show icons, I tried to reinstall my Chrome, but it was no result, neither my project's icons nor icons of material.angular.io are shown, but on phone all is ok here are my screens…
1
vote
1 answer

Angular material chips removable

I want to remove the matChip on click of cancel icon here is my code
1
vote
3 answers

Angular material flex - scroll within fxLayout

I am really struggling with what i believe to be a simple problem.. I have a header, a content area and a footer, i'm using fxLayout and in it's simplest it's this:
1
vote
2 answers

Keep the autocomplete panel always above the input element

I'm using Angular Material version 7 and I would like to ask how to keep the autocomplete panel position to always be "above" the input. Right now, if there's still space below, the autocomplete panel will show below. Only when there's no more…
iPhoneJavaDev
  • 821
  • 5
  • 33
  • 78
1
vote
0 answers

Drag and Drop Dynamically added component - angular 7

I am adding component dynamic using viewRef and component factory resolver, I could achieve the dynamic creation. Now i need to add a drag and drop feature to the every component added individually
1
vote
1 answer

Displaying different content in angular material cards

I'm trying to re-create this design: I want this dashboard to change depending on what package a user chooses (it'll be on a separate deploy page that shares which package the user-created). I'm trying to code global variables it so I only have to…
AVu
  • 125
  • 2
  • 12
1
vote
0 answers

Use Angular Material in Custom Library along Main app

I had two Angular 5 who shared some components, so far I've been replicating the code. I've recently migrated to angular 7 in order to create a shared library. Now the problem is I use AngularMaterial and FlexLayout on the main apps and I want also…
bmvr
  • 817
  • 2
  • 9
  • 25
1
vote
0 answers

How to filter data in the mat table based on the value obtained from ngx mat select search

I have two components one is my app component and the other component is my multiple mat select search component in which i used ngx mat select search Iam passing the selected value using event emitter to app component. My angular material version…
1
vote
0 answers

md-icon' is not a known element ERROR while working with Angular Material 8.2.3 even though imported --

a quick query -- Am using angular-material 8.2.3 in my angular 8 app - getting the following error wrt md-icon. 'md-icon' is not a known element: 1. If 'md-icon' is an Angular component, then verify that it is part of this module. this html…
1
vote
1 answer

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, }, ]; Tabs HTML
1
vote
1 answer

Access component nested in ngTemplate with ViewChild from Parent

How can you know if a lazy loaded component has been rendered? I have the following HTML: Panel Summary
Clev_James23
  • 171
  • 1
  • 3
  • 15