angular/material

AngularJS Material: Material Design component library for AngularJS (1.x). Use angular/material2 channel for Angular Material (v2+).

VishwajitShinde

@VishwajitShinde

<mat-header-cell *matHeaderCellDef mat-sort-header="true" > {{ column.myHeader }} </mat-header-cell> . Am I missing anything into this?

satishgorijala-github

@satishgorijala-github

@VishwajitShinde - You can try as below

<mat-table #table [dataSource]="dataSource" matSort>

                  <ng-container matColumnDef="colname">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> column heading </mat-header-cell>
                  </ng-container>

labyed

@labyed

hey guys, is there a way to select only months and years in datepicker, ty

Nate Gardner

@natejgardner

I'm having a bit of trouble with the datepicker- getting Can't bind to 'matDatePicker' since it isn't a known property of 'input'.

Template

<mat-form-field>
          <input [matDatePicker]="myDatePicker">
          <mat-datepicker #myDatePicker></mat-datepicker>
</mat-form-field>

It's imported in my app module:

import { ..., MatDatepickerModule, MatNativeDateModule,...} from '@angular/material`;
...
@NgModule({...,imports: [ ...,MatDatepickerModule, MatNativeDateModule,...],...})

Any ideas on what to try?

Luke Crooks

@crooksey

Anyone know how I can force dynamic rendered content into a certain grid list? Example here: https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-example.html

    <mat-grid-list cols="2"  rowHeight="8:1">
    <mat-grid-tile>
        <mat-grid-tile-header>Clocked In</mat-grid-tile-header>
    </mat-grid-tile>
    <mat-grid-tile >
        <mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
    </mat-grid-tile>

    <!-- render this inside Clocked In Column -->
    <mat-grid-tile *ngFor="let user of usersIn">
        <button mat-raised-button color="accent">
            {{user}}
        </button>
    </mat-grid-tile>

    <!-- render this inside Clocked out Column -->
    <mat-grid-tile *ngFor="let user of usersOut">
        <button mat-raised-button color="warn">
            {{user}}
        </button>
    </mat-grid-tile>

</mat-grid-list>

Filip Białek

@fbialek

hi there! can anybody share with me sass function or mixin for generating sass map with custom map for material color palette? so basically I would like to have a sass function that I can pass one color and it returns whole map with a palette.

Ahmad Abu Maizer

@embryologist

I have a mat-form-field with input/select elements and I am having hard time changing the placeholder/floating label color on ng-valid or ng-pending without changing the encapsulation, any advice would be really appreciated
the only way that I was able to change the placeholder/floating label is using the following,

body .mat-input-placeholder {
  color: rgba(13, 131, 209, 0.699);
}

how can I add ng-pending and ng-valid as well

Jakob Knutsen

@jakkn

is there a limitation on which mat- components that support errorStateMatcher?

question motivated by this error "Can't bind to 'errorStateMatcher' since it isn't a known property of 'mat-radio-group'."

bwhiting2356

@bwhiting2356

has anyone used Angular Material inside an Ionic app? I'm using Ionic as a PWA and in my desktop layout I would like to use some material components. I have the modules imported, and I think I imported the styles, but it's not looking right.

YuvaRaj Raghunapu

@mdmyr

Hi all,

am trying to using .html <mat-toolbar>My App</mat-toolbar> after installing the material; but am getting error as "'mat-toolbar' is not a known element:
“ Any help?

RavC357

@RavC357

Hi guys, I have a really annoying issue related to implementing material tools and can't work out what is going wrong, any help would be much appreciated!
so i installed material, cdk and browseranimation, imported them in my app.module.ts file but whenever I try to use a tool like <mat-form-field> in the html the dashboard compiles but the browser returns the following error:
Error: Template parse errors: 'mat-form-field' is not a known element

spent more time than i'd care to admit on this issue... xD

kwilliams-curago

@kwilliams-curago

@RavC357 make sure you import MatInputModule

RavC357

@RavC357

@kwilliams-curago Yup, i have imported that

@kwilliams-curago I think i have the issue narrowed down to the index.html file potentially causing the issue but i have no idea how to go about fixing it xD

Michael Prentice

@Splaktar

Just a reminder that this chat channel is for AngularJS Material (i.e. md-toolbar and md-button). All Angular Material questions (related to things like mat-toolbar or <button mat-button></button>) should be posted to https://gitter.im/angular/material2

Narendra

@NarenShalem

friends

can you suggest angular material time picker

Toni

@SpeedoPasanen

@NarenShalem hi, i suggest angular material time picker

Anupam Basu

@nupy_21_twitter

has anybody tried multiple lines (ngfor) of mat-autocomplete?

Rémy

@remyblancke

Someone to help me with stripe & angular ? got this error with pipe ' The pipe 'stripe' could not be found '

Tim Burnell

@tmburnell

I dont see stripe as a built in pipe: (where did you find it)
https://github.com/angular/angular/tree/master/packages/examples/common/pipes/ts

Petr

@bagl

Hi, is there some simple way to force MdAutocomplete to have value of null when no option is selected (instead of being the string in the input field?"

Petr

@bagl

Here's example

Tim Burnell

@tmburnell

does adding this option work: { id:null, text: “"}

or does the whole thing need to be null

Tim Burnell

@tmburnell

another option that is not great but might work is:
<input type="text" matInput [formControl]="control" [matAutocomplete]="$ac" (change)="cleanup()”>

cleanup() {
    if(!this.control.value) {
      this.control.setValue(null);
    }
}

Kirk Sefchik

@deathgaze

Can anyone tell me how I can change the size of my mat-icons?

Do I need to turn off style encapsulation to achieve this?

Tim Burnell

@tmburnell

I think you can just set the font size in css

Kirk Sefchik

@deathgaze

I think style encapsulation is stopping this

because my css won't target

Tim Burnell

@tmburnell

someone else opened this: angular/material2#10523
but cant find history here or stack overflow. Does anyone have an answer?

Tim Burnell

@tmburnell

is this even valid ts syntax open<T, D = any>

Tim Burnell

@tmburnell

I have found that any function that uses the syntax <R = any> fails ts validation and shows an error in WebStorm IDE

Pankaj Kumar

@pankumarptc

hi all, could someone guide me how to write custom function for mat-error tag with if condition like *ngIf="checkError()"

MattHubbell

@MattHubbell

@mdmyr did you import mat-toolbar? ie: import {MatToolbarModule} from '@angular/material/toolbar';

samavamsi1

@samavamsi1

            <span class="break">
              <label class="switch">
                <input type="checkbox" checked>
                <span class="slider round"></span>
              </label>
            </span><input type="number" name="Density" [(ngModel)]="op.Ro" placeholder="0" required #density="ngModel" [style.width.px]="80">

How to disbale a input text box when toggle button is enabled

swshyamash

@swshyamash

can we use sailsjs and angular together?

Toni

@SpeedoPasanen

@swshyamash sure, you can use any backend

if it can serve static files, it can serve anguar :D

Tim Burnell

@tmburnell

does anyone know how to render a snackbar inside a container (div) instead of the window? I tried to use ViewContainerRef however it still aligned itself to the window.

Where communities thrive

People

Repo info

Activity