Questions tagged [angular-material]

The Angular Material project is an implementation of Material Design in Angular. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system. Do not use this tag for AngularJS Material, the implementation of Material Design for the older AngularJS framework.

0
votes
0answers
11 views

Angular Material - how to dynamically assign a context menu based on the target element

I have three buttons and three "mat-menu" menus. The "div" element used to position the context menu has "matMenuTriggerFor" which I try to dynamically assign in the component, based on which button ...
0
votes
0answers
13 views

How to sync FormArray control that displays items as mat-chips inside of a single mat-form-field input, to display error messages?

I have a 'mat-form-field' input on which I am displaying a list of mat-chip elements that represent different clothing sizes. Chips can be 'L', 'S' etc... Currently, this is how I am iterating through ...
0
votes
0answers
9 views

Applying angular material default theme to a specific component

Is it possible to apply the angular material default theme to a specific component only? I used @import "[email protected]/material/prebuilt-themes/deeppurple-amber.css"; in my component in style.css @...
0
votes
3answers
43 views

How can we use *ngFor for iteration in angular6 to show 3 images at a time in angular6

This code has added 3 images on one slides.How can I use *ngFor to get dynamic data?? <carousel> <slide> <img src="../../assets/wts1.png" alt="first ...
0
votes
1answer
24 views

Unable to align checkbox while using angular materal

<div class="checkbox-password"> <div> <mat-checkbox class="example-margin">Remember me</mat-checkbox> </div> <div> <...
0
votes
1answer
17 views

How to mock an input with MatSidenav type, in Angular 7

It is possible to mock the MatSidenav? I want to unit test a component which has as input a MatSidenav from the parent component. So far I get this errors in karma window: Error #1: ...
0
votes
0answers
14 views

How can we use slick in bootstrap4 without using jQuery in Angular6

3 images I have to show and there is previous and next button.on click of next button ,next 3 images will display.But we have to do without using jQuery.Using Angular material many installation is ...
1
vote
1answer
9 views

Give customized border to mat-card

I am trying to give a customized border to mat-card but I'm unable to do so.I am using ng-deep to style the mat-card.I am able to get rounded border with border radius but no colored border is visible....
0
votes
1answer
43 views

Angular 6 - Get row data on click on toggle button

I would need to get the row detail on click of that particular toggle-button. Below is my HTML code <div class="container"> <div> <h3>Manage Announcements</h3> </...
0
votes
0answers
9 views

Placeholder and label getting overlapped when using custom template in Angular formly

Placeholder and label are getting overlapped if default value is not set in model for a field. This issue is coming when using custom template in Angular formly. Is it the CSS issue. I tried setting ...
0
votes
1answer
19 views

Angular Mat Card is not displaying calculated values

