Home:ALL Converter>Angular Material with Angular 4

Angular Material with Angular 4

Ask Time:2017-03-26T18:02:39         Author:Herman Komashko

Json Formatter

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?

Author:Herman Komashko,eproduced 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
Sanket :

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.",
2017-03-26T10:29:51
IndyWill :

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. ",
2017-03-29T16:58:09
Driss Chelouati :

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",
2017-04-07T23:22:27
Alex Dzeiko :

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.",
2017-04-03T13:24:54
Rajan Chauhan :

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.",
2017-06-15T02:07:05
Deepak swain :

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",
2017-08-17T15:31:39
Overflowrun :

Most of the angular 2/4 sites are io try this \n\nhttps://material.angular.io/",
2018-02-01T12:00:35
yy