I am trying to use Angular Material [Autocomplete][1] component in my Angular 2 project. I added the following to my template.

```html
&lt;md-input-container&gt;
   &lt;input mdInput placeholder=&quot;Category&quot; [mdAutocomplete]=&quot;auto&quot; [formControl]=&quot;stateCtrl&quot;&gt;
&lt;/md-input-container&gt;

&lt;md-autocomplete #auto=&quot;mdAutocomplete&quot;&gt;
   &lt;md-option *ngFor=&quot;let state of filteredStates | async&quot; [value]=&quot;state&quot;&gt;
      {{ state }}
   &lt;/md-option&gt;
&lt;/md-autocomplete&gt;
```

Following is my component.

    import {Component, OnInit} from &quot;@angular/core&quot;;
    import {ActivatedRoute, Router} from &quot;@angular/router&quot;;
    import {FormControl} from &quot;@angular/forms&quot;;
    
    @Component({
        templateUrl: &#39;./edit_item.component.html&#39;,
        styleUrls: [&#39;./edit_item.component.scss&#39;]
    })
    export class EditItemComponent implements OnInit {
        stateCtrl: FormControl;
    	states = [....some data....];
    		
    	constructor(private route: ActivatedRoute, private router: Router) {
            this.stateCtrl = new FormControl();
            this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name =&gt; this.filterStates(name));
        }
        ngOnInit(): void {
        }
    	filterStates(val: string) {
            return val ? this.states.filter((s) =&gt; new RegExp(val, &#39;gi&#39;).test(s)) : this.states;
        }
    }


I&#39;m getting the following error. It looks like the `formControl` directive is not being found.

&gt; Can&#39;t bind to &#39;formControl&#39; since it isn&#39;t a known property of &#39;input&#39;

What is the issue here?

  [1]: https://material.angular.io/components/component/autocomplete

Can&#39;t bind to &#39;formControl&#39; since it isn&#39;t a known property of &#39;input&#39; - Angular2 Material Autocomplete issue

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design&#39;s Components like this:

field:
```html
&lt;mat-form-field&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;mat-hint align=&quot;start&quot;&gt;&lt;strong&gt;{{hint}}&lt;/strong&gt; &lt;/mat-hint&gt;
    &lt;mat-hint align=&quot;end&quot;&gt;{{message.value.length}} / 256&lt;/mat-hint&gt;
    &lt;mat-error&gt;This field is required&lt;/mat-error&gt;
&lt;/mat-form-field&gt;
```
textbox:
```html
&lt;field hint=&quot;hint&quot;&gt;
    &lt;input matInput 
    [placeholder]=&quot;placeholder&quot; 
    [value]=&quot;value&quot;
    (change)=&quot;onChange($event)&quot; 
    (keydown)=&quot;onKeydown($event)&quot; 
    (keyup)=&quot;onKeyup($event)&quot; 
    (keypress)=&quot;onKeypress($event)&quot;&gt;
&lt;/field&gt;
```
Usage:
```html
&lt;textbox value=&quot;test&quot; hint=&quot;my hint&quot;&gt;&lt;/textbox&gt;
```
This results in approximately this:
```html
    &lt;textbox  placeholder=&quot;Personnummer/samordningsnummer&quot; value=&quot;&quot; ng-reflect-placeholder=&quot;Personnummer/samordningsnummer&quot;&gt;
       &lt;field&gt;
          &lt;mat-form-field class=&quot;mat-input-container mat-form-field&gt;
             &lt;div class=&quot;mat-input-wrapper mat-form-field-wrapper&quot;&gt;
                &lt;div class=&quot;mat-input-flex mat-form-field-flex&quot;&gt;
                   &lt;div class=&quot;mat-input-infix mat-form-field-infix&quot;&gt;
                      &lt;input _ngcontent-c4=&quot;&quot; class=&quot;mat-input-element mat-form-field-autofill-control&quot; matinput=&quot;&quot; ng-reflect-placeholder=&quot;Personnummer/samordningsnummer&quot; ng-reflect-value=&quot;&quot; id=&quot;mat-input-2&quot; placeholder=&quot;Personnummer/samordningsnummer&quot; aria-invalid=&quot;false&quot;&gt;
                      &lt;span class=&quot;mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper&quot;&gt;&lt;/span&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;mat-input-underline mat-form-field-underline&quot;&gt;
                   &lt;span class=&quot;mat-input-ripple mat-form-field-ripple&quot;&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;mat-input-subscript-wrapper mat-form-field-subscript-wrapper&quot;&gt;&lt;/div&gt;
             &lt;/div&gt;
          &lt;/mat-form-field&gt;
       &lt;/field&gt;
    &lt;/textbox&gt;
```
But I&#39;m getting &lt;i&gt;&lt;b&gt;&quot;mat-form-field must contain a MatFormFieldControl&quot;&lt;/b&gt;&lt;/i&gt; in the console. I guess this has to do with mat-form-field not directly containing a matInput-field. But it is containing it, it&#39;s just withing the ng-content projection.

Here is a blitz:
https://stackblitz.com/edit/angular-xpvwzf

mat-form-field must contain a MatFormFieldControl

I&#39;ve installed Material for angular, 

I&#39;ve imported on my app module MatIconModule (with `import { MatIconModule } from &#39;@angular/material/icon&#39;;`)

I&#39;ve added it under my ngmodule imports with:

    @NgModule({
        imports: [ 
    //...
    MatIconModule, 
    //...

I&#39;ve imported all stylesheets

And I&#39;ve also imported it in my app component that is actually (trying to) using them (with another `import {MatIconModule} from &#39;@angular/material/icon&#39;;` line at the beginning of it).

But material icons still not appear.

For example, with this line:

    &lt;button mat-icon-button (click)=&quot;snav.toggle()&quot;&gt;&lt;mat-icon&gt;menu&lt;/mat-icon&gt;&lt;/button&gt;

I&#39;m expecting something like this:

[![expected][1]][1]


But i get this:

[![actual][2]][2]


  [1]: https://i.stack.imgur.com/U7Vec.jpg
  [2]: https://i.stack.imgur.com/B0We3.jpg


Got any suggestion?

Angular Material icons not working

I want to use my company&#39;s brand colors throughout the app.

I have found this issue: https://stackoverflow.com/questions/37268999/angularjs-2-material-design-set-color-palette where I can build an *allegedly custom* theme, but it&#39;s basically just using different parts of pre-built palettes. I don&#39;t want to use Material2&#39;s predefined colors. I want my unique and special brand colors. Is there a better way (righter?) to create my own theme, than just hack around with `_palette.scss`?

Do I need to make a mixin for my brand palette? If so - any guides on how to do it properly? What are the meanings of the different shades of colors (marked with numbers like: 50, 100, 200, A100, A200...)?

Any information about this area will be much appreciated!

How can I use custom theme palettes in Angular?

I have a mat-select where the options are all objects defined in an array.  I am trying to set the value to default to one of the options, however it is being left selected when the page renders.

My typescript file contains:

      public options2 = [
        {&quot;id&quot;: 1, &quot;name&quot;: &quot;a&quot;},
        {&quot;id&quot;: 2, &quot;name&quot;: &quot;b&quot;}
      ]
      public selected2 = this.options2[1].id;

My HTML file contains:

      &lt;div&gt;
        &lt;mat-select
            [(value)]=&quot;selected2&quot;&gt;
          &lt;mat-option
              *ngFor=&quot;let option of options2&quot;
              value=&quot;{{ option.id }}&quot;&gt;
            {{ option.name }}
          &lt;/mat-option&gt;
        &lt;/mat-select&gt;
      &lt;/div&gt;

I have tried setting `selected2` and the `value` in `mat-option` to both the object and its id, and have tried using both `[(value)]` and `[(ngModel)]` in the `mat-select`, but none are working.

I am using material version 2.0.0-beta.10

Angular Material: mat-select not selecting default

I am using Material 2 to add `md-raised-button`. I want to apply this directive only if certain condition becomes true.

For example: 

    &lt;button md-raised-button=&quot;true&quot;&gt;&lt;/button&gt;

Another example:
I created a basic dynamic reactive form in plunker.
I am using `formArrayName` directive of reactive form for array of controls.
I want to apply `formArrayName` directive only if specific condition becomes true, otherwise don&#39;t add `formArrayName` directive.

Here is a [plunker link][1].


  [1]: https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J?p=preview

Apply a directive conditionally

I have a question regards Angular Material (with Angular 4+). Say in my component template I add a `&lt;mat-horizontal-stepper&gt;` component, and within each step `&lt;mat-step&gt;` I have stepper buttons to navigate the component. Like so...

    &lt;mat-horizontal-stepper&gt;
      &lt;mat-step&gt;
        Step 1
        &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
      &lt;/mat-step&gt;
      &lt;mat-step&gt;
        Step 2
        &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
      &lt;/mat-step&gt;
      &lt;mat-step&gt;
        Step 3
        &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
        &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
      &lt;/mat-step&gt;
    &lt;/mat-horizontal-stepper&gt;

Now I am wondering if it is possible to remove the buttons out of each step and have them elsewhere in the `&lt;mat-horizontal-stepper&gt;` in a static position or even outside the `&lt;mat-horizontal-stepper&gt;` and I can navigate backwards and forwards using code within my component typescript file. To give an idea, I would like my HTML be something like this

    &lt;mat-horizontal-stepper&gt;
    	&lt;mat-step&gt;
    		Step 1
    	&lt;/mat-step&gt;
    	&lt;mat-step&gt;
    		Step 2
    	&lt;/mat-step&gt;
    	&lt;mat-step&gt;
    		Step 3
    	&lt;/mat-step&gt;
    	&lt;!-- one option --&gt;
    	&lt;div&gt;
    	   &lt;button mat-button matStepperPrevious type=&quot;button&quot;&gt;Back&lt;/button&gt;
    	   &lt;button mat-button matStepperNext type=&quot;button&quot;&gt;Next&lt;/button&gt;
    	&lt;/div&gt;
    &lt;/mat-horizontal-stepper&gt;
    
    &lt;!-- second option --&gt;
    &lt;div&gt;
       &lt;button (click)=&quot;goBack()&quot; type=&quot;button&quot;&gt;Back&lt;/button&gt;
       &lt;button (click)=&quot;goForward()&quot; type=&quot;button&quot;&gt;Next&lt;/button&gt;
    &lt;/div&gt;


Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

In multiple places within angular material source, there are elements/ css classes that have `cdk` as their prefix.

Does anyone know what the abbreviation for `cdk` in angular material context?

What is `cdk` in Angular Material 2 components

I have a normal Angular Material 2 DataTable with sort headers.
All sort are headers work fine. Except for the one with an object as value.
These doesn&#39;t sort at all. 

For example:

&lt;!-- language: lang-html --&gt;

     &lt;!-- Project Column - This should sort!--&gt;
        &lt;ng-container matColumnDef=&quot;project.name&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Project Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.project.name}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;

note the `element.project.name`

Here&#39;s the displayColumn config:

     displayedColumns = [&#39;project.name&#39;, &#39;position&#39;, &#39;name&#39;, &#39;test&#39;, &#39;symbol&#39;];

Changing `&#39;project.name&#39;` to `&#39;project&#39;` doesn&#39;t work nor `&quot;project[&#39;name&#39;]&quot;`

What am I missing? Is this even possible?

Here&#39;s a Stackblitz:
[Angular Material2 DataTable sort objects][1]


**Edit:**
Thanks for all your answers.
I&#39;ve already got it working with dynamic data. So I don&#39;t have to add a switch statement for every new nested property.

Here&#39;s my solution: (Creating a new DataSource which extends MatTableDataSource is not necessary)

&lt;!-- language: typescript --&gt;

    export class NestedObjectsDataSource extends MatTableDataSource&lt;MyObjectType&gt; {
    
      sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) =&gt; string | number) =
        (data: WorkingHours, sortHeaderId: string): string | number =&gt; {
          let value = null;
          if (sortHeaderId.indexOf(&#39;.&#39;) !== -1) {
            const ids = sortHeaderId.split(&#39;.&#39;);
            value = data[ids[0]][ids[1]];
          } else {
            value = data[sortHeaderId];
          }
          return _isNumberValue(value) ? Number(value) : value;
        }
    
      constructor() {
        super();
      }
    }


  [1]: https://stackblitz.com/edit/angular-rtw2fx

Angular Material 2 DataTable Sorting with nested objects

I&#39;m trying to use `&lt;mat-form-field&gt;` in an Angular project using Material2 but I&#39;ve hit a wall.

Getting the error message below.

```none
Uncaught Error: Template parse errors:
&#39;mat-form-field&#39; is not a known element:
1. If &#39;mat-form-field&#39; is an Angular component, then verify that it is part of this module.
2. If &#39;mat-form-field&#39; is a Web Component then add &#39;CUSTOM_ELEMENTS_SCHEMA&#39; to the &#39;@NgModule.schemas&#39; of this component to suppress this message. (&quot;[ERROR -&gt;]&lt;mat-form-field&gt;
  &lt;input matInput placeholder=&quot;Simple placeholder&quot; required&gt;
&lt;/mat-form-field&gt;&quot;): ng:///MaterialModule/SearchComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24660)
    at JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler._compileTemplate (compiler.js:34446)
    at eval (compiler.js:34347)
    at Set.forEach (&lt;anonymous&gt;)
    at JitCompiler._compileComponents (compiler.js:34347)
    at eval (compiler.js:34217)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34216)
```

This is my code I&#39;ve got.

**app.module.ts**

    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from &#39;@angular/core&#39;;
    import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from &#39;@angular/forms&#39;;
    
    import { HttpModule } from &#39;@angular/http&#39;;
    import { HttpClientModule } from &#39;@angular/common/http&#39;;
    
    import {
      MatButtonModule,
      MatFormFieldModule,
      MatInputModule,
      MatRippleModule
    } from &#39;@angular/material&#39;;
    import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;
    
    import { AppComponent } from &#39;./app.component&#39;;
    import { YahooService } from &#39;./yahoo.service&#39;;
    import { SearchComponent } from &#39;./search/search.component&#39;;
    
    @NgModule({
      exports: [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,
      ],
      declarations: [
        SearchComponent,
      ],
    })
    export class MaterialModule {};
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        MaterialModule,
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
      ],
      providers: [
        YahooService,
      ],
      bootstrap: [
        AppComponent,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
    })
    export class AppModule { }



**search.component.html**

```html
&lt;mat-form-field&gt;
   &lt;input matInput placeholder=&quot;Simple placeholder&quot; required&gt;
&lt;/mat-form-field&gt;
```

**search.component.ts**

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { FormBuilder, FormGroup } from &#39;@angular/forms&#39;;
    
    @Component({
      selector: &#39;app-search&#39;,
      templateUrl: &#39;./search.component.html&#39;,
      styleUrls: [&#39;./search.component.css&#39;]
    })
    export class SearchComponent implements OnInit {
    
      options: FormGroup;
    
      constructor(fb: FormBuilder) {
        this.options = fb.group({
          floatLabel: &#39;never&#39;,
        });
      }
    
      ngOnInit() {
      }
    
    }



**package.json**

    {
      &quot;name&quot;: &quot;forecast&quot;,
      &quot;version&quot;: &quot;0.0.0&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;scripts&quot;: {
        &quot;ng&quot;: &quot;ng&quot;,
        &quot;start&quot;: &quot;ng serve&quot;,
        &quot;build&quot;: &quot;ng build&quot;,
        &quot;test&quot;: &quot;ng test&quot;,
        &quot;lint&quot;: &quot;ng lint&quot;,
        &quot;e2e&quot;: &quot;ng e2e&quot;
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@angular-devkit/schematics&quot;: &quot;0.0.40&quot;,
        &quot;@angular/animations&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/cdk&quot;: &quot;^5.0.3&quot;,
        &quot;@angular/common&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/compiler&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/core&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/forms&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/http&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/material&quot;: &quot;^5.0.3&quot;,
        &quot;@angular/platform-browser&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;^5.1.3&quot;,
        &quot;@angular/router&quot;: &quot;^5.1.3&quot;,
        &quot;axios&quot;: &quot;^0.17.1&quot;,
        &quot;body-parser&quot;: &quot;^1.18.2&quot;,
        &quot;core-js&quot;: &quot;^2.5.3&quot;,
        &quot;express&quot;: &quot;^4.16.2&quot;,
        &quot;node-sass&quot;: &quot;^4.7.2&quot;,
        &quot;nodemon&quot;: &quot;^1.14.7&quot;,
        &quot;q&quot;: &quot;^1.5.1&quot;,
        &quot;rxjs&quot;: &quot;^5.5.6&quot;,
        &quot;zone.js&quot;: &quot;^0.8.4&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular/cli&quot;: &quot;^1.6.3&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^5.1.3&quot;,
        &quot;@types/jasmine&quot;: &quot;2.5.38&quot;,
        &quot;@types/node&quot;: &quot;~6.0.60&quot;,
        &quot;codelyzer&quot;: &quot;~2.0.0&quot;,
        &quot;jasmine-core&quot;: &quot;~2.5.2&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~3.2.0&quot;,
        &quot;karma&quot;: &quot;~1.4.1&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;~2.0.0&quot;,
        &quot;karma-cli&quot;: &quot;~1.0.1&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;^0.2.0&quot;,
        &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
        &quot;protractor&quot;: &quot;~5.1.0&quot;,
        &quot;ts-node&quot;: &quot;~2.0.0&quot;,
        &quot;tslint&quot;: &quot;~4.5.0&quot;,
        &quot;typescript&quot;: &quot;~2.4.0&quot;
      }
    }

&#39;mat-form-field&#39; is not a known element - Angular 5 &amp; Material2

I&#39;ve noticed that the directive `matTooltip` doesn&#39;t work on a disabled button. How can I achieve it?

Example:

&lt;!-- language: lang-xml --&gt;

	&lt;button mat-raised-button [disabled]=&quot;true&quot; matTooltip=&quot;You cannot delete that&quot;&gt;
	  &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
	&lt;/button&gt;

For an enabled button it works perfectly:

&lt;!-- language: lang-xml --&gt;

	&lt;button mat-raised-button [disabled]=&quot;false&quot; matTooltip=&quot;You cannot delete that&quot;&gt;
	  &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
	&lt;/button&gt;

Angular Material - How to add a tooltip to a disabled button

I have a component which is meant to be used in an Angular Material MdDialog :

    @Component({
      ...
    })
    export class MyComponent {

      constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: 
    MdDialogRef&lt;MyComponent&gt;) {
    ...
      }
    

    }

I am trying to Unit Test it with Jasmine :

    describe(&#39;MyComponent&#39;, () =&gt; {
      let component: MyComponent;
      let fixture: ComponentFixture&lt;MyComponent&gt;;
    
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          imports: [
            SharedTestingModule,
          ],
          declarations: [
            MyComponent,
          ],
        })
        .compileComponents();
      }));
    
      ...
      
    });

