angular/material2

Material Design components for Angular

Derek

@derekkite

@jlmcabral

José Luís Cabral

@jlmcabral

Thanks @derekkite ;)

Derek

@derekkite

I haven't the finest clue how to use it either.

KGA

@AishGaurav

can anyone help me with a CSS here, I am looping through an array of buttons & want to show the selected button in a different color : https://stackblitz.com/edit/angular-vfxba4?file=src/app/button-overview-example.html

Phil Mayfield

@philmayfield

@AishGaurav I dont think theres a way to track it without keeping track of which is selected. I'm sure there are a ton of ways to do this, heres a quick example: https://stackblitz.com/edit/angular-vfxba4-fgd1u7?file=src%2Fapp%2Fbutton-overview-example.html

But the important bit is the binding to the color attribute

This is of course the Angular Material way to set color, you could of course use css and a custom class or something, or css on a pseudo selector. But buttons dont act like toggles, there is no "active" state to them. You might also consider mat-button-toggle https://material.angular.io/components/button-toggle/overview

lorenzonet

@lorenzonet

I've a form like this, what would you suggest to create group of fields like that I've highlighted in compliance with Material Design

matrixbot

@matrixbot

BuZZ-dEE hi

wenditurner

@wenditurner_twitter

Forgive this question if it's inappropriate for this channel, but what npm lib would "you" pick for a rich text component ?

SAGO

@SAGOlab

Hi there, I have a button inside a dialog that enable reactive form if clicked, How can I store this event after dialog close, so If I reopen dialog the form is still enabled?

SAGO

@SAGOlab

Hi there I can update data in mat dialog without close it?

Bala_github

@GitHubBala23

Using Subject u can try

SAGO

@SAGOlab

Inside a dialog have a task status that display a value get from a REST API (the task status is: Ready) and a button ('start task'). On click 'start task' I need to change task status value, so I need to get the new REST API response, get task status 'In progress' and display it in Dialog, without close it...

there are other way apart from Subject?

Bala_github

@GitHubBala23

ha that's possible with Subject, in ur service file u make that varibale as string nd that varibale can be shared by both ur component whn u r calling that api d ur dialog component

SAGO

@SAGOlab

ok @GitHubBala23 thanks

David B

@dpbadiola

has anyone had any issues running the spec file from the material:navigation schematic? Error: Can't resolve all parameters for <name-of-component>: (?). wherein the concerned constructor parameter is BreakpointObserver. I’ve tried injecting on the spec file, still doesn’t resolve any. I am using v10 of Angular and Angular/Material

David B

@dpbadiola

Oh, found a solution. I used Jest over Jasmine, Karma and forgot to add this on in the tsconfig.spec.json - "emitDecoratorMetadata": true,

Shekhar Ramola

@shekharramola

is it possible that in material sidenav, I want to take use of only sidenav and not sidenav content

but the problem is it look like

sidenav content is the rest of the page if chosen sidenav

Sanket Thotange

@iamsank8

Is is possible to know when the mat table render is complete?

Derek

@derekkite

https://angular.io/guide/lifecycle-hooks#lifecycle-event-sequence ngAfterViewChecked @iamsank8

Sanket Thotange

@iamsank8

Thanks @derekkite I will check it.

RobinExtrant

@RobinExtrant

Hi, I don't found what version includes sort predicate for drag and drop, please help me. (Pull request with interesting comments here angular/components#20389)

Pavan K Jadda

@pavankjadda

I see https://material.angular.io/components/select is down

Anyone facing same issue

SAGO

@SAGOlab

Hi there, is possible to link an input (matDatepickerInput) to mat-calendar? How?

I'm trying to change the date on mat-calendar based on external input value...

Shekhar Ramola

@shekharramola

I am trying to give the width and height to the mat dialog

this.matDialog
        .open<ConfirmationDialogComponent, {
          width: '450px',
          height: '313px',
        }, boolean>(
          ConfirmationDialogComponent,
          {
            disableClose: true
          }
        )

but it is not respecting that

is it not the right way to give?

Bala_github

@GitHubBala23

try giving in %

Fynn Feldpausch

@fynnfeldpausch

Hey all. Is it possible to customize the padding values of e.g. angular material buttons? I see that there is a variable called $mat-button-padding in the _button-base.scss of angular material. Is there a possibility to change this value?

Victor Aprea

@vicatcu

hi all, i'm trying to write a cypress routine to handle drag and drop that uses cdk drag and drop (https://material.angular.io/cdk/drag-drop/overview)

i can get cypress to the point of holding the drag preview over the droplist target but the drop preview is not materializing

can anyone give me a clue as to what specific element needs to receive a mouseover event for that drop preview to appear?

Victor Aprea

@vicatcu

posted question here: https://stackoverflow.com/questions/64447531/getting-angular-material-cdk-drop-preview-to-appear-in-cypress-test

Nabin Karki

@naabin

Hi all, How can I resize the height of the mat-tree dynamically. I would like mat-tree to take the full height of the container without using vh unit (because vh does not work very well with mobile/tablet devices).

Timothy Spear

@n614cd

Hi, I think I am missing something basic. I am trying to build a reusable table component based on MatTable. I am moving the column definition to a column to contain multiple properties, starting with name, label, and eventually actions and other attributes. Does MatTable support working with objects? Or does it only support working with arrays of strings? Here is a simple stackblitz I built off the MatTable simple demo with the sample above my re-usable component (which shows zero rows). https://stackblitz.com/edit/angular-jr1gcs?file=src/app/table.component.html

Bala_github

@GitHubBala23

Hi Timothy, if u want to show objects data , u might wanna seperate out use a fun call in that col definition nd then in .ts return it as an array

Timothy Spear

@n614cd

@GitHubBala23 I am not even at the point of showing object data. For the moment, I am using a simple text area. What I am trying to do is use an object to define the column. e.f. the label for the column header, the name of the field in the array....

Bala_github

@GitHubBala23

ohk u want to build a resuable Mat data table component ??

Timothy Spear

@n614cd

yes

Timothy Spear

@n614cd

Adding a ViewChild to find the MatTable, I can see that the table is aware of the data. However, nothing is rendered under the TBODY element.

anyone have suggestions?

React Specialist

@AcodeWizard

As far as I am concerned, you may use the ViewChild ref to the MatTable in the wrong place of ts file. As you know, the ViewChild ref is be initialized in ngAfterViewInit lifecycle. That's why you can access the ref to the MatTable in that lifecycle. If you share the source with me, I can guide you in more detailed way. Thank you.

Gavin Fitzgerald

@Zeouterlimits

Hey, has anyone built an apply (submit) style of select component?
I've a multi select that I'd like to only take on apply, rather than as each option is selected.

It feels oddly complex to implement, like I have to maintain a selected field on each option and then apply them on submit?

Where communities thrive

People

Repo info

Activity