angular/material

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

yurigoular

@yurigoular

i guess tyou can pass the function to Child and execute in child

yurigoular

@yurigoular

if you pass as two-way binding, from grandparent to the current component, isn't possible?

stherrienaspnet

@stherrienaspnet

I do not understand how mat-error is working

here is my field name

              <mat-icon color="primary">business</mat-icon>
              <mat-form-field class="field-with-icon">
                <input matInput [formControl]="name" placeholder="{{'NAME' | translate}}" value="" required>
                <mat-error *ngIf="duplicateError == true">
                  {{'DUPLICATE_CUSTOMER_NAME' |translate}}
                </mat-error>
              </mat-form-field>

when i set this.dupplicateError = true nothing is displayed on the form, no error message, did i forgot something?

Mateus Carniatto

@Carniatto

There is any easy way to have a inverted fab button?

yurigoular

@yurigoular

invert? explain better pls

Mateus Carniatto

@Carniatto

like this

icon with primary and background with white

I was trying to avoid hacking css

yurigoular

@yurigoular

get the main color of angular material, check the number of bg and color for change

Aligator_sah

@aligator4sah

@stherrienaspnet Add [errorStateMatcher]="matcher" in your <input> tag. And also import errorStateMatcher in your .ts file

Aldo Velasco

@aldovelco

guys where can I see what's the latest compatible version for Angular 4.4?

gerome0123

@gerome0123

any suggestion if i have more than 10 entries how can i make it fit in one page with side nav??

Marco Licci

@MarcoLicci

Hi, how can I set the selected options of a MatSelect programmatically?

Tim Burnell

@tmburnell

@MarcoLicci 2-way bind to the value. and when you programmatically set the value it will set the select box

Daniel Hines

@d4hines

It seems that <mat-error>... only shows up when the field is empty and touched. Is there a way I can take control over when it shows?

Gopal Singh

@gopalsingh

@gopalsingh
anybody have idea about rowHeight="fit" ??
have need to expend data on click in at-grid-tile

Akash Juneja

@akashjuneja

Hi , can anyone tell me that how to make file uploader in angular material?

Laurens Vanpoucke

@laurensvanpoucke

Is it possible to use several date formats in the entire app when using angular material datepicker?

Martin Koppehel

@martin31821

Hi,
I'm creating a set of high-level components such as a log-in dialog and want to add support to theme them. How can I do this?

Aldo Velasco

@aldovelco

@martin31821 I've seen some people disabling the ViewEncapsulation so you can just work with the styles normally

Martin Koppehel

@martin31821

@aldovelco well that does not seem desirable to me.

Aldo Velasco

@aldovelco

@martin31821 That's precisely what some components do: https://github.com/angular/material2/blob/b67813ef8305d63b6117d982053f3a1b80878e47/src/cdk/table/table.ts#L116

harshithabhushan92

@harshithabhushan92

Hello, Needed a help. i was using mat-select dropdown with checkboxes. How do I get the status of checkbox checked/unchecked? Or how do I bind the selected status of an object to the option?

Nuwan Chamara

@kdnc

Hi, I want the Angular material tab's mat-ink-bar to take the width of the tab header text's width. Currently it is larger than the tab header text width.

Above image shows the current look

Above image shows how I want it to be

Can somebody help me on how to make this happen?

Mateus Carniatto

@Carniatto

Hey Guys, I have a recurrent problem with Angular Material. Every time I close a dialog or a sidenav the mat-button-icon is focused under it. Am I doing something wrong or there is a fix for this?

Mateus Carniatto

@Carniatto

cdkTrapFocus does not seems to work

gopigopi096

@gopigopi096

how to add mat auto complete not found message when the list is empty in angular 5

pookdeveloper

@pookdeveloper

If any want to use emojis in angular or ionic: https://github.com/pookdeveloper/emojis-angular-ionic

Russel Porosky

@metaloha

Is it possible to emit values from an open dialog to the calling component without closing the dialog?

Or do I need to pass a Subject as one of the data values?

Fran Denia

@fdenia

good to all, I currently have a component that draws multiple mat-progress-bar and I would like to be able to update the value of only one of the elements of progress. I can not find the way, what I do is the following:

@ViewChildren(MatProgressBar) progress: QueryList<MatProgressBar>; 

  playTrack(event){
  let pr   = this.progress.filter(ins => ins._elementRef.nativeElement.dataset.hash == id)[0];             
  pr.value = 50;
  }

cdskill

@cdskill

@cdskill
Hi guys, is there someone who can help me with the sorting of column of dataTable ?
there is my issue : I actually retrieve from the server a field of type date with the format TZ (yyyy-MM-dd'T'HH:mm:ss.SSS'Z') and then I format this with momentJS to have a this format DD/MM/YYYY HH:mm
BUT the sorting method of the column considere it like a string
so the sort is f*cked up...
I tried to go this way : I created a new Class

export class DateFinal {
    inputDate?: any;
    outputDate?: string;

    public toString = () : string => {

        return this.outputDate;
    }
}

in the inputDate I define the the TZ format date and the output the DD/MM/YYYY HH:mm

in the md-cell of the datatble, with the toString() method I dispay the formated date
but I want that the sorting accessor SORT the date column in the inputDate attribut of the object DateFinal
is there an other way ? any solution ?

cdskill

@cdskill

problem SOLVED.

pookdeveloper

@pookdeveloper

@cdskill put the code resolved :)

cdskill

@cdskill

hahaha :D their is no solution in the internet I've the only one to sort a date

:-p

well

cdskill

@cdskill

This is the class :

export class DateFinal {
    inputDate?: any;
    outputDate?: string;

    public toString = () : string => {

        return this.outputDate;
    }
}

this the formatter :
value is the timestamp from the back-end and this.options.format is the DD/MM/YYYY for example

let tmpValue = new DateFinal();
        tmpValue.inputDate = new Date(value);
        tmpValue.outputDate = moment(value).format(this.options.format);
        return tmpValue;

there is the custom sorting :

  ngOnInit() {
    this.dataSource = new MatTableDataSource < any > (this.data.rows);

    this.dataSource.sortingDataAccessor = (item, property) => {

      if(item[property] instanceof DateFinal) {
        return item[property].inputDate;
      } else {
        return item[property];
      }
    };

  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

Fernando L. Estuesta

@champolot

hey guys. is it fine to jump to angular material from bootstrap?

Lisa Copeland

@lisacopeland

@champolot I think there is no problem using angular material with bootstrap

Where communities thrive

People

Repo info

Activity