Unfortunately, I am getting the following error :

&gt;Error: No provider for InjectionToken MdDialogData!

SharedTestingModule imports and exports my custom Angular Material module, which itself imports and exports MdDialogModule.

How can I get rid of this error?

Thank you very much!

    Angular 4.2.4
    Angular Material 2.0.0-beta.7
    Jasmine 2.5.3

Angular Material and Jasmine : &quot; No provider for InjectionToken MdDialogData! &quot;

I am using Angular with Material

     &lt;button mat-icon-button&gt;&lt;mat-icon svgIcon=&quot;thumb-up&quot;&gt;&lt;/mat-icon&gt;Start Recording&lt;/button&gt;

I am trying to add an icon to button, but I can&#39;t figure out how to do it, and can&#39;t find documentation for this.

https://material.angular.io/components/button/api

looking the docs, there is this:

[![enter image description here][1]][1]

that button has the following html:

    &lt;a _ngcontent-c1=&quot;&quot; aria-label=&quot;Angular Material&quot; class=&quot;docs-button mat-button&quot; mat-button=&quot;&quot; routerlink=&quot;/&quot; tabindex=&quot;0&quot; aria-disabled=&quot;false&quot; href=&quot;/&quot;&gt;&lt;span class=&quot;mat-button-wrapper&quot;&gt;
        &lt;img _ngcontent-c1=&quot;&quot; alt=&quot;angular&quot; class=&quot;docs-angular-logo&quot; src=&quot;../../../assets/img/homepage/angular-white-transparent.svg&quot;&gt;
        &lt;span _ngcontent-c1=&quot;&quot;&gt;Material&lt;/span&gt;
      &lt;/span&gt; &lt;div class=&quot;mat-button-ripple mat-ripple&quot; matripple=&quot;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;mat-button-focus-overlay&quot;&gt;
    &lt;/div&gt;
    &lt;/a&gt;

