Angular Material Dialog return value

Issue I have a following dialog component (which I open using dialog.open(MyDialogComponent) in another component): export class MyDialogComponent implements OnInit { constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {} ngOnInit() {} } I know I can return any data to the calling component by

Continue reading

angular-material2 responsive show/hide

Issue Is it possible to control visibility of element with angular-material2 using hide-xx show-xx hide-gt-xx show-gt-xx i know this is working with angularJS-material. Code below does not work: <md-toolbar color="primary"> <span>Application Title</span> <span class="example-fill-remaining-space"></span> <button md-button hide-xs show-gt-xs>Auto hide button</button>

Continue reading

Can't bind to 'formControl' since it isn't a known property of 'input' – Angular2 Material Autocomplete issue

Issue I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder=”Category” [mdAutocomplete]=”auto” [formControl]=”stateCtrl”> </md-input-container> <md-autocomplete #auto=”mdAutocomplete”> <md-option *ngFor=”let state of filteredStates | async” [value]=”state”> {{

Continue reading

Can't bind to 'formControl' since it isn't a known property of 'input' – Angular2 Material Autocomplete issue

Issue I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder=”Category” [mdAutocomplete]=”auto” [formControl]=”stateCtrl”> </md-input-container> <md-autocomplete #auto=”mdAutocomplete”> <md-option *ngFor=”let state of filteredStates | async” [value]=”state”> {{

Continue reading

Property binding matHeaderRowDef not used by any directive on an embedded template

Issue Here is the table html: <mat-table matSort class="inbox__messages" #table [dataSource]="dataSource"> <!– Building Column –> <ng-container matColumnDef="building"> <mat-header-cell *matHeaderCellDef> <div class="inbox__messages__header"> <h3 class="inbox__messages__header-label">B√Ętiments</h3> <mat-form-field class="inbox__messages__dropdown"> <mat-select placeholder="Choisir un b√Ętiment"> <mat-option *ngFor="let building of buildings" [value]="building.value"> {{ building.viewValue }} </mat-option> </mat-select>

Continue reading

Angular Material Collapsible Card

Issue Is there a way to make a collapsible card using angular material? Seems like something that would be fairly popular, but I’ve been searching for the appropriate angular material component/setting here:Angular Material – Card and found nothing. Thanks! Solution

Continue reading

Having issues with ng-idle/core onIdleEnd & Mat-Dialog

Issue There is an issue I have discovered with Ng-Idle, Material 6 nad Angular 6 “@ng-idle/core”: “^6.0.0-beta.3” “@ng-idle/keepalive”: “^6.0.0-beta.3” “@angular/core”: “^6.1.9” “@angular/cdk”: “^6.4.7” “@angular/material”: “^6.4.7” The scenario when ever a user has gone idle, a dialog (popup) displays a countdown

Continue reading

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