These are chat archives for angular/material

29th
May 2018
Dirt-Nasty
@Dirt-Nasty
May 29 2018 14:21
Hey so I want to setup a separate module that holds all the material modules and just import that module into my components instead of importing each mat-module but I cant seem to get it working with Paginator
Will it work the way I am describing?
Kay van Bree
@kayvanbree
May 29 2018 14:51
I did that a couple of times
don't know about the paginator but:
import {NgModule} from '@angular/core';
import {MatCardModule} from '@angular/material/card';
import {MatDialogModule, MatProgressSpinnerModule, MatSidenav, MatFormFieldModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatChipsModule} from '@angular/material/chips';
import {MatInputModule} from '@angular/material/input';
import {MatNativeDateModule} from '@angular/material';

const MATERIAL_MODULES = [
    MatCardModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatListModule,
    MatTooltipModule,
    MatProgressSpinnerModule,
    MatSidenavModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
];

@NgModule({
    imports: MATERIAL_MODULES,
    exports: MATERIAL_MODULES,
    declarations: []
})
export class Material {
}
This worked for me, just import it in your app.module.ts
@Dirt-Nasty
Raj Bisht
@Whhymee
May 29 2018 15:13

Hey does anyone have idea what i am doing wrong here? I need to set initial state of input box to focus. But i am getting error : this.searchBox.focus is not a function

html ->

<input matInput #searchbox>

ts ->
import { ViewChild } from '@angular/core';
import { MatInput } from '@angular/material';

@ViewChild('searchBox') searchBox: MatInput;

ngAfterViewInit() {
this.searchBox.focus();
}

MattHubbell
@MattHubbell
May 29 2018 16:28
@Whhymee try using <input matInput #searchbox autofocus> and not use @ViewChild ?
Dirt-Nasty
@Dirt-Nasty
May 29 2018 17:30
mine is very similiar @kayvanbree but like I said if I import that module into another component it complains about the matpaginator not being found