CODEWITHSUNDEEP
angularangular-material
Herman Komashko
Herman Komashko

Reputation: 286

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?

Upvotes: 29

Views: 47294

Answers (8)

Overflowrun
Overflowrun

Reputation: 547

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

https://material.angular.io/

Upvotes: 1

Deepak swain
Deepak swain

Reputation: 3700

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()]

Upvotes: 1

Rajan Chauhan
Rajan Chauhan

Reputation: 1375

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.

Upvotes: 1

Jasmit Tarang
Jasmit Tarang

Reputation: 135

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

Upvotes: 0

Driss Chelouati
Driss Chelouati

Reputation: 21

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

Upvotes: 2

Alex Dzeiko
Alex Dzeiko

Reputation: 866

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.

Upvotes: 1

Sanket
Sanket

Reputation: 20017

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.

Upvotes: 32

IndyWill
IndyWill

Reputation: 2945

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.

Upvotes: 5

Related Questions