From 09c43cae45001e54b4644307334834adbb36a25b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20C=C3=B4t=C3=A9?= Date: Thu, 5 Oct 2017 22:06:30 -0400 Subject: [PATCH 1/5] Update readme "Why ng2-materialize?" section --- README.md | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ec39ecde..793d1e16 100644 --- a/README.md +++ b/README.md @@ -33,11 +33,39 @@ ## Why ng2-materialize? -We are aware that alternatives exposing Material Design components already exist. But, in our case, we want to rely on a stable css framework that does not depend on a specific js framework. +The main purpose of this library is to simplify the usage of Materialize within the Angular framework which make it more dynamic. To illustrate this, we have Playground sections in severak component demo page. -We already know the possibilities Materialize offers. What is left to do is to wrap components that we want to use in Angular component. +### Initialization simplified -If you want to use a component that is not yet implemented, simply wrap the existing Materialize components that already meets the Material Design specifications. No need to be an HTML/CSS expert, only to know the Angular 2+ components. Or if you are in a hurry, you can use it directly in HTML rather than in Angular component. +One thing that Materialize ask to do for pretty much every components is to initialize it using JQuery. In our implementation, the initializations are done automatically. + +### Quirks + +Materialize does not work perfectly "out of the box" when used with Angular, we had to fix a lot of "quirks"... + +For instance, for mz-input we handle the label so it can animate when the value is changed programmatically. + +As another example, using mz-select, the communication between the dropdown created by Materialize and the native select HTML element is handle by our implementation otherwise there is a desynchronization between the value of NgModel/NgControl and the select element. + +And this is just some examples of many more... + +### Injection + +Materialize modals ask to put the modal HTML directly into the DOM while we offer the possibility to inject a component on the fly using MzModalService. + +### MediaService + +We added the MediaService that allow to customize some behavior according to the view port size. + +### Reactive Form support + +Another nice advantage that we added to our implementation is the Form Validation. Materialize only provide HTML5 validation while we added support for Reactive Form allowing a more flexible way to do form validation following the same Material Design guidelines. + +### We haven't wrapped everything ... + +Although we didn't wrapped everything yet, all the Materialize library is available to be used when using our package. Aslo, some of the CSS classes have not been wrapped into directive as it already does the work pretty well! + +Or simply wrap the existing Materialize components that already meets the Material Design specifications. No need to be an HTML/CSS expert, only to know the Angular 2+ components. ## Installation From 1a3b872eba7598961453dd30894f149eaa1350fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20C=C3=B4t=C3=A9?= Date: Tue, 24 Oct 2017 16:05:35 -0400 Subject: [PATCH 2/5] Update README.md --- README.md | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 793d1e16..6153d5e8 100644 --- a/README.md +++ b/README.md @@ -33,21 +33,19 @@ ## Why ng2-materialize? -The main purpose of this library is to simplify the usage of Materialize within the Angular framework which make it more dynamic. To illustrate this, we have Playground sections in severak component demo page. +The main purpose of this library is to simplify the usage of Materialize within the Angular framework which make it more dynamic. To illustrate this, we have Playground sections in several component demo pages. ### Initialization simplified -One thing that Materialize ask to do for pretty much every components is to initialize it using JQuery. In our implementation, the initializations are done automatically. +One thing that Materialize ask to do for pretty much every components is to initialize with JQuery. In our implementation, the initializations are done automatically. ### Quirks Materialize does not work perfectly "out of the box" when used with Angular, we had to fix a lot of "quirks"... -For instance, for mz-input we handle the label so it can animate when the value is changed programmatically. +For instance, for `mz-input` directive we handle the label so it can animate when the value is changed programmatically. -As another example, using mz-select, the communication between the dropdown created by Materialize and the native select HTML element is handle by our implementation otherwise there is a desynchronization between the value of NgModel/NgControl and the select element. - -And this is just some examples of many more... +As another example, using `mz-select`, the communication between the dropdown created by Materialize and the native select HTML element is handle by our implementation otherwise there is a desynchronization between the value of NgModel/NgControl and the select element ### Injection @@ -61,12 +59,6 @@ We added the MediaService that allow to customize some behavior according to the Another nice advantage that we added to our implementation is the Form Validation. Materialize only provide HTML5 validation while we added support for Reactive Form allowing a more flexible way to do form validation following the same Material Design guidelines. -### We haven't wrapped everything ... - -Although we didn't wrapped everything yet, all the Materialize library is available to be used when using our package. Aslo, some of the CSS classes have not been wrapped into directive as it already does the work pretty well! - -Or simply wrap the existing Materialize components that already meets the Material Design specifications. No need to be an HTML/CSS expert, only to know the Angular 2+ components. - ## Installation The following commands will add Ng2-Materialize library to your `package.json` file along with it dependencies: Materialize CSS, jQuery and Mdi (Mdi icons library is optional as your are free to use the icon library of your choice). From b7fd3bf45c0a351d8cf578a507e5db4117ae01b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20C=C3=B4t=C3=A9?= Date: Mon, 30 Oct 2017 22:47:13 -0400 Subject: [PATCH 3/5] Update README.md --- README.md | 31 ++++++++----------------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 6153d5e8..6b435074 100644 --- a/README.md +++ b/README.md @@ -35,29 +35,14 @@ The main purpose of this library is to simplify the usage of Materialize within the Angular framework which make it more dynamic. To illustrate this, we have Playground sections in several component demo pages. -### Initialization simplified - -One thing that Materialize ask to do for pretty much every components is to initialize with JQuery. In our implementation, the initializations are done automatically. - -### Quirks - -Materialize does not work perfectly "out of the box" when used with Angular, we had to fix a lot of "quirks"... - -For instance, for `mz-input` directive we handle the label so it can animate when the value is changed programmatically. - -As another example, using `mz-select`, the communication between the dropdown created by Materialize and the native select HTML element is handle by our implementation otherwise there is a desynchronization between the value of NgModel/NgControl and the select element - -### Injection - -Materialize modals ask to put the modal HTML directly into the DOM while we offer the possibility to inject a component on the fly using MzModalService. - -### MediaService - -We added the MediaService that allow to customize some behavior according to the view port size. - -### Reactive Form support - -Another nice advantage that we added to our implementation is the Form Validation. Materialize only provide HTML5 validation while we added support for Reactive Form allowing a more flexible way to do form validation following the same Material Design guidelines. +In other words, we ... + +- Simplify component usage +- Simplify components initialization +- Handle Angular "quirks" with Materialize library +- Offer component injection when possible +- Provide a MediaService that allow customization according to view port size +- Add support for ReactiveForm with validation ## Installation From a4b71997bbba11d685973a8a666dfa2b134cdfec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20C=C3=B4t=C3=A9?= Date: Mon, 30 Oct 2017 23:01:12 -0400 Subject: [PATCH 4/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b435074..87a34ac4 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ The main purpose of this library is to simplify the usage of Materialize within In other words, we ... -- Simplify component usage +- Simplify components usage - Simplify components initialization - Handle Angular "quirks" with Materialize library - Offer component injection when possible From 273ba9e07e4ddec95978438b14bf616e81ae7e1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20C=C3=B4t=C3=A9?= Date: Thu, 2 Nov 2017 13:03:35 -0400 Subject: [PATCH 5/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 87a34ac4..95200eba 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ The main purpose of this library is to simplify the usage of Materialize within In other words, we ... - Simplify components usage -- Simplify components initialization +- Initialize components automatically - Handle Angular "quirks" with Materialize library - Offer component injection when possible - Provide a MediaService that allow customization according to view port size