Angular Material with Angular 4
NickName:Herman Komashko Ask DateTime:2017-03-26T18:02:39

Angular Material with Angular 4

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

Official material.angularjs.org says:

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?

Copyright Notice:Content Author:「Herman Komashko」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/43027362/angular-material-with-angular-4

Answers
Sanket 2017-03-26T10:29:51

You can refer to the Getting Started guide from here. This documentation is updated to support angular v4.0.0\n\nSome 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.",


IndyWill 2017-03-29T16:58:09

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.\n\nIn 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.\n\nIn 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. \n\nThis perception problem is also what led them to code name 4.0 \"invisible makeover\".\n\nSo, 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. ",


Driss Chelouati 2017-04-07T23:22:27

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.\n\nmore info on angular material theming can be found here : https://material.angular.io/guide/theming",


Alex Dzeiko 2017-04-03T13:24:54

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:\n\n\nMaterial Checkbox looks awful, it has native checkbox inside it own (Screenshot)\n\n\nI will update this post in case of meet something unstable.\nIt seems that you can try https://github.com/mseemann/angular2-mdl for now.",


Rajan Chauhan 2017-06-15T02:07:05

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


Deepak swain 2017-08-17T15:31:39

Do This:\n\nnpm install --save @angular/animations\n\nimport {BrowserAnimationsModule} from '@angular/platform-browser';\n\n //in app.module.ts\n@NgModule({\n ...\n imports: [BrowserAnimationsModule],\n ...\n})\nexport class YourAppModule { }\n\n\nAgain import Material Module. Like\n\nimport: [MaterialModule.forRoot()]\n",


Overflowrun 2018-02-01T12:00:35

Most of the angular 2/4 sites are io try this \n\nhttps://material.angular.io/",


More about “Angular Material with Angular 4” related questions

Angular Material with Angular 4

Are there any options to use Angular Material with new Angular 4? Official material.angularjs.org says: Angular Material recently released Version 1 which we consider to be stable and ready for

Show Detail

Mismatch with Angular material and Angular 4

In get the following error after having done an npm install. @angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol How can I install a the specific version of a...

Show Detail

Angular 4 with material

I am trying to implement "Angular-Material" with Angular4. I made all setup from official site of angular material [angular.material.io][1] [1]: https://material.angular.io/guide/getting-started ...

Show Detail

Is it possible to use Angular Material for an Angular4 app?

I used the hyperledger composer framework to automatically create an Angular application. The version of this Angular App is Angular 4.0.0. I want to use Angular Material to improve the UI generat...

Show Detail

material angular with angular 4 in production

I took a look at this page https://material.angular.io. Material angular component's and functionnalities seem awesome. but they are still in beta (2.0.0.beta8 according to https://www.npmjs....

Show Detail

Install Angular Material 2 with Angular 4 Unmet Dependency

How do I get Angular Material 2 to work with Angular 4? I re-installed Angular CLI and now it is at 1.0.0 using: npm install -g @angular/cli I created a new Angular 4 project using: ng new MyProj...

Show Detail

Expandable table rows in angular 4 with angular material

How would you make rows expandable in angular material tables? One requirement is that I need to be using the angular material table. I would also prefer to use the material accordion to the inform...

Show Detail

What version of angular material i can use on angular 4?

I have been installed angular material on my angular project, but when I run the project I get this error. ERROR in Metadata version mismatch for module C:/Users/Corandus/code/angular/webapp_2/

Show Detail

Change font in Angular 4 Material

How to change a font in Angular 4 Material material.angular.io by using the styles file in .CSS not SASS format? The documentation provides an example for SASS: https://github.com/angular/material...

Show Detail

Angular 4 compatibility with @angular/material

I am trying to npm install --save @angular/material @angular/cdk and my package.json looks like this: "dependencies": { "@angular/common": "^4.4.7", "@angular/compiler": "^4.4.7", &quo

Show Detail