By balteo
PublishedCategorized as angular, angular-material, material-design
Questions tagged angular-material
Explore the latest questions and answers asked by our top developers.
Display of form inputs broken by my custom angular material theme
I am trying to setup a custom angular material theme for my app. I have setup my custom theme as follows: from styles.scss: @import "[email protected]/material/prebuilt-themes/deeppurple-amber.css"; @import "portal-theme"; @tailwind base; @tailwind components; @tailwind utilities; from portal-theme.scss: @use ‘@angular/material’ as mat; @import "portal-palettes"; $portal-primary: mat.define-palette($portal-primary-palette); $portal-accent: mat.define-palette($portal-secondary-palette); $portal-warn: mat.define-palette($portal-warn-palette); $portal-theme: mat.define-light-theme(( color: ( primary: $portal-primary, accent: $portal-accent, […]
Aligning long label of mat-slide-toggle
I’m using mat-slide-toggle with a label like so: <mat-slide-toggle> <div class="my-label-style">Label that can be long</div> </mat-slide-toggle> The mat-slide-toggle is inside a container of limited width, and the label sometimes spans one line and sometimes two lines. The problem is, that when the label spans two lines, the toggle button appears vertically centered (between line 1 […]
By Mister L
PublishedCategorized as angular-material, css
How to filter an Angular Material tree?
I have an Angular Material tree that has maximum 2 levels: first level is the group level and second level all the items that belong in that group. Each node has a checkbox, here is my tree: <mat-tree [trackBy]="trackByIndex" [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="dataSource.data.length"> <!– This is the tree node template for item nodes –> <mat-tree-node *matTreeNodeDef="let […]
By Andri
PublishedCategorized as angular, angular-material, filter
mat-tab component is lagging when data inside one tab is huge. How can we solve that?
I’m using mat-tab in angular 10, and the components are rendering dynamically using ComponentFactoryResolver and pushing components in array using this method. for ex: componentArr.push(this.insertComponent(ProfileComponent)); componentArr.push(this.insertComponent(DataComponent)); componentArr.push(this.insertComponent(PaymentComponent)); private insertComponent<T>(component: any): T { const componentFactory = this.componentFactoryResolver.resolveComponentFactory<T>(component); return this.tabHost.viewContainerRef.createComponent<T>(componentFactory).instance; } Now I have one component which has very large data and it is making mat-tab lag […]
By Mukesh Soni
PublishedCategorized as angular, angular-material, mat-tab
Mat-Autocomplete filter should work in mat-dialog
Description i am beginner in angular development and trying to understand the use case feasibility as per my client requirement. requirement is described as :- angular material autocomplete filtration is not working while using it inside angular dialog. this dialog is having formgroup with few formcontrols in it. i want a quick reply on this […]
By Bradraj kumar
PublishedCategorized as angular-material, angular12, angularjs-directive
How to get intellisense in Visual Studio Code for angular-material HTML tag names?
I am writing an app using angular and material. I am using VSCode (visual studio code). When I’m in the HTML file and write tags that start with mat (e.g. ) there is no intellisense support for any of the material tags. In addition, none for material CSS names. I have googled, stackoverflow, and searched […]
By slashbrackets
PublishedCategorized as angular-material, intellisense, visual-studio-code
angular style sheet for table
I followed Angular material tutorial for displaying table of records. https://material.angular.io/components/table/overview As per the tutorial, it is using class="mat-elevation-z8" style sheet. where I can get more information on different style sheets. I am looking for excel kind of row and column display. Any Help is much appreciated. Source: Angular Material Quesions
By KingsLight
PublishedCategorized as angular, angular-material
HTML/Angular – Passing a On-Click value to another html element on the same component
Fairly noob on this so any help is appreciated. I have a Mat Table which display a specific range of data from my firestore on display, I wish to click a specific row and show it on a list below my table, I was able to get row data using onClick and I want to […]
By Carlo A
PublishedCategorized as angular, angular-material, html
Modal dialog with image show only the first time a user loads the page
Hello everyone I’m new to front-end development and I’m using Angular 11, Angular material and Bootstrap for a project, my problem is I want to show a pop up with and ad the first time a user loads the home page, the modal dialog is made in angular material, I have the modal dialog in […]
By Chris
PublishedCategorized as angular, angular-material, javascript, typescript
How to get value of mat-chip in Angular?
I’m new to Angular and have a basic question. I’m trying to call a typescript function from an angular html page. I want to pass a parameter in the function. The parameter will be a boolean of whether or not a mat-chip is selected. I’ve googled it but can’t find solution. Any ideas? Source: Angular […]
By user3217883
PublishedCategorized as angular, angular-material
