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';

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

Leave a Reply

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

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 »


@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";