Angular 4 Material - beginner tutorial / starter notes

i have just tried the Angular 4 Material, following their get started guide and just tried the DatePicker.

but things didn't go as well as expected, until i jumped to the plnk to see the example.

if you'll notice the main.ts it has a long long list of imports


i just tried to add all this long list to my app, and it finally worked.

technically if you'll import just the MdDatepickerModule as stated in the docs something will happen, even the <md-form-field> didn't worked. but eventually you want it initially to look just like in the docs.


so my 1st advice - import all the modules. when you get to the point where you want to change or use specific things, start cutting the modules.


2nd advice is to make a separate module with all the material modules. but how to do it right?
well, 1st don't put the new file in the app/src folder or you will get this error.

2nd, you just copy that long long list, and paste it 3 times, your file should look like this:

import { NgModule } from '@angular/core';

import {
//long long list
MdAutocompleteModule,
MdButtonModule,
//goes on and on
} from '@angular/material';

@NgModule({
imports: [
//same long long list
],
exports: [
//same long long list
],
})
export class MaterialArmadaModule { }

and then in your app.module.ts, and i'll aslo state here the LOCALE_ID that you should always use to solve all the locale stuff

import {MaterialArmadaModule} from './Modules/material.module';
import { LOCALE_ID } from '@angular/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
//MUST after browser and animation modules
MaterialArmadaModule
],
providers: [
{ provide: LOCALE_ID, useValue: 'he-IL' }//your locale
],

ENJOY!

Comments

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

Asp.Net Ending Response options, Response.End() vs CompleteRequest()