Angular Material with Angular 4

Question

Are there any options to use Angular Material with new Angular 4?

Angular Material recently released Version 1 which we consider to be stable and ready for production use. Developers should note that Angular Material v1 works only with Angular 1.x.

And with regard to Angular 2:

Angular Material v2 development is also in progress at the angular/material2 GitHub repository

What about Angular 4? Do you think we can bind somehow Angular 1.x and Angular 4 in one project to bring Angular 4 new features and keep using the awesome Angular Material framework?

There is still no Angular4 documentation online. Materials team did not realese information about how, when and why they will implement Angular4 support. — lin
– lin, Commented Mar 26, 2017 at 10:10

Edric · Accepted Answer · 2017-03-29 18:44:59Z

32

You can refer to the Getting Started guide from here. This documentation is updated to support angular v4.0.0

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app from @angular/platform-browser/animations.

edited Mar 29, 2017 at 18:44

Edric

27.2k13 gold badges88 silver badges96 bronze badges

answered Mar 26, 2017 at 10:29

Sanket

20.2k10 gold badges74 silver badges84 bronze badges

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

4 Comments

danrt Over a year ago

Hi, is it safe to use @angular/material (which is based on Angular 5) in an Angular project that uses LTS version 4.4.6?

Pedro Tainha Over a year ago

Hi, I wanted to know also the answer to @danrt, i'm facing compilations issues

danrt Over a year ago

@PedroTainha just to let you know, we switched to angular 5 to avoid any issues

Pedro Tainha Over a year ago

Ok, thanks. It's what I'm facing and we have to change also.

IndyWill · Accepted Answer · 2017-03-29 16:58:09Z

In December 2016, when the Angular team was running around telling everyone to stop saying "Angular 2" and just say "Angular", I kind of thought it was silly marketing stuff.

In reading through questions on this site, however, I am beginning to see the rational for their plea. Angular 1.x to Angular 2 represented a complete rewrite, an entirely re-architected framework that broke just about everything. Adding to this is the switch to semver, which meant that new major versions numbers would be coming more rapidly.

In short, what I think they were trying to head off was the line of thinking that "Angular 4 is to Angular 2 as Angular 2 was to Angular 1", which is definitely not true.

This perception problem is also what led them to code name 4.0 "invisible makeover".

So, when you see packages that are designed for Angular2, most of them will probably work also with Angular 4. And if there are ng4 changes that break those packages, you will either quickly see releases to address those... or you'll have your answer about whether that package is well-maintained enough to use in your project.

I do agreement with your statement. However, my point was about Angular Material library not Angular it self, see now angular material official says that you can use is stable only for 1.x and on GitHub you can find beta version for Angular 2, but there is Angular 4 already on the market and they still don't have Angular Material stable build even for Angular 2.
Yes, but my point was that Angular 4 is more like angular 2.5 than the name would suggest. The material2 project works just fine with Angular 4 (or it will as soon as they release the next beta (for now you can point to master). From your statements, you seem to be viewing Angular 4 as a bigger upgrade than it actually is.
Yes, maybe I did. I guess it just necessary to play with Angular 4 to Material 2 combination and see how it will work.
to add to this, Angular 1x is now just AngularJS and Angular 2, 4 ( there is no v3) and beyond, is just Angular. To clarify, to refer to Angular 2 or Angular 4 as distinct and separate versions of Angular is incorrect

ple103 · Accepted Answer · 2017-04-08 04:32:48Z

2

I am also working with Angular 4.0.0 and CLI 1.0.0, it works fine. Just to say that strange behaviours like unstyled checkbox mentioned above occur because theming your components is mandatory. You can work with prebuilt angular material themes or generate your own. Just include the stylesheet in your index.html and you will see the magic.

more info on angular material theming can be found here : https://material.angular.io/guide/theming

edited Apr 8, 2017 at 4:32

ple103

2,1207 gold badges35 silver badges50 bronze badges

answered Apr 7, 2017 at 23:22

Driss Chelouati

212 bronze badges

3 Comments

WBuck Over a year ago

Do you have a decent guide you could point me to? I created a project with the CLI and then added references to both @angular/material and @angular/animations. I then imported a pre-built theme in my styles.css. When I ran ng serve I got all kinds of errors. Wondering if you could help me out with it

Driss Chelouati Over a year ago

what do you mean by "added references" ? did you actually install @angular/material and @angular/animations with NPM ? if it is the case, did you check your imports in your app.module.ts ?

WBuck Over a year ago

Yes of course Npm. Anyway I figured it out. I was importing the incorrect Module (I had been following older guides which instructed me to load the wrong module(s)). That being said, I dropped material design and used materialize-css instead. The beta version of material design had issues so I had to stop using it.

Alex Dzeiko · Accepted Answer · 2017-04-03 13:36:49Z

1

I just have started work with angular 4.0.0 (using angular cli 1.0.0) and tried to use it with material 2.0.0-beta2. It works ok except some bugs in UI:

Material Checkbox looks awful, it has native checkbox inside it own (Screenshot)

I will update this post in case of meet something unstable. It seems that you can try https://github.com/mseemann/angular2-mdl for now.

edited Apr 3, 2017 at 13:36

answered Apr 3, 2017 at 13:24

Alex Dzeiko

86611 silver badges12 bronze badges

Comments

Rajan Chauhan · Accepted Answer · 2017-06-15 02:07:05Z

1

You can download or fork angular-quickstart boilerplate from here In this project have the latest stable support of angular material 2.0.0-beta.6 and angular 4.0.0 . It was pretty difficult to find the correct settings for latest versions.

answered Jun 15, 2017 at 2:07

Rajan Chauhan

1,3831 gold badge15 silver badges33 bronze badges

Comments

Deepak swain · Accepted Answer · 2017-11-14 05:55:32Z

1

Do This:

npm install --save @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser';

 //in app.module.ts
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class YourAppModule { }

Again import Material Module. Like

import: [MaterialModule.forRoot()]

edited Nov 14, 2017 at 5:55

answered Aug 17, 2017 at 15:31

Deepak swain

3,6981 gold badge33 silver badges26 bronze badges

Comments

Overflowrun · Accepted Answer · 2018-02-01 12:00:35Z

1

Most of the angular 2/4 sites are io try this

https://material.angular.io/

answered Feb 1, 2018 at 12:00

Overflowrun

5474 silver badges18 bronze badges

1 Comment

Overflowrun Over a year ago

how ever this will redirect to github-quickstart page only

Jasmit Tarang · Accepted Answer · 2017-05-26 20:54:24Z

0

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Add that to your css file :) . I had the same thing happen to me. Just need a theme fix that issue.

answered May 26, 2017 at 20:54

Jasmit Tarang

1351 silver badge7 bronze badges

2 Comments

busy Over a year ago

how do you deal with missing md-content?

Jasmit Tarang Over a year ago

You could just make your own element in angular :) . Or use md-card-content

Collectives™ on Stack Overflow

Angular Material with Angular 4

8 Answers 8

4 Comments

4 Comments

3 Comments

Comments

Comments

Comments

1 Comment

2 Comments

Hot Network Questions