change 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 reading

Material 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 reading

error 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 reading

How 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 reading

mat-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

Angular 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 reading

How 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 reading

How 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 reading

Angular 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 reading

angular 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 reading

How 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

Inbuilt 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 reading

Component 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 reading

Angular: 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 reading

Toggle 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 reading

Angular 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 reading

Angular: 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 reading

Mat 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 reading

How 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 reading

How 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 reading

Angular 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 reading

unable 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 reading

How 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 reading

Mat-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