CODEWITHSUNDEEP
javascriptangularjstypescriptangular-material
Jhankar
Jhankar

Reputation: 168

angular material design with typescript

I am brand new to typescript, typings. Vaguely understand type definition and trying to setup angular 1.5 project with typescript and angular material design.

I have angular material type definition in typings>globals>angular-material. I don't know what module I can import and where to check. If i put like the following example, i get an exception: Module 'material' is not available! 

import * as angular from 'angular';
import * as material from 'angular-material';

angular.module('app.services', []);
angular.module('app', ['app.services', 'material']);

The top portion of index.d.ts in typings>globals>angular-material is 

declare module 'angular-material' {
    var _: string;
    export = _;
}

declare namespace angular.material { ...}

Thanks in advance.

Upvotes: 2

Views: 3546

Answers (4)

Fyodor
Fyodor

Reputation: 284

Small, I hope useful, addition (the experience I faced recently). If you need to use angular-material in TS unit tests, you will need to import it into spec file too (whereas in main code you only need to import it once and set as dependency in main module). Then it's sufficient to import 'angular-material'; at the top, and add variable for necessary service with corresponding typings, e.g. let dialog:ng.material.IDialogService;

Upvotes: 0

Georgekutty Antony
Georgekutty Antony

Reputation: 41

You should remove the single quotes when defining material provider for example 

import * angular from 'angular';
import * as material from 'angular-material';

angular.module('app.services', []);
angular.module('app', ['app.services', material]);

This will solve your issue.

Also for importing material style sheet you can use following code.

import 'angular-material/angular-material.css';

For libraries that don't have type definitions you can use the following code.

import * as angular from 'angular';
require('../../../node_modules/angular-messages');

angular.module('app.services', []);
angular.module('app', ['app.services', 'ngMessages']);

Note : Here you should use string for defining provider

Upvotes: 0

mzoabi
mzoabi

Reputation: 369

You should not import from 'angular-material' just add a reference to typings : 

/// <reference path="../typings/angular-material/angular-material.d.ts" />

(be sure to install typings for angular-materials first)

then use :

angular.module('app.services', []);
angular.module('app', ['app.services', 'ngMaterial']);

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222720

It should be like this,

angular.module('app.services', []);
angular.module('app', ['app.services', 'ngMaterial']);

Upvotes: 1

Related Questions