is that the right way to do it?

  [1]: https://i.stack.imgur.com/Zl2KI.png

How to add icon to mat-icon-button

how should I define an index variable when angular material table is used as ngFor is not used in this table. 

I did search for it in the documentation but index is not mentioned any where in it. 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

      &lt;mat-table #table [dataSource]=&quot;dataSource&quot;&gt;

        &lt;!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition&quot; --&gt;

        &lt;!-- Position Column --&gt;
        &lt;ng-container matColumnDef=&quot;position&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; No. &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.position}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;

        &lt;!-- Name Column --&gt;
        &lt;ng-container matColumnDef=&quot;name&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.name}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;

        &lt;!-- Weight Column --&gt;
        &lt;ng-container matColumnDef=&quot;weight&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Weight &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.weight}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;

        &lt;!-- Symbol Column --&gt;
        &lt;ng-container matColumnDef=&quot;symbol&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Symbol &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.symbol}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;

        &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

where and how do i define an index variable for the array that  I used in this table, so that I can bind the index value in my table itself.

how to define index in angular material table

I&#39;m using dialog from angular material-2.
 
The problem is: I can&#39;t disable auto focus when modal-dialog is opened in iPhone or tablet especially. In iOS, it automatically focuses the first input field in the dialog!

I tried with tab index and with auto focus in other input-field it doesn&#39;t work

