Angular2 + ng2-material import

I’m using angular 2 with ng2-material to display radio and checkbox components, in each component I see that I have to import all the ng2-material contents and finally using only one component

=> the result, it charges my app and makes it slower.

I want to know if I may import only the component that I need, despite that in the ng2-material documentation they are importing all of them ???

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from "ng2-material/all"; <<<<<

import {ROUTER_DIRECTIVES} from 'angular2/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';

@Component({
    selector: 'radiobox',
    templateUrl: '/radiobox.html',
    styleUrls: ['radiobox.css'],
    directives: [MATERIAL_DIRECTIVES] <<<<<<

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

According to the all.ts file, you can import each component by its own module. This file simply does export * from and creates some constants. Here are some contents of this file: import {MdAnchor, MdButton} from "./components/button/button"; import {MdCheckbox} from "./components/checkbox/checkbox"; import {MdContent} from "./components/content/content"; import {MdDataTable, MdDataTableHeaderSelectableRow, MdDataTableSelectableRow} from './components/data_table/data_table'; import {MdDialog} from "./components/dialog/dialog"; import {MdDivider} from "./components/divider/divider"; import {MdIcon} from "./components/icon/icon"; import {MdInk} from "./components/ink/ink"; import { MdPatternValidator, MdMaxLengthValidator, MdMinValueValidator, MdMaxValueValidator, MdNumberRequiredValidator, INPUT_VALIDATORS } from "./components/form/validators"; import {MdMessage, MdMessages} from "./components/form/messages"; import {MdInput, MdInputContainer} from "./components/input/input"; import {MdList, MdListItem} from "./components/list/list"; import {MdProgressLinear} from "./components/progress_linear/progress_linear"; import {MdProgressCircular} from… Read more »

Jason
Guest

@firasKoubaa i think you can use something like this
import {MdList, MdListItem, MdContent, MdButton} from 'ng2-material/all';
or some thing like this
import {MdButton} from "/ng2-material/components/button/button";