I`m using mat-card in my app and rendering it via ngFor. So content of card is calculated, but values came from this calculations is not rendering at all. I tried to do some regular output in card, ...
0
votes
0answers
9 views

Mat-tab-group headerPosition=“below” - But where is content?

I make a material design with tabs. But i cant show some content after the toolbar? Like this: https://stackblitz.com/angular/mklavlygkqd?file=app%2Ftab-group-header-below-example.html This is my ...
0
votes
0answers
15 views

stackable drag and drop cards

I'm using angular material to make a drag and drop screen. I've got that up and running through the documentation ref. https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-...
-1
votes
0answers
25 views

How is Angular Material Breaking by Api Call?

I have an existing Angular project (v7.2.2) that works with a RESTful api hosted on Azure and built with .Net. The project has been working fine for a couple of months but I wanted to add an ...
0
votes
0answers
41 views

Why do I keep getting this error about my closing tag?

So, I've written a sidnav component in angular but it appears to malfunction and I can't understand why. The thing is, I only want to show my sidenav when the window size is less than 992px. I've ...
0
votes
0answers
17 views

Angular Material <mat-error> not showing in Custom Components

So I've been doing lots of research but I just can't figure it out. I want to make a Textbox component using Angular material form controls Following this tutorial, I've implemented it as follows ...
0
votes
0answers
35 views

How to load camera data before starting Angular MatBottomSheet

I would like to embed the qr-code scanner (https://github.com/zxing-js/ngx-scanner) into a bottom sheet in my Angular App. To get camera information I am using in my scanning component (bottom sheet) ...
-1
votes
0answers
16 views

How to properly style a floating label in angular material

How can i style the angular material input label, i want to have different styles when the input is focus and when is blur, and reflect it on floating label.
0
votes
2answers
26 views

mat-select not selecting default option

select for select method. But it's not selecting the default option. while trying the same code with online editor it's working fine. Don't know why it's not working with mine. HTML <mat-form-...
0
votes
0answers
35 views

Two list with draggable elements angular material

What I want is to have a schedule with draggable elements in between the time available, what I don't know is how to output two lists, the one with the draggable elements and the one with schedule and ...
1
vote
1answer
32 views

How can I select all and deselect all in a nested form array?

I have dynamic formArrays inside dynamic formArrays: A formArray of courses where each course has a formArray of students. ngOnInit() { this.assignForm = this.fb.group({ courses: ...
0
votes
0answers
15 views

Angular virtual scrolling for large tables

I have a table that will contain large amount of rows and columns, and when I use either it doesn't render anything: Here is my table <table class="table text-center "> <thead> ...
0
votes
1answer
22 views

Dashboard with angular material and flexLayout

I'm currently building a dashboard application, and I am using AngularMaterial and flexLayout package, my application must be like this: My application must be a responsive one if there is an idea of ...
0
votes
1answer
31 views

Angular Invalid Argument 'z,x,y' for pipe 'AsyncPipe'

I am trying to do a autocomplete input box. The Angular Material tutorial were simple buy it seems like it does not like the data I am getting from API. ERROR Error: InvalidPipeArgument: X,Z,Y for ...
0
votes
0answers
22 views

CDK Drag and Drop between component

I am trying to user CdkDrag between component, is it possible ? I am trying what is described here: How to use Angular7 (angular material) drag drop between two components Unfortunately with angular ...
2
votes
0answers
41 views

How to optimize the process when loading data for the component “select”?

I use the select component and I want to somehow optimize the process if 200+ data is loaded into the component. <mat-form-field class="example-full-width"> <mat-label>Work</mat-...
-1
votes
1answer
12 views

WeatherCast Apliccation Angular material

I have a problem with my weather cast app in angular material. I don't know how to put the image of the current condition weather(ex: Today is sunny and it need to apear the icon of the "sun". I have ...
0
votes
0answers
10 views

Can not reset input on submit and send the value when I use formControl

When I'm trying to submit the form the "email" isn't displayed in the console, but when I delete formControl this works normally but then my email input isn't strick. Can you tell me how to solve it? ...
0
votes
1answer
39 views

How to apply multiple filters in Angular Material Data Table?

Hi have a Data table with 4 cols- Name, Age, Marks, School. Now I want to apply filter for each of the columns. The filter works fine individually. But I am not able to combine the results of filter - ...
0
votes
2answers
33 views

How to customize the CSS in Angular material 7 drag and drop while dragging, drag preview and drag placeholder?

I have found some basic examples of how to use .cdk-drag-preview and .cdk-drag-placeholder classes and they seem to do the job when they are no nested elements. Basically, I have a list of actions ...
0
votes
1answer
24 views

Bind incoming integer value to mat-radio-button value in formgroup

I am loading integer type values from a db to populate a formgroup's radio buttons. The radio-group only reads values if I convert the incoming integers to strings. How can make the mat-radio-group ...
-1
votes
0answers
16 views

How can I use Angular Material in Nativescript app [duplicate]

Angular Material official docs says modern UI components that work across the web, mobile and desktop. I would like to use Angular Material and Flex Layout in NativeScript. I could not find sample ...
0
votes
0answers
11 views

dialogs and overlays in an iframe with Angular context

We have a component which opens material dialogs in Angular 6. We also have a button which causes an overlay to appear. We also have legacy applications which need to use this component (non Angular)....
0
votes
1answer
39 views

mat-toolbar not match width with mat-sidenav

Learning angular material design. I created a side-nav and inside it i placed a mat-toolbar, but mat-tool bar not taking the full-width of its parent side-nav, showing some white line on its right ...
1
vote
3answers
28 views

Is there a way to display different tables in tabs of material-angular?

So, I'm somewhat new to Angular, and have never used Angular-Material before. So if the solution is simple go easy on me please. Basically, what I'm trying to do, using Angular-Material tabs, is show ...
0
votes
1answer
12 views

Change the Primary Color

I have created a simple theme but I want to change the primary and secondary colors. theme.scss: @import '[email protected]/material/theming'; @include mat-core(); // #EB3D53 // #4980b3 $my-app-primary: ...
1
vote
0answers
27 views

How can I set a valid empty date in Moment js?

So, I am using an Angular material datepicker which only helps me select a month and a year. https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-...
0
votes
0answers
10 views

_angular_core__WEBPACK_IMPORTED_MODULE_1__.ɵnov(…).projectId is not a function

I have an Angular 6 project using Material. There is an error that consistently is in the console. I have updated the project to the latest version of Angular (7) and that still did not fix the error....
0
votes
1answer
19 views

Use Angular material table to group columns

I have am trying to figure out how to group columns using Angular mat-table. I have no clue how to start with this and I can't seem to find an example anywhere. The first two sections need to be ...
1
vote
1answer
34 views

Email validation for Mat-chip-list

I am trying to apply email validation to mat-chip. Below is my attempt to achieve the same. https://stackblitz.com/edit/mat-chip-demo-yvmxsk My requirement is to display an mat-error when user ...
-1
votes
1answer
32 views

Change slide-toggle text on toggle change

I have a basic slide-toggle in my app. I want to change the text of the slide-toggle based on the if the toggle is toggled or not. Basically display different text when the button is toggled. I ...
0
votes
2answers
39 views

Call different onChange method for slide toggle

I am creating a simple toggle app that that has two toggles.I'm saving the toggle state in a db. My issue is that when I toggle one slide-toggle, the value of other slide toggle also changes.I have ...
1
vote
1answer
57 views

How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?

I'm setting up a mat-datepicker for DOB and traditionally the display format is MM/DD/YYYY,I need to change it to DD/MM/YYYY with less coding I tried format tag in mat-date picker but it does not ...
0
votes
0answers
23 views

Angular - Material/Autocomplete Not Displaying As Expected

I am attempting to work with the Angular/Material autocomplete component. I have added the following to my HTML file: <form class="search-form"> <mat-form-field> <input ...
0
votes
1answer
52 views

How to pass selected row value of table to button click event - Material design - Angular 6

my previous question was not clear. Allow me to ask again clearly as I'm struggling complete my task. I've mat-table along with checkbox for every row. (No master checkbox). whenever I select the ...
0
votes
2answers
33 views

data passed to MatDialogRef component not displayed

I followed this article: https://material.angular.io/components/dialog/examples and made some small changes to pass an class object instead. I am convinced that the data is passed onto the modal ...
0
votes
1answer
102 views

No value accessor for form control with name… for mat-select controls

I am making some unit test with jasmine and karma for an angular 6 app that validate if a formGroup field is valid. I am experiencing problems with mat-select control. when I run the test case, Karma ...
0
votes
1answer
30 views

How to change mat-tab after routeParams changed?

I'm trying to reset mat-tab-group to set first tab as active when routeParams changed. ts file: public index = 0; ngOnInit() { this.subscription = this.route.params.subscribe((routeParams: Params)...
1
vote
1answer
38 views

How To Update Database Using Angular Material Reactive Form And Restful API

Let Me take famous Book Example To explain My question. I have a angular material reactive form build based on Book Model in my BookService.ts. When I change some field In this form and Submit it to ...
0
votes
0answers
11 views

MatMenu positioning (with trigger) when Windows screen scaling != 100%

In my Angular7 application, I am using a mat-menu (angular material 7.3.7) with a MatMenuTrigger positioned in an hidden span. This currently works fine with every resolution/scrolling/etc, except in ...