By Sameh Hassoun
PublishedCategorized as angular, angular-cdk, angular-material, css, flexbox
Questions tagged angular-material
Explore the latest questions and answers asked by our top developers.
how to add space bettween elements in flex box
I need to display a list of scheduled jobs in an endless scroll list of angular material, for each element in the list, I need to divide it into 3 columns using flexbox. in each column, I want to display certain data. for some reason, I’m not able to add space between columns inside the […]
How to bind mat autocomplete with ng form?
I work on angular 11 I face issue I can’t bind auto complete angular material with ng form for insert data insertRecord(form: NgForm) { } on html component <form #form="ngForm" (submit)="onSubmit(form)" autocomplete="off"> <mat-form-field > <input type="text" placeholder="Select Item" aria-label="Number" matInput [matAutocomplete]="auto" [formControl]="myControl" class="form-control"> <mat-autocomplete #auto="matAutocomplete" > <mat-option (click)="getselected(exp.itemName,i,exp.id)" *ngFor="let exp of this.filteredOptions | async;let i […]
By user3223372
PublishedCategorized as angular-cdk, angular-components, angular-directive, angular-material, typescript
How to extract query parameters using switchMap
In Angular component, in .ts I want to extract query parameters and pas these params to store action. this.route.queryParams .pipe( switchMap(() => this.store.select(selectSelectedLoan)), tap((selectedLoan) => this.store.dispatch(AccountActions.addNewPaymentMethod({ borrowerId: selectedLoan.borrowerId, accountNumber: selectedLoan.accountNumber, tokenId: this.tokenId, fundingAccount: this.fundingAccount, nickName: this.nickName, singleUse: this.singleUse, expiryDate: this.expiryDate, fundingAccountSubType: this.fundingAccountSubType, ssoKey: this.ssoKey }))), tap((status) => this.router.navigate([‘./account/payments’])), takeUntil(this.unsubscriber$) ) .subscribe(); Currently I have defined […]
By user14463446
PublishedCategorized as angular, angular-material
Angular CDK Drag’n’zone doesnt respect scrolling containers, dead drop zones
I have a problem with Angular’s Drag’n’drop, DropZone to be exact. TL;DR DropZone in Angular CDK Drag’n’Drop works out-of-box only for non-scroll containers. If it has a scroll you have to use cdkScrollable, but this makes the column move in 4 directions. This excludes its use on sticky headers – an attempt to use drag’n’drop […]
By Chocho
PublishedCategorized as angular, angular-cdk, angular-cdk-drag-drop, angular-material, javascript
Angular Expansion Panel and Body with Flex Layout not Aligning
In Angular, I have a table of mat accordion expansion panels, where each individual expansion panel uses flex layout. Right now, the header and body of the expansion panel are not aligned properly. The header has four elements with the following fxFlex: 33%, 16%, 16%, 35% The body has two elements with the following fxFlex: […]
By Cami
PublishedCategorized as angular, angular-material, html, material-design
mat-checkbox check on method result
I have a mat-checkbox, and when I click it I show a mat-dialog component, and if the user clicks "confirm" I want the checkbox to become checked, if they press cancel, I want it to remain unchecked, how do I do this? Here is the method that the checkbox calls when clicked: onShowDialog(): void { […]
By LondonMassive
PublishedCategorized as angular, angular-material, checkbox, html, typescript
Angular 12 Update has made my fonts look different
My application was previously on Angular 10. I upgraded to Angular 11 with no issues–then immediately went to Angular 12 afterwards. Everything compiles fine and the app works fine. The only issues I have ran into are my fonts are now different. By different–I mean that the Google Web Font I am using "Open Sans"–is […]
By MorpheusZero
PublishedCategorized as angular, angular-material, fonts, javascript, sass
auto complete angular component display selected text as Id issue?
I work on angular 11 i face issue selected text from auto complete display as Value id example I select tea then tea must display on auto complete but this not happen what happen is item id display on autocomplete input so How to solve this issue <div class="form-group col-md-6"> <label>item</label> <div class="col-sm-3 form-group" > […]
By ahmed barbary
PublishedCategorized as angular-components, angular-directive, angular-material, typescript
Have to change the default dateformat in datepicker without using Moment npm (Angular)
Need to Change the Default Dateformat in the datepicker I can’t use the NPM (Angular) Needed Formats, Dd mm YYYY, Mm dd yyyy, LL & L Source: Angular Material Quesions
By pavan kumar
PublishedCategorized as angular, angular-material, angular-storybook
How to make Angular Material Select to consider the width of the placeholder?
Here is an example of a <mat-select> https://stackblitz.com/edit/angular-vy3buj?file=src%2Fstyles.scss It seems the control has a hardcoded width of 180px set in the CSS class .mat-form-field-infix, I want a dynamic width based on the width of the placeholder text (i.e. at least to show the whole placeholder text). But as you can see from the example, if […]
By user1589188
PublishedCategorized as angular, angular-material, css, html
