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
Categorized as angular-material, css Tagged ,

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=""> <!– This is the tree node template for item nodes –> <mat-tree-node *matTreeNodeDef="let […]

By Andri
Categorized as angular, angular-material, filter Tagged , ,

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
Categorized as angular, angular-material, mat-tab Tagged , ,

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 […]

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 […]

angular style sheet for table

I followed Angular material tutorial for displaying table of records. 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
Categorized as angular, angular-material Tagged ,

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
Categorized as angular, angular-material, html Tagged , ,

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 […]

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
Categorized as angular, angular-material Tagged ,
1 482

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us