I&#39;m using Angular 2 for my code, in my dialog I&#39;m using form-control. I tried to use `markasuntouched` `afterviewInit`, but I still have the same problem !! 



Disable auto focus in dialog- modal in Angular 2/ material

Recently, the successor to MDL (Material Design Lite) project was launched as [Material Components for the Web][1]. One of its goals is &quot;Seamless integration with other JS frameworks and libraries&quot;. 

There is another project [Angular Material2][2] which provides material design components specifically for Angular (v2+). 

Both projects are creating material design based **UI components**. Also, they have similar set of components [ready][3]/[in-active-development][4], and same set of components as coming-soon (listed [here][3] and [here][5]).

Can someone please help me understand the overlap between 2 projects and which one should I pick for new projects? 

At a fundamental level, I do understand Angular Material2 will more seamlessly and tightly integrate with Angular projects, while Material Components for the Web will provide hooks for multiple JS frameworks to use. But I fail to see reason for overlap and which one will have more momentum (read more components). 


  [1]: https://github.com/material-components/material-components-web
  [2]: https://github.com/angular/material2
  [3]: https://github.com/angular/material2#available-features
  [4]: https://github.com/material-components/material-components-web/tree/master/packages
  [5]: https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&amp;q=is%3Aopen%20is%3Aissue%20label%3Av2-component%20

Material Components for the Web vs Angular Material 2

I imported a [date picker][1] in a project and was wondering if there was any official recent component from angular and material to include time in the calendar as well.  
I&#39;ve seen plenty of time pickers in material documentation and researched a lot of third party ones, but they seem very complex.  


  [1]: https://material.angular.io/components/datepicker/overview

Angular-Material DateTime Picker Component?

I have this, which I would assume to work, but doesn&#39;t:

&lt;!-- language: lang-html --&gt;

    &lt;mat-icon color=&quot;white&quot;&gt;home&lt;/mat-icon&gt;

Then, I also have:

&lt;!-- language: lang-html --&gt;

    &lt;button mat-raised-button color=&quot;accent&quot; type=&quot;submit&quot;
     [disabled]=&quot;!recipientForm.form.valid&quot;&gt;
        &lt;mat-icon color=&quot;white&quot;&gt;save&lt;/mat-icon&gt;SAVE
    &lt;/button&gt;

This code snippet, for some reason, does work (shows the icon as white).

