Issue I can’t seem to find a way to set the spacing between rows for Angular Material’s Grid List. I’ve tried gutter size, but it only crops up my tile content. I can’t find a plunker or a fiddler for
Continue readingTag: angular-material2
Angular 4 Material table highlight a row
Issue I’m looking for a good way to highlight the whole a row in md-table. Should I do directive or what? <div class="example-container mat-elevation-z8"> <md-table #table [dataSource]="dataSource"> <!— Note that these columns can be defined in any order. The actual
Continue readingchange angular material datePicker icon
Issue I wonder if it is possible to change the icon displayed using the datePicker of angular material. This is the code from the angular material docs. <md-input-container> <input mdInput [mdDatepicker]=”picker” placeholder=”Choose a date”> <button mdSuffix [mdDatepickerToggle]=”picker”></button> </md-input-container> <md-datepicker #picker></md-datepicker>
Continue readingDefault Icon List of Angular Material 2+
Issue I need to see a default list of Icons for Angular Material https://material.angular.io/components/icon/overview I am not using Font Awesome and Google Fonts Solution The Angular Material Icon component actually isn’t pre-loaded with the Google Material Design Icons, I’m afraid.
Continue readingMaterial radio button change event Angular 4
Issue I am trying to use the change output of an md-radio-buttons as follows: <md-radio-group [(ngModel)]=”selected”> <md-radio-button *ngFor=”let a of array” [value]=”a” (change)=”radioChange()”> {{a}} </md-radio-button> </md-radio-group> TS: selected: string; filter: any; radioChange() { this.filter[‘property’] = selected; console.log(this.filter); } This always
Continue readingVisual Studio Code error TS2305 with moment.js example from angular material design tutorial
Issue I tried the following code from https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings (see below). It complies and I can run the code but I get an error in visual studio code which says that ‘default is not an exported member of moment. I am
Continue readingerror TS2307: Cannot find module '@angular/core'
Issue So I get the following error when I tried building my application again: ERROR in ../../../node_modules/@angular/cdk/a11y/typings/aria-describer/aria-describer.d.ts(8,42): error TS2307: Cannot find module ‘@angular/core This error occurred while I was developing my angular application. I apparently got this whilst I was
Continue readingmatTooltipClass not applying css
Issue I am attempting to apply some css changes to mat-tooltip from angular material 2 and found in the documentation a matTooltipClass that can then be selected in the css file to make changes. However, I am not able to
Continue readingAngular material design – how to add custom button color?
Issue I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but
Continue readingHow to get mat-card-header background fully colored in Angular 2?
Issue I have made a contact form in Angular 2. I would make a colored top bar <md-card class=”mdcardcontact”> <md-card-header style=”background-color: black; width:100%”> </md-card-header> <div> <md-card-content> <form [formGroup]=”form” class=”form”> <div> <md-input-container class=”full-width”> <input mdInput type=”text” formControlName=”name” placeholder=”Votre nom”> </md-input-container> </div>
Continue readingmat-form-field must contain a MatFormFieldControl
Issue We are trying to build our own form-field-Components at our Company. We are trying to wrap material design’s Components like this: field: <mat-form-field> <ng-content></ng-content> <mat-hint align=”start”><strong>{{hint}}</strong> </mat-hint> <mat-hint align=”end”>{{message.value.length}} / 256</mat-hint> <mat-error>This field is required</mat-error> </mat-form-field> textbox: <field hint=”hint”>
Continue reading'mat-form-field' is not a known element – Angular 5 & Material2
Issue I’m trying to use <mat-form-field> in an Angular project using Material2 but I’ve hit a wall. Getting the error message below. Uncaught Error: Template parse errors: ‘mat-form-field’ is not a known element: 1. If ‘mat-form-field’ is an Angular component,
Continue readingday incorrect in angular material datepicker
Issue When I select a date I see the correct date in the field but, when I save, the datepicker send the day before the date I have selected ( 3 hours offset ) i am using angular reactive form
Continue readingAngular Material 2 table server-side pagination
Issue I am trying to Achieve Angular Material 2, MatPaginator server side paging. How can I achieve that? Below is the code example: <div class=”example-container mat-elevation-z8″> <mat-table #table [dataSource]=”dataSource”> <!– Position Column –> <ng-container matColumnDef=”position”> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell
Continue readingAngular material table sticky headers not working as expected
Issue I forked the example on angular material table with sticky header and I added more data. I see that the headers are not sticky. Stackblitz here Anyone knows how headers can remain sticky? Solution The problem in your example
Continue readingAngular Material: making a mat-card fill an entire mat-grid-tile
Issue I want to use mat-grid-list to create a grid list layout in which each mat-grid-tile contains a mat-card that fills the entire tile regardless of the card’s content. Most of the cards need to occupy multiple rows and/or columns.
Continue readingAngular material slider not sliding
Issue I am using mat-slider and, while trying to slide the control using the mouse, it does not slide, either on the left or right. It is only working when I click to a point in the sliding line. My
Continue readingHow can I set duration of a snack-bar in angular2 (material2)
Issue This example stays forever on the screen: snack-bar-demo.ts import {Component, ViewContainerRef} from ‘@angular/core’; import {MdSnackBar, MdSnackBarConfig} from ‘@angular/material’; @Component({ moduleId: module.id, selector: ‘snack-bar-demo’, templateUrl: ‘snack-bar-demo.html’, }) export class SnackBarDemo { message: string = ‘Snack Bar opened.’; actionButtonLabel: string =
Continue readingAngular material slide toggle capturing state
Issue I’ve got a fairly basic slide toggle. I’d like to perform an HTTP call once the slider has been toggled and in case my HTTP call fails, revert it back to the initial value. I’ve done it as follows:
Continue readingAngular material slide toggle capturing state
Issue I’ve got a fairly basic slide toggle. I’d like to perform an HTTP call once the slider has been toggled and in case my HTTP call fails, revert it back to the initial value. I’ve done it as follows:
Continue readingHow to fix the header of mat-tab
Issue I am having 5 mat-tab and each tab is having a large amount of data so scroll is getting added to that window. Is there any way through which I can fix the header of mat-tab and let the
Continue readingHow to fix the header of mat-tab
Issue I am having 5 mat-tab and each tab is having a large amount of data so scroll is getting added to that window. Is there any way through which I can fix the header of mat-tab and let the
Continue readingAngular Material custom MatFormFieldControl – How to manage error state
Issue I am trying to make a custom MatFormFieldControl, with the version 7 of Angular Material and Angular 6. The custom input is a weight input, which has a value (input type="number") and a unit (select "kg","g",…). It has to
Continue readingHow to style a mat-checkbox properly
Issue I am attempting to style a mat-checkbox (material2) according to the following requirements: A black, always visible border (regardless of checked status) (#0000000) When checked, the “tick” will be white(#ffffff), on a coloured(teal) background (border still visible) When unchecked,
Continue readingAngular Material DatePicker: Date becomes one day before selected date
Issue I’m using latest Angular 4 and Angular-Material2-2.0.0-beta7. This is my template using MdDatePicker: <md-input-container fxFlex=”33″ class=”birthday-container”> <input mdInput name=”birthday” placeholder=”Birthday” required [(ngModel)]=”member.birthday” [mdDatepicker]=”birthdayPicker”> <button mdSuffix [mdDatepickerToggle]=”birthdayPicker”></button> </md-input-container> <md-datepicker #birthdayPicker></md-datepicker> In app.module, here is the provider: {provide: DateAdapter, useClass: NativeDateAdapter}
Continue readingcustom native date adapter no longer works since upgrade of Angular/Material from 5 to 6
Issue I had a custom date adapter in my Angular 5 app: import {NativeDateAdapter} from “@angular/material”; import {Injectable} from “@angular/core”; @Injectable() export class CustomDateAdapter extends NativeDateAdapter { parse(value: any): Date | null { if ((typeof value === ‘string’) && (value.indexOf(‘/’)
Continue readingAngular – fxFlex has no effect on elements
Issue This question is related to Angular 2+ and the @angular/flex-layout package. When trying to use fxFlex=”30″ for example, CSS styles are not being applied to elements. <mat-toolbar fxFlex=”30″ color=”primary”> <h2>Uh-oh</h2> </mat-toolbar> Solution Make sure you import the module in
Continue readingChange default gray palette dark mode color in Angular Material
Issue is there any way to change the default gray palette in angular material? I want to change the entire dark mode gray color in the material to a custom color, for example, Slate color in Tailwindcss I’m trying to
Continue readingAngular Material input Two-way Data Binding with [(ngModel)] is not working in production mode
Issue I have been working on an Angular project. Everything is working in localhost, but when I hosted the project, the two-way binding is not working. Here is the partial code: app.module.ts: import { FormsModule , ReactiveFormsModule} from ‘@angular/forms’; import
Continue readinghow to bold search pattern in search results in angular 2 material table
Issue I searched for “ium”. 3 rows matched and showed in search results. How do I now bold just the “ium” in the search results like the iphone phone directory search. Running demo and code is here Solution One solution
Continue readingHow to fix the height of the md-card inside md-grid-list in Angular2?
Issue I am using “@angular/material”: “2.0.0-beta.2” version. To display tiles, I have used md-card inside md-grid-list. I have added the attribute rowHeight to the md-grid-list. Even though the rowHeight is defined, the cards in the row are of not the
Continue readingHow to extract ViewContainerRef and ComponentRef in most efficient way?
Issue I work with angular-material mdSidenav and want to programmatically open it and insert custom component. I use @ViewChild(‘varName’) to extract componentInstance and @ViewChild(‘varName’, {read: ViewContainerRef}) to extract container where I would place my content. So, my question is –
Continue readingHow to implement drag and drop in cypress test?
Issue I am struggling to test drag and drop with Cypress and Angular Material Drag and Drop. So the goal is to move "Get to work" from Todo to Done. I have created the following test, that should make it
Continue readingAngular 5 Material Multi-level Carousel style SideNav Menu (no dropdown)
Issue I managed to do that in my side with Angular Material, it worked with sub-menus that were deployed with dropdowns, but I’m looking for a way to make them not “Dropdowns”, I’m looking for them to be like a
Continue readingCustom Validation in Angular Material Form
Issue I am implementing a Change Password Screen In which i need to check the equality of Password and Confirm Password . so I am implementing a custom validation. But I am getting some exception ” matcher.isErrorState is not a
Continue readingAngular Material: How to change top padding of mat-grid-tile
Issue am using angular-material with angular 5. mat-grid-tile has it’s own top padding that calculates using calc method. I want to set custom padding on mat-grid-tile. How can i do this? Solution The grid tile component sets top padding dynamically
Continue readingangular 5 with gridster having different components
Issue i am using angular 5 with latest material and trying to get gridster working from https://github.com/tiberiuzuld/angular-gridster2 My html looks like: <gridster [options]=”options”> <gridster-item [item]=”item” *ngFor=”let item of dashboard”> <app-infolet-smart-alerts [ngClass]=”(smartAlertState == false) ? ‘dashboard-widget-1-2’ : ‘dashboard-widget-2-2′” (onClickedExpand)=”smartAlertSize($event)”> </app-infolet-smart-alerts> </gridster-item>
Continue readingAngular 5 How to do Show/Hide form field mat-select on change
Issue I want to show or hide form field when mat-select is changed. The following code I used to do a show or hide the process. But it shows an error: Cannot read property ‘valueFieldType’ of undefined. 1).html file <mat-form-field
Continue readingIf X is an Angular component, then verify that it is part of this module
Issue I keep getting this horrible error whenever I add a new material directive/component: Uncaught Error: Template parse errors: ‘mat-input’ is not a known element: 1. If ‘mat-input’ is an Angular component, then verify that it is part of this
Continue readingHow to trigger Material2 <mat-error> to be displayed on input-change
Issue Given the example at https://material.angular.io/components/form-field/overview <div class=”example-container”> <mat-form-field> <input matInput placeholder=”Enter your email” [formControl]=”email” required> <mat-error *ngIf=”email.invalid”>{{getErrorMessage()}}</mat-error> </mat-form-field> </div> import {Component} from ‘@angular/core’; import {FormControl, Validators} from ‘@angular/forms’; /** @title Form field with error messages */ @Component({ selector: ‘form-field-error-example’,
Continue reading<mat-card> is not raised – there is no border
Issue I have this simple html: <mat-card> <mat-card-content> <code>{{file}}</code> </mat-card-content> </mat-card> for some reason when the mat-card element is rendered, it’s not raised – I am looking to get something like this: does anyone know if I might be missing
Continue readingAngular Material Form Validation
Issue If the fields of my FormGroup are model-bound, ala [(ngModel)], and become populated on page load, e.g. because of a service, my Submit Button, which is guarded as [disabled]=”biodataForm.status !== ‘VALID'”, does not become disabled. If the form comes
Continue readingAngular 5 material: dropdown (select) required validation is not working
Issue I have a material dropdown inside my ngForm, when I set this select as required it shows an asterisk * beside it but the form is seen as valid if I don’t select any option from the dropdown. <mat-form-field
Continue readingInbuilt deselectAll method not working in multiple Angular mat-selection-list
Issue I am using angular5 to create multiple mat-selection-list in same component. list-selection-example.html Shoes: <mat-selection-list #shoes> <mat-list-option *ngFor=”let shoe of typesOfShoes” [value]=”shoe”> {{shoe}} </mat-list-option> </mat-selection-list> <button mat-button (click)=”deselectShoes()”>Deselect all Shoes</button> Cloths: <mat-selection-list #cloths> <mat-list-option *ngFor=”let cloth of typesOfCloths” [value]=”cloth”> {{cloth}}
Continue readingHow to update value MatSelect in Angular 5
Issue Staff all right? I’m in need of a help is the following how do I set a value when loading the form in the MatSlected component of the Angular Material using reactive forms, when a value comes from a
Continue readingAngular 5 with Angular Material – Button Ripple Effect not working
Issue I have tried to apply the normal button of angular material but the ripple affect will not work at all. Iv’e got: import ‘core-js/es6/reflect’; import ‘core-js/es7/reflect’; import ‘zone.js/dist/zone’; import ‘hammerjs’; import ‘web-animations-js’; import { MatCheckboxModule } from ‘@angular/material’; import
Continue readingAngular Material viewchild dialog without dialog component class
Issue Is there way that I can open an angular material 2 dialog with view child reference without creating a dialog component? Solution Try this View.html <button (click)="openModal(mytemplate)">Open my template</button> <ng-template #mytemplate> <h1>It works</h1> </ng-template> component.ts import { MatDialog }
Continue readingHow to change size of font in angular materiel form fields of floating place holder
Issue Below is the form field of angular material. How can I add 2 different customize font-size for placeholder when it’s normal and when it floats. font-size : 20px; (When it is normal) font-size : 13px; (When it floats up
Continue readingCan't override the angular material theme with my css properties
Issue I am using Angular 6.0.8 with Angular Material theme version 6.4.0 Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows: currentColor
Continue readingComponent doesn't render within child route in Angular 9
Issue Here’s my app.component.html: <app-sidenav></app-sidenav> and sidenav.component.html: <mat-sidenav-container class=”some-class”> <mat-sidenav opened mode=”side”> … </mat-sidenav> <mat-sidenav-content> <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container> app-routing.module.ts: const routes: Routes = [ { path: ”, redirectTo: ‘/home’, pathMatch: ‘full’, }, { path: ‘home’, component: HomeComponent, }, { path:
Continue readingAngular: How will i link the pageSize of Mat-paginator to render that amount of items?
Issue I have a mat-accordion with multiple mat-expansion-panel. I want to apply pagination for the accordion. Below is my code: HTML <mat-accordion displayMode="flat" multi class="mat-table"> <section class="mat-elevation-z2 mat-header-row"> <span class="mat-header-cell">User Id</span> <span class="mat-header-cell">Name</span> <span class="mat-header-cell">Exam Name</span> <span class="mat-header-cell">Exam Category</span> </section>
Continue readingAngular material sidenav item retains focus after click
Issue I have a material menu sidenav as below, everytime i click on a menu item, the other menu items become unclickable, until i click outside the navbar, before hover or click effect works. I have tried solutions like: preventDefault
Continue readingmd-dialog Angular material/material2 abnormal behaviour (it hides the fixed position div)
Issue Actually i’m working on Angular 4 with material2 design , so i came across <md-dialog> , decided to use in my app. App contain a header i.e fixed position:fixed and a sidebar fixed as well. i used <md-dialog> and
Continue readingToggle md-sidenav to a different component
Issue so this is my main component which contains the header, sidebar and the content <md-sidenav-container> <app-navigation></app-navigation> <app-header></app-header> <div class=”app-content app-content-layout”> <router-outlet></router-outlet> </div> </md-sidenav-container> the app-header contains just a basic md-toolbar view with a button that will toggle the sidebar
Continue readinggrid tags not working in angular 2
Issue I am trying to create a grid layout in my Angular 2 based application with angular material2 but as i am trying to create a structure in the “app.component.html” file, the grid tags get an error that unknown html
Continue readingAngular 4 template reference variables
Issue is it possible to have a dynamic template reference variable? for example, i would like to do something like this: <tr *ngFor=”let item of items.controls; let i=index” > <th >{{i}}</th> <td> <mat-form-field> <input matInput matDatepicker=”{{‘pick’+i}}” placeholder=”date” formControlName=”date”> <mat-datepicker-toggle matSuffix
Continue readingAngular2 or 4 material treeview
Issue Is there any Angular Material tree view available using Angular 2 or 4 which should be recursive tree and should be customisable.could some one please point to good sample post or provide sample code. Solution Yes there is one
Continue readingAngular: Material custom theme doesnt apply in input field
Issue I have the following material custom sass file: @import ‘../node_modules/@angular/material/theming’; @include mat-core(); $app-primary: mat-palette($mat-red, 700, 800); $app-accent: mat-palette($mat-red, 700, 800); $app-warn: mat-palette($mat-red, 700, 800); $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn); $app-input-primary: mat-palette($mat-red, 100, 200); $app-input-accent: mat-palette($mat-red, 100, 200); $app-input: mat-light-theme($app-input-primary, $app-input-accent);
Continue readingAngular Material tabs not showing content
Issue I’m trying to create a material tab group like this one in the Angular Material component documentation. The problem I’m encountering is that the content of the tabs isn’t loading/showing. I’ve copied the exact code from the docs, but
Continue readingHow can I call a function when a someone clicks outside the mat-menu?
Issue I want to run a function every time a user opens a mat-menu and then clicks outside it. How can I detect that the mat-menu is opened and that a click event has occurred outside it? Thanks! Solution Just
Continue readingAngular Material: Components background color became transparent after customizing theme
Issue Issue: After customizing the theme colors of my Angular Material application, multiple material components lost their background colors such as (MatTooltip, MatSelect, MatDialog etc…) I followed the Official Guide to customize the theme of my app, and I’m pretty
Continue readingHow to wrap mat-list-item in mat-button in Angular
Issue I have a list and I would that every element of the list become clickable with a ripple effect like mat-button component. I tried this : <mat-list role=”list” *ngFor=”let userS of Projet?.backlog.userStory; let i=index”> <button mat-button> <mat-list-item role=”listitem”>User Story
Continue readingAngular-Material2: Align text and md-icon vertically to match vertical style?
Issue I know I am probably missing something here. I am trying to align md-icon and some text vertically, right now the word “sample text” displays below the icon. <div> <md-icon>home</md-icon> Sample Text </div> Output: I did try playing around
Continue readingCustomize Angular Material 2 Tooltip styles
Issue In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip What is the way to have custom format tooltips in Angular 4? EDIT: I am using Angular 4 & Material2. An example of how I am
Continue readingAngular 5 using material, jasmine karma test fail with mat-icon
Issue I’m trying to run jasmine karma with ng test Surprise with all the issues with Angular Materials. I see example of OLDER version of material many months ago when it was called md-icon instead of mat-icon etc… Thus this
Continue readingMat Slider value not getting updated while sliding
Issue Mat slider value is not sync updated while sliding. <mat-slider [(ngModel)]=”myValue” step=”1″ min=”0″ max=”100″ ></mat-slider> {{myValue}} It just got updated only after release slider thumb. Solution Using the javascript input event: <mat-slider [(ngModel)]=”myValue” (input)=”myValue = $event.value”></mat-slider> Answered By –
Continue readingRemove the Material Stepper header
Issue I want to get rid of the header navigation on the material stepper. Please suggest how can I do it? I tried setting the following css but didn’t seems to work: .mat-horizontal-stepper-header-container{display: none} Here is stackblitz link of the
Continue readingHow to create Right side Navbar with md-sidenav in Angular Material – Angular 2
Issue I am trying to create “right navbar” with angular material 2 md-sidenav. No matter what I do, it is always coming on the left. How can I change this to right sidenav instead? <md-sidenav #sidenavright mode=”side” class=”app-sidenav” opened=”true”> <app-question-rightnav></app-question-rightnav>
Continue readingAngular Material table expandable table row not expanding?
Issue I’ve been staring at this for too long, and I can’t figure it out. There’s a good example of an Angular Material table with an expandable row in this stackoverflow answer. I can plug the example into my app,
Continue readingAngular Material 2 with Bootstrap 4 Grid
Issue I am using Angular 4 and have installed Angular Material 2 as I like how the components look. So now I have all the components and want to create a layout. I know there’s Angular Flex-layout for it but
Continue readingHow to loop in dynamic array using ngFor ?
Issue I am trying to bind dynamic array to md-option. But it is throwing error. <md-select id=”hospital0{{index}}” placeholder=”Hospital” style=”width:100%; ” name=”hospital”> <md-option *ngFor=”let hospital of hospitalList{{index}}” [value]=”hospital.id”>{{ hospital.name }}</md-option> </md-select> I tried another approach. In that I am fetching the
Continue readingPrevent mat-option selection if condition
Issue I want to prevent mat-option from being selected because clicking on it will open a dialog. Only when selecting something from the dialog, should my option be selected. If nothing was selected from the dialog, mat-option should not be
Continue readingmd-menu override default max-width in Angular 2
Issue I’m using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px.
Continue readingAngular Material Dropdown: object value with binding, initial (default) value not showing
Issue Have a simple dropdown menu, populated with user objects: <mat-form-field> <mat-label>User</mat-label> <mat-select [(ngModel)]="userSelected" id="user"> <mat-option *ngFor="let user of users" [value]="user"> {{user.id}} {{user.name}} </mat-select> </mat-form-field> The objects user and userSelected are simple User-objects, holding an ID and name field: users:
Continue readingHow can I customize date and time format in ngx-mat-datetime-picker?
Issue I am working on Angular7 and its compatible ngx-mat-datetime-picker. It works as expected. Want to customize the format: Actual: mm/dd/yyyy, hh:mm:ss Expected: yyyy-mm-dd hh:mm:ss Currently I don’t find any option for formatting. I tried something like this in template
Continue readingMatSelect overlayDir now private when updating from Angular 11 to 12. How do I access it now?
Issue In Angular 11, in node_modules@angular\material\select there is a variable: /** * Overlay pane containing the options. * @deprecated To be turned into a private API. * @breaking-change 10.0.0 * @docs-private */ overlayDir: CdkConnectedOverlay; that in Angular 12 has now
Continue readingHow to align button right inside Dialog angular material?
Issue I want align button right corner of the dialog below is my html <div mat-dialog-content> <p>What’s your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div> <a href="https://stackblitz.com/edit/angular-ksmixt?file=app/dialog-overview-example-dialog.html">demo</a> Solution You can use the
Continue readingnot enough space in <mat-select>. How to add multiple line <mat-option>?
Issue I want to have under the option text additional lines which describe the option. By default mat-select limits number of characters and add “…” at the end of the line. I want to have multiple line option of needed.
Continue readingMaterial Angular Accordion header/title height
Issue So I’ve been trying to adopt Materials Accordion in my Web Application development. However having some troubles getting the header to expand in size as the content grows. My header is expected to have quite a few number of
Continue readingAccess Angular-Material SCSS Variables (Angular4)
Issue How to access certain SCSS variables in Angular-Material (Angular4)? For example, the default toolbar has a CSS class as follow: .mat-toolbar { display: flex; box-sizing: border-box; width: 100%; padding: 0 16px; flex-direction: column; } I want to get the
Continue readingDetect click on the currently active tab. ( Angular material tab )
Issue I have a mat-tab group with different tabs. I want to detect click on the active tab header. Eg. I have 2 tabs- a company tab and a users tab and inside each tab there are 2 views –
Continue readingHow to make separate angular material stepper header and content?
Issue I am doing a vertical stepper with angular material. The thing is that this stepper puts the content of each step below the step header, so if there are many steps it looks awfull because you have to scroll.
Continue readingCheckbox angular material checked by default
Issue I am trying to use an Angular Material checkbox, and set it by default as checked, but it is displayed as non-checked, what is wrong? <mat-checkbox class = “example-margin” [(ngModel)] = obj.impresora> <label>Printer</label> </mat-checkbox> obj.impresora property is boolean Solution
Continue readingmat-error put to separate component not rendering properly
Issue I want to use mat-errors to render server-side errors in my Angular 5 SPA. This is what I’ve got so far, and it works <mat-form-field class=”col-6″> <input matInput formControlName=”firstName”> <mat-error [hidden]=”!form.controls.firstName.hasError(‘required’)”>This field is required and cannot be empty</mat-error> <mat-error
Continue readingAngular Material customize tab
Issue I’m using angular 4 and I’m using Angular Material. <md-tab-group [disableRipple]=true> <md-tab label=”Tab 1″></md-tab> <md-tab label=”Tab 2″></md-tab> </md-tab-group> How can I fully customize the background color when (not-selected / selected), text color, and etc. I’ve already tried using pseudo
Continue readingHow to create two inputs as one form field and apply style specifically in Angular Material?
Issue Using Angular Material, I am building an example app with a form, which has a form field with two elements (input field and dropdown). So, for time being, I have implemented flex styles and attributes as follows: <div class="row">
Continue readingAngular Material – Filter Table by multiple filters and multiple filter values at the same time
Issue I’m trying to be able to have two different filters for a table of objects. The first one is a normal text/input based filter and works as expected. The second one I’m trying to get working is a row
Continue readingHow to include or exclude an attribute from the HTML in Angular 4
Issue I am using angular 4 with angular materials to construct a table. I want the mat-sort-header to be added conditionally on the following template. <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell> I have tried the following code: <mat-header-cell *matHeaderCellDef [mat-sort-header]=” column!=’id’ ? column
Continue readingAngular Material – MdInput to MatInputModule?
Issue What I’m Using Angular Angular Material ^2.0.0-beta.12 What I’m doing I just started a new project and installed material When copying some syntax from a previous project, I get an error when trying to import ‘import { MdInputModule} from
Continue readingHow to have a sidenav with router-outlet and a separate login with router-outlet?
Issue I am trying to implement an app with a login page and then when the user is logged in, there would be a navbar, toolbar and sidenav that have a router-outlet. Basically, in the app.component.html I have a defined
Continue readingSet font size of Angular Material Tooltip
Issue I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy. I am using Angular 4 and Angular Material to implement tooltips like this: <div mdTooltip=”tooltip
Continue readingunable to setAttribute disabled using renderer2 on angular material select
Issue I am not able to disable the select dropdown of angular material using the renderer2. Below is my code Component.html <mat-select #exLoc (selectionChange)=”someFun($event)” [(value)]=”someVal”> <mat-option aria-selected=”true” [value]=”locVal” *ngFor=”let location of locations”>{{location.LocationName}} </mat-option> </mat-select> Component.ts constructor(public renderer: Renderer2) {} @ViewChild(‘exLoc’)
Continue readingmat-slide-toggle shouldn't change it's state when I click cancel in confirmation window
Issue When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle
Continue readingMaking Material Table columns dynamic width to content
Issue After a lot of tinkering I finally have a decent setup for my material table. It’s got pagination, it’s got sort, it’s got all the goodies I need. However, it looks off because several of my columns are single
Continue readingHow to add icon to mat-icon-button
Issue I am using Angular with Material <button mat-icon-button><mat-icon svgIcon=”thumb-up”></mat-icon>Start Recording</button> I am trying to add an icon to button, but I can’t figure out how to do it, and can’t find documentation for this. https://material.angular.io/components/button/api looking the docs, there
Continue readingAngular5 – TypeError: Cannot read property 'template' of undefined
Issue I have added EDIT, DELETE and DETAILS buttons to each row in mat-table using Angular material@5.0.0-rc.2. All buttons are working but, * I am getting an error “Cannot read property ‘template’ of undefined” and * for each button click,
Continue readingAngular Material – Getting index of row in data table
Issue I am using the MatTable component from Angular Material to make a dynamic data table. I need to get the current position of a row. I can easily get the row on which the user clicked but I am
Continue readingMd-menu closes after clicking md-tab inside
Issue I built an md-menu with an md-tab-group inside, using Angular Material 2. On each md-tab I display a different list. The behavior I’m expecting to see is that the user to be able to switch between tabs and the
Continue readingAngular Material – Change color of mat-list-option on selected
Issue How can I change the color of selected option of mat-list-option? Right now I have something like this: Current list I want to change the color of whole option or card ‘on select’ to green. Something like this: My
Continue readingMat-select panel min-width
Issue I’m trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below: and I don’t know where its calculating this min-width. also I tried to add panelClass and override the min-width from this
Continue reading