web-dev-qa-db-fra.com

Angular Matériel avec Angular 4

Existe-t-il des options pour utiliser Angular Material avec le nouveau Angular 4?

Officiel material.angularjs.org dit:

Angular Material a récemment publié la version 1 que nous considérons comme stable et prête à être utilisée en production. Les développeurs doivent noter que Angular Material v1 ne fonctionne qu'avec Angular 1.x.

Et en ce qui concerne Angular 2:

Le développement de Angular Material v2 est également en cours sur le référentiel GitHub angular/material2.

Qu'en est-il de Angular 4? Pensez-vous que nous pouvons lier d'une manière ou d'une autre Angular 1.x et Angular 4 dans un projet pour apporter Angular 4 nouvelles fonctionnalités et continuer à utiliser l'impressionnant Angular Cadre matériel?

angularangular-material
26
Herman Marvel

Vous pouvez vous référer au guide Mise en route de ici . Cette documentation est mise à jour pour prendre en charge angular v4.0.0

Certains composants Matériau dépendent du module Animations angulaires afin de pouvoir effectuer des transitions plus avancées. Si vous voulez que ces animations fonctionnent dans votre application, vous devez installer le @angular/animations module et incluez le BrowserAnimationsModule dans votre application à partir de @angular/platform-browser/animations.

32
Sanket

En décembre 2016, lorsque l'équipe de Angular courait partout pour dire à tout le monde de cesser de dire "Angular 2" et de simplement dire "Angular", j'ai en quelque sorte pensé que c'était du marketing idiot.

En lisant les questions sur ce site, cependant, je commence à voir la raison de leur plaidoyer. Angular 1.x à Angular 2 représentait une réécriture complète, un framework entièrement restructuré qui cassait à peu près tout. Ajoutons à cela le passage à semver, ce qui signifie que les numéros des nouvelles versions majeures arriveraient plus rapidement.

En bref, ce qu’ils essayaient de faire, c’était penser que "Angular 4 signifie" Angular 2, car Angular 2 correspond à Angular 1 ", ce qui n’est certainement pas le cas. vrai.

Ce problème de perception est également ce qui les a conduit au nom de code 4.0 "relooking invisible".

Ainsi, lorsque vous voyez des paquetages conçus pour Angular2, la plupart d'entre eux fonctionneront probablement aussi avec Angular 4. Et s'il y a des modifications de ng4 qui cassent ces paquetages, vous verrez rapidement les versions pour y remédier ... ou vous saurez si ce paquet est suffisamment bien entretenu pour être utilisé dans votre projet.

5
IndyWill

Je travaille également avec Angular 4.0.0 et CLI 1.0.0, cela fonctionne très bien. Juste pour dire que des comportements étranges tels que la case à cocher sans style mentionnée ci-dessus se produisent parce que la thématisation de vos composants est obligatoire. Vous pouvez travailler avec des thèmes pré-construits angular ou créez les vôtres. Incluez simplement la feuille de style dans votre index.html et vous verrez la magie.

plus d'infos sur angular thématique peut être trouvé ici: https://material.angular.io/guide/theming

2
Driss Chelouati

Faites ceci:

npm install --save @angular/animations

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

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

Encore une fois importer le module de matériau. Comme

import: [MaterialModule.forRoot()]
1
Deepak swain

Vous pouvez télécharger ou fork angular-quickstart warmplate de ici Dans ce projet, bénéficiez du dernier support stable de angular Material 2.0.0-beta .6 et angular 4.0.0. Il était assez difficile de trouver les paramètres corrects pour les dernières versions.

1
Rajan Chauhan

La plupart des angular 2/4 sont io essayez ceci

https://material.angular.io/

1
Overflowrun

Je viens de commencer à travailler avec angular 4.0.0 (en utilisant angular cli 1.0.0)) et j'ai essayé de l'utiliser avec le matériel 2.0.0-beta2. fonctionne bien sauf quelques bugs dans l'interface utilisateur:

  1. La case à cocher Matériel a l'air horrible, elle contient une case à cocher native ( Capture d'écran )

Je mettrai à jour ce post en cas de rencontre avec quelque chose d'instable. Il semble que vous puissiez essayer https://github.com/mseemann/angular2-mdl pour le moment.

1
Alex Dzeiko

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

Ajoutez cela à votre fichier css :). Il m'est arrivé la même chose. Juste besoin d'un thème pour résoudre ce problème.

0
Jasmit Tarang