How do I get the lone `mat-icon` to show up as white *using* the `color` attribute? (I can easily just add a white class, but I want to understand this)

How to set the color of an icon in Angular Material?

I got this error after upgrading to Angular 2 Rc.5.
This is my component template:

    &lt;md-input
        [(ngModel)]=&quot;recipient&quot;
        name=&quot;recipient&quot;
        placeholder=&quot;Name&quot;
        class=&quot;col-sm-4&quot;
        (blur)=&quot;addRecipient(recipient)&quot;&gt;
    &lt;/md-input&gt;

My app.module.ts imports the `FormsModule`

I also tried to declare `private recipient;` in my component.

Am I missing something? Why do I get this error?

    No value accessor for form control with name: &#39;recipient&#39;



No value accessor for form control with name: &#39;recipient&#39;

Is there any possible way to change size of `mat-spinner` or `mat-progress-circle`?

I read the documentation of `mat-spinner` and `mat-progress-circle` but they said that `mat-diameter` is discontinued and the spinner will take the parent element&#39;s size. 

How can I put `mat-spinner` in a `mat-button` to the left corner without changing the height of the button?

    &lt;button mat-button&gt;
       &lt;mat-spinner style=&quot;float:left;&quot;&gt;&lt;/mat-spinner&gt; 
       processing....
    &lt;/button&gt;

I also tried to change the height using in-line css like 

    style=&quot;float:left;height:10px;width:10px;
but is not pretty to see.

angular/material2 mat-spinner resize

I&#39;m looking for a good way to highlight the whole a row in `md-table`.  
Should I do directive or what?

