Source:  Twitter logo

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?

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.

32 users liked answer #0dislike answer #032
Sanket profile pic
Sanket

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.

5 users liked answer #1dislike answer #15
IndyWill profile pic
IndyWill

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

2 users liked answer #2dislike answer #22
Driss Chelouati profile pic
Driss Chelouati

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:

  1. 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.

1 users liked answer #3dislike answer #31
Alex Dzeiko profile pic
Alex Dzeiko

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.

1 users liked answer #4dislike answer #41
Rajan Chauhan profile pic
Rajan Chauhan

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()]
1 users liked answer #5dislike answer #51
Deepak swain profile pic
Deepak swain

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

https://material.angular.io/

1 users liked answer #6dislike answer #61
Overflowrun profile pic
Overflowrun

@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.

0 users liked answer #7dislike answer #70
Jasmit Tarang profile pic
Jasmit Tarang

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).