angular material design with typescript

Question

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.

Sajeetharan · Accepted Answer · 2016-09-04 18:12:26Z

1

It should be like this,

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

answered Sep 4, 2016 at 18:12

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jhankar Over a year ago

What should be the import statement? import ngMaterial from 'angular-material';

Sajeetharan Over a year ago

it should be import ngMaterial from 'angular-material';

Jhankar Over a year ago

It gives error: Module ''angular-material'' has no default export.

mzoabi · Accepted Answer · 2016-09-05 07:48:03Z

0

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

answered Sep 5, 2016 at 7:48

mzoabi

3693 silver badges5 bronze badges

Comments

Georgekutty Antony · Accepted Answer · 2016-09-08 06:37:32Z

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

Fyodor · Accepted Answer · 2018-04-16 03:10:44Z

0

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;

answered Apr 16, 2018 at 3:10

Fyodor

2843 silver badges14 bronze badges

Collectives™ on Stack Overflow

angular material design with typescript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related