&lt;!-- language: html --&gt;
    &lt;div class=&quot;example-container mat-elevation-z8&quot;&gt;
      &lt;md-table #table [dataSource]=&quot;dataSource&quot;&gt;
    
        &lt;!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition&quot; --&gt;
    
        &lt;!-- ID Column --&gt;
        &lt;ng-container cdkColumnDef=&quot;userId&quot;&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; ID &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef=&quot;let row&quot;&gt; {{row.id}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
    
        &lt;!-- Progress Column --&gt;
        &lt;ng-container cdkColumnDef=&quot;progress&quot;&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Progress &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef=&quot;let row&quot;&gt; {{row.progress}}% &lt;/md-cell&gt;
        &lt;/ng-container&gt;
    
        &lt;!-- Name Column --&gt;
        &lt;ng-container cdkColumnDef=&quot;userName&quot;&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Name &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef=&quot;let row&quot;&gt; {{row.name}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
    
        &lt;!-- Color Column --&gt;
        &lt;ng-container cdkColumnDef=&quot;color&quot;&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt;Color&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef=&quot;let row&quot; [style.color]=&quot;row.color&quot;&gt; {{row.color}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
    
        &lt;md-header-row *cdkHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/md-header-row&gt;
        &lt;md-row *cdkRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/md-row&gt;
      &lt;/md-table&gt;
    &lt;/div&gt;

Table from: https://material.angular.io/components/table/overview

Angular 4 Material table highlight a row

I have to change the background from the snackbar component.
I&#39;m using it to alert or inform the user about some either error or completed action the user did.

The material version from the project.
&quot;@angular/material&quot;: &quot;^5.0.0-rc.1&quot;,

The documentation https://material.angular.io/components/snack-bar/api say about an api to change the class.

panelClass: string | string[]
Extra CSS classes to be added to the snack bar container.

This is what I add in the css file.


    .mycsssnackbartest {
      background-color: blue;
    }

This is the code to open the snackbar

    this.snackBar.open(&#39;Informing the user about sth&#39;, &#39;User Message&#39; , {
        panelClass: [&#39;mycsssnackbartest &#39;]
    } );

What am I doing wrong?


Angular 5 and material - How to change the background color from SnackBar component

I&#39;m creating a date time picker control in the angular material and having the below code to do that

    &lt;button mat-button [matMenuTriggerFor]=&quot;menu&quot;&gt;
        &lt;mat-icon&gt;date_range&lt;/mat-icon&gt;
        &lt;span&gt;Date Range&lt;/span&gt;
    &lt;/button&gt;
    &lt;mat-menu #menu=&quot;matMenu&quot;&gt;
        &lt;div fxLayout=&quot;row&quot;&gt;
            &lt;div fxLayout=&quot;column&quot;&gt;
                &lt;button (click)=&quot;setInterval(15)&quot; mat-menu-item&gt;Last 15 minutes&lt;/button&gt;
                &lt;button (click)=&quot;setInterval(360)&quot; mat-menu-item&gt;Last 6 hours&lt;/button&gt;
                &lt;button (click)=&quot;setInterval(1440)&quot; mat-menu-item&gt;Last 24 hours&lt;/button&gt;
                &lt;button (click)=&quot;setInterval(2880)&quot; mat-menu-item&gt;Last 2 days&lt;/button&gt;
                &lt;button (click)=&quot;setInterval(10080)&quot; mat-menu-item&gt;Last 7 days&lt;/button&gt;
                &lt;button (click)=&quot;setInterval(-1)&quot; [matMenuTriggerFor]=&quot;dateTimeMenu&quot; mat-menu-item&gt;Custom&lt;/button&gt;
            &lt;/div&gt;
            &lt;mat-menu class=&quot;date-range-menu&quot; #dateTimeMenu=&quot;matMenu&quot;&gt;
                &lt;div fxLayout=&quot;row&quot;&gt;
                    &lt;div fxLayout=&quot;column&quot;&gt;
                        &lt;b&gt;From&lt;/b&gt;
                        &lt;mat-calendar&gt;&lt;/mat-calendar&gt;
                    &lt;/div&gt;
                    &lt;div fxLayout=&quot;column&quot;&gt;
                        &lt;b&gt;To&lt;/b&gt;
                        &lt;mat-calendar&gt;&lt;/mat-calendar&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/mat-menu&gt;
        &lt;/div&gt;
    &lt;/mat-menu&gt;

Currently when ever I click a button it is closing the menu. I know we can do $event.stoppropagation() on each mat-menu-item to prevent it from closing. 

But I want to know is it possible to do that for mat-calendar

[![enter image description here][1]][1]

As you can see in the above image currently when i select a date it is closing the menu. Is it possible to prevent that?


  [1]: https://i.stack.imgur.com/GWnel.png

How to prevent angular material mat-menu from closing?

I am wondering how I target the even/odd rows inside a `Angular Material Table` so that I can set the even/odd rows a different background colour.

I setup my `ClaimFileHistoryDataSource` class:

    claimClientInformation: ClaimFileHistory[];
    dataSource : ClaimFileHistoryDataSource;
    displayedColumns = [&#39;TypeImg&#39;, &#39;Description&#39;, &#39;Agent&#39;];


    export class ClaimFileHistoryDataSource extends DataSource&lt;ClaimFileHistory&gt; {
      
        constructor(private _claimFileHistory: ClaimFileHistory[]) {
          super();
        }
      
        connect(): Observable&lt;ClaimFileHistory[]&gt; {
          return Observable.of(this._claimFileHistory);
        }
    
        disconnect() {}
    }

On `NgInit` I make a call to my service to go and get the data I need and populate the `DataSource`:

    this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response =&gt; {
      this.claimClientInformation = response;       
      this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
    });

This is fine and the Data is coming back as it should.

In the HTML the `Mat-Table` looks like this:

        &lt;mat-table #table [dataSource]=&quot;dataSource&quot;&gt;

          &lt;ng-container matColumnDef=&quot;TypeImg&quot;&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;&lt;img [src]=&#39;row.TypeImg&#39; height=&quot;40px&quot;&gt;&lt;/mat-cell&gt;
          &lt;/ng-container&gt;

          &lt;ng-container matColumnDef=&quot;Description&quot;&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;
              &lt;div&gt;
                &lt;span class=&quot;d-block&quot;&gt;{{row.Description}}&lt;/span&gt;
                &lt;span class=&quot;d-block&quot;&gt;{{row.Date}}&lt;/span&gt;
              &lt;/div&gt;

            &lt;/mat-cell&gt;
          &lt;/ng-container&gt;

          &lt;ng-container matColumnDef=&quot;Agent&quot;&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.Agent}} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;

          &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
        &lt;/mat-table&gt;


Again I was wondering how do I go about getting the Odd/Even rows of the table and setting them a different row background colour?


Alternate row colours angular material table

Can anyone please clarify to me how should I structure multiple nested feature modules hierarchy with `.forRoot()` calls?

For example what if I have modules like this:

```
- MainModule
- SharedModule
- FeatureModuleA
    - FeatureModuleA1
    - FeatureModuleA2
- FeatureModuleB
```
All feature modules has a `.forRoot()` static function. 

How should I define *FeatureModuleA* with somehow &quot;transfer&quot; the `.forRoot()` functions?

```typescript
@NgModule({ 
  imports: [
    //- I can use .forRoot() calls here but this module not the root module
    //- I don&#39;t need to import sub-modules here, FeatureA only a wrapper
    //FeatureModuleA1.forRoot(), //WRONG!
    //FeatureModuleA2.forRoot(), //WRONG!
  ],
  exports: [
    //I cannot use .forRoot() calls here
    FeatureModuleA1, 
    FeatureModuleA2 
  ]
})
class FeatureModuleA {
  static forRoot(): ModuleWithProviders {
    return {
      //At this point I can set any other class than FeatureModuleA for root
      //So lets create a FeatureRootModuleA class: see below!
      ngModule: FeatureModuleA //should be: FeatureRootModuleA 
    };
  }
}
````

I can create another class for root usage then set it within the `forRoot()` function of FeatureModuleA: 

```typescript
@NgModule({
  imports: [
    //Still don&#39;t need any sub module within this feature module
  ]
  exports: [
    //Still cannot use .forRoot() calls but still need to export them for root module too:
    FeatureModuleA1, 
    FeatureModuleA2 
  ]
})
class FeatureRootModuleA { }
```

&gt; But how can I &quot;transfer&quot; `.forRoot()` calls within this special ModuleClass?

As I see I need to import all sub-modules directly into my root MainModule and call `.forRoot()` for each there:

```typescript
@NgModule({
  imports: [
    FeatureModuleA1.forRoot(),
    FeatureModuleA2.forRoot(),
    FeatureModuleA.forRoot(),
    SharedModule.forRoot()
  ]
})
class MainModule { }
```

Am I right? Before you answer please take a look at this file:
https://github.com/angular/material2/blob/master/src/lib/module.ts

As I know this repo is maintained by the official angular team. So they solve the above by just importing all `.forRoot()` calls within a special MaterialRootModule module. I don&#39;t really understand how it would be applied for my own root module? What does the **root** and **.forRoot** really mean here? Is that relative to the package and not to the actual web project?

How to use .forRoot() within feature modules hierarchy

I used angular2 material `MdDialog` to show a form.

When user submits the form, a request is sent to the backend and if the request is successful, I need to close the dialog. If backend request failed, I need to keep the dialog open.

I can close the dialog by using a button like below.

    &lt;button md-raised-button md-dialog-close&gt;Cancel&lt;/button&gt;

But, in this case, I only need to close the dialog only if the backend request is successful, so I need a way to programmatically close the dialog.

The component which is shown inside the dialog doesn&#39;t have the dialog ref, and I don&#39;t know any other way to self close the dialog from the component.

Is there any way I an close the dialog from within the component inside the dialog?

Angular2 material dialog self close

I&#39;ve created a form in a dialog using material forms, but I can&#39;t seem to get the inputs to be wider than 180px despite following numerous examples including https://material.angular.io/components/input/example.

I&#39;m sure this is a pretty standard CSS thing, but I don&#39;t have that sort of brain so I cant figure out the problem.  

Does anyone have a serious / non-trivial example that works??

Here&#39;s mine:

    &lt;h1 mat-dialog-title&gt;{{title}}&lt;/h1&gt;
    &lt;mat-dialog-content&gt;
      &lt;form novalidate #f=&quot;ngForm&quot; class=&quot;form-full-width&quot;&gt;
        &lt;mat-form-field class=&quot;input-full-width&quot;&gt;
          &lt;input type=&quot;text&quot; [(ngModel)]=&quot;data.name&quot; name=&quot;name&quot; matInput placeholder=&quot;Name&quot;&gt;
          &lt;mat-hint&gt;Enter a unique name.&lt;/mat-hint&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field class=&quot;input-full-width&quot;&gt;
          &lt;textarea [(ngModel)]=&quot;data.description&quot; name=&quot;description&quot; matInput placeholder=&quot;Description&quot;&gt;&lt;/textarea&gt;
          &lt;mat-hint&gt;You should describe the purpose/use of this thing.&lt;/mat-hint&gt;
        &lt;/mat-form-field&gt;
      &lt;/form&gt;
    &lt;/mat-dialog-content&gt;

CSS :

    .form-full-width {
        min-width: 150px;
        max-width: 500px;
        width:100%;
    }

    .input-full-width {
        width:800px;
    }

    .mat-form-field.mat-form-field {
        width: auto;
    }

Thanks.

angular 5 material - form fields stuck at 180px

I am building an angular2 app using angular material2. I am trying to set the background of my application &quot;the correct way&quot;, but I can&#39;t figure out how.

I found a class I can use on my `&lt;body&gt;` element: `mat-app-background` which I can add, that gives me a default color (depending on whether I&#39;m using the light or dark themes).

I wish to define this background color to use my brands&#39; color, but I cannot figure out how to do it.

In `_theming.scss` it is defined like so:

    // Mixin that renders all of the core styles that depend on the theme.
    @mixin mat-core-theme($theme) {
      @include mat-ripple-theme($theme);
      @include mat-option-theme($theme);
      @include mat-pseudo-checkbox-theme($theme);

      // Wrapper element that provides the theme background when the
      // user&#39;s content isn&#39;t inside of a `md-sidenav-container`.
      .mat-app-background {
        $background: map-get($theme, background);
        background-color: mat-color($background, background);
      }
      ...
    }

So I thought it would make sense to try adding the background color to my custom theme, somehow, but I couldn&#39;t understand how to do so.

On the Material2 [theming][1] documentation it only says:

&quot;In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:

- A primary palette: colors most widely used across all screens and components.
- An accent palette: colors used for the floating action button and interactive elements.
- A warn palette: colors used to convey error state. 
- A foreground palette: colors for text and icons.
- A background palette: colors used for element backgrounds.
&quot;

How can I add my background to the theme, or do it in any other way?

  [1]: https://github.com/angular/material2/blob/master/guides/theming.md

Angular Material2 theming - how to set app background?

I need help. I don&#39;t know how to change the date format of the material 2 datepicker. I&#39;ve read documentation but I don&#39;t understand what I actually need to do. Output date format which datepicker provides by default is f.e.: 6/9/2017

What I&#39;m trying to achieve is to change format to the 9-Jun-2017 or any other. 

Documentation https://material.angular.io/components/component/datepicker doesn&#39;t help me at all.
Thanks in advance

Angular 2 Material 2 datepicker date format

I would like call a function in typescript on choosing a value using md-select. What is the property used for this purpose in material design ?
 

       &lt;md-select placeholder=&quot;State&quot;&gt;
           &lt;md-option *ngFor=&quot;let state of states&quot; [value]=&quot;state.code&quot;&gt;{{ state.name }}
       &lt;/md-option&gt;
&lt;/md-select&gt;

onselected event in md-select in Angular 4

I have data streaming from backend and i see it printing in console now i am trying to push event to `dataSource` its throwing error dataSource is not defined. Can someone help how to dynamically add data to materialize table ?


stream.component.html

    &lt;mat-table #table [dataSource]=&quot;dataSource&quot;&gt;&lt;/mat-table&gt;

stream.component.ts

    import {
        Component,
        OnInit
    } from &#39;@angular/core&#39;;
    import {
        StreamService
    } from &#39;../stream.service&#39;;
    import {
        MatTableDataSource
    } from &#39;@angular/material&#39;;
    import * as io from &#39;socket.io-client&#39;;
    
    @Component({
        selector: &#39;app-stream&#39;,
        templateUrl: &#39;./stream.component.html&#39;,
        styleUrls: [&#39;./stream.component.css&#39;]
    })
    export class StreamComponent implements OnInit {
        displayedColumns = [&#39;ticketNum&#39;, &quot;assetID&quot;, &quot;severity&quot;, &quot;riskIndex&quot;, &quot;riskValue&quot;, &quot;ticketOpened&quot;, &quot;lastModifiedDate&quot;, &quot;eventType&quot;];
        dataSource: MatTableDataSource &lt; Element[] &gt; ;
        socket = io();
    
        constructor(private streamService: StreamService) {};
    
        ngOnInit() {
            this.streamService.getAllStream().subscribe(stream =&gt; {
                this.dataSource = new MatTableDataSource(stream);
            });
            this.socket.on(&#39;newMessage&#39;, function(event) {
                console.log(&#39;Datasource&#39;, event);
                this.dataSource.MatTableDataSource.filteredData.push(event);
            });
        }
    }
    
    
    export interface Element {
        ticketNum: number;
        ticketOpened: number;
        eventType: string;
        riskIndex: string;
        riskValue: number;
        severity: string;
        lastModifiedDate: number;
        assetID: string;
    }

How to add data dynamically to mat-table dataSource?

I want to get rid of the white space in my Angular Material modal dialog. How do I style the css so I can&#39;t see any white? My css so far:

    app-commission-me-dialog {
    	margin: 0px;
    	padding: 0px;
    }
    
    .mat-dialog-container {
    	margin: 0px;
    	padding: 0px;
    }

Get rid of white space around Angular Material modal dialog

I&#39;m building an app with multiple theme with angular material design 2. I created multiple theme and it&#39;s working really great.
Using this guideline : [Angular Material design theme][1]

But the problem is that if user select &quot;green theme&quot; for example. Then I want to display his/her name in green and so. But how can I get the currently selected theme in this case &quot;green&quot; in my component style and then use that primary variable in my user name class to change its color  


[1]: https://material.angular.io/guide/theming

How to get primary or accent color of currently applied theme in angular material 2

I currently have a `textarea` like this:

    &lt;textarea matInput rows=&quot;5&quot; cols=&quot;40&quot; placeholder=&quot;text&quot;&gt;&lt;/textarea&gt;

However, it is always the same size.

Any idea on how to change the size of the `textarea`?

Change size of textarea

I have just copied and pasted angular material code for datePicker and input, but I am getting this error for the datePicker.

`app.module`

&lt;!-- language: lang-js --&gt;

    import {MaterialModule} from &#39;@angular/material&#39;;
    @NgModule({
    imports: [
    ...
    MaterialModule
    ]

&lt;!-- language: lang-html --&gt;

    &lt;md-input-container&gt;
        &lt;input mdInput placeholder=&quot;Rechercher&quot; [(ngModel)]=&quot;filterHistorique&quot;&gt;
    &lt;/md-input-container&gt;
    
    &lt;md-input-container&gt;
        &lt;input mdInput [mdDatepicker]=&quot;picker&quot; placeholder=&quot;Choose a date&quot;&gt;
        &lt;button mdSuffix [mdDatepickerToggle]=&quot;picker&quot;&gt;&lt;/button&gt;
    &lt;/md-input-container&gt;
    &lt;md-datepicker #picker&gt;&lt;/md-datepicker&gt;

This is the error I am having in my browser:

&gt; Can&#39;t bind to &#39;mdDatepicker&#39; since it isn&#39;t a known property of
&gt; &#39;input&#39; If &#39;md-datepicker&#39; is an Angular component, then verify that
&gt; it is part of this module.
&gt; 2. If &#39;md-datepicker&#39; is a Web Component then add &quot;CUSTOM_ELEMENTS_SCHEMA&quot; to the &#39;@NgModule.schemas&#39; of this component
&gt; to suppress this message. (&quot;&lt;button mdSuffix
&gt; [mdDatepickerToggle]=&quot;picker&quot;&gt;&lt;/button&gt;&lt;/md-input-container&gt; [ERROR
&gt; -&gt;]&lt;md-datepicker #picker&gt;&lt;/md-datepicker&gt;

The error is for the datepicker, when I removed it, the errors disappears



Can&#39;t bind to &#39;matDatepicker&#39; since it isn&#39;t a known property of &#39;input&#39; - Angular

I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy.

I am using Angular 4 and Angular Material to implement tooltips like this:

    &lt;div mdTooltip=&quot;tooltip text&quot; mdTooltipPosition=&quot;above&quot;&gt;
      &lt;span&gt;Show tooltip&lt;/span&gt;
    &lt;/div&gt;

I would like to make the font size of the tooltip text bigger. However, I did not manage to find how to do this in the Angular Material documentation, neither searching in the web. Does anyone have any idea on how to do this? Thanks.

Set font size of Angular Material Tooltip

I have 2 material 2 tables in the same component with sorting. I cannot find a way to assign the MatSort directive to its own table. I&#39;m only able to use MatSort on the first table and the second table doesn&#39;t recognize there is a MatSort on it. Does anyone know how to configure two tables with sorting in the same component?

I&#39;ve tried defining the ViewChild with different names, but it didn&#39;t work.


    @ViewChild(&#39;hBSort&#39;) hBSort: MatSort;
    @ViewChild(&#39;sBSort&#39;) sBSort: MatSort;


    this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator, 
    this.hBSort);
    this.sBSource = new SBDataSource(this.sBDatabase, this.sBPaginator, 
    this.sBSort);

    Table 1
    const displayDataChanges = [
       this.hBPaginator.page,
       this.hBSort.sortChange,
       this._filterChange
    ];

    Table 2
    const displayDataChanges = [
       this.sBPaginator.page,
       this.sBSort.sortChange,
       this._filterChange
    ];
    
    Table 1
    &lt;mat-table #hBtable [dataSource]=&quot;hBSource&quot; matSort style=&quot;min-width: 
    740px;&quot;&gt;
        &lt;ng-container matColumnDef=&quot;domain&quot;&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{&#39;list.domain&#39; | translate}} &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.domain}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef=&quot;general&quot;&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{&#39;list.general&#39; | translate}} &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.general.gNum}} ({{row.general.gPct | number: &#39;1.1-2&#39;}}%) &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;mat-header-row *matHeaderRowDef=&quot;hBColumns&quot;&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef=&quot;let row; columns: hBColumns;&quot;&gt;&lt;/mat-row&gt;
     &lt;/mat-table&gt;


    Table 2
    &lt;mat-table #sBSort [dataSource]=&quot;sBSource&quot; matSort style=&quot;min-width: 1200px;&quot;&gt;
          &lt;ng-container matColumnDef=&quot;domain&quot;&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{&#39;list.domain&#39; | translate}} &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.domain}} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef=&quot;general&quot;&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{&#39;list.general&#39; | translate}} &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.general.gNum}} ({{row.general.gPct | number: &#39;1.1-2&#39;}}%) &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;mat-header-row *matHeaderRowDef=&quot;sBColumns&quot;&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef=&quot;let row; columns: sBColumns;&quot;&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;

Multiple mat-table with MatSort within the same component

So I&#39;ve been trying to adopt Materials Accordion in my Web Application development.

However having some troubles getting the header to expand in size as the content grows.

My header is expected to have quite a few number of lines to give a summary and not just a 1 liner.

If I hard-code the material header height it causes the animation to go hay-wire.

Below is a sample code

&lt;!-- language: lang-html --&gt;

    &lt;mat-accordion [displayMode]=&quot;displayMode&quot; [multi]=&quot;multi&quot; class=&quot;mat-expansion-demo-width&quot;&gt;
                    &lt;mat-expansion-panel #panel1 [hideToggle]=&quot;hideToggle&quot;&gt;
                        &lt;mat-expansion-panel-header&gt;Section 1&lt;/mat-expansion-panel-header&gt;
                        &lt;p&gt;This is the content text that makes sense here.&lt;/p&gt;
                    &lt;/mat-expansion-panel&gt;
                &lt;/mat-accordion&gt;

&lt;!-- end snippet --&gt;


&lt;!-- language: lang-css --&gt;

    ::ng-deep .mat-expansion-panel-header
    {
        height: 190px !important;
    }


&lt;!-- end snippet --&gt;

If I do the above the height gets set, but the animation for expand and collapse goes weird. 

How should I go about this? 

All Angular Material2 Solutions on Gang of Coders

Total of 38 Angular Material2 Solutions

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