Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ng2-materialize
Advanced tools
Readme
This library is an Angular 2+ wrap around Materialize library, a responsive CSS/JS framework that implements Material Design specifications from Google.
Demo and documentation : https://sherweb.github.io/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 several component demo pages.
In other words, we ...
The following commands will add Ng2-Materialize library to your package.json
file along with its dependencies: Materialize CSS and jQuery.
npm install --save ng2-materialize
Don't forget to include Materialize and jQuery in your application.
If you are using Angular-CLI you can follow the example below :
"styles": [
"styles.scss",
+ "../node_modules/materialize-css/dist/css/materialize.min.css"
],
"scripts": [
+ "../node_modules/jquery/dist/jquery.min.js",
+ "../node_modules/materialize-css/dist/js/materialize.min.js"
],
{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2016",
"dom"
],
"outDir": "../out-tsc/app",
"target": "es5",
"module": "es2015",
"baseUrl": "",
"types": [
+ "jquery",
+ "materialize-css"
]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
See also Angular CLI 3rd Party Library Installation and Using MaterializeCSS with your Angular 2 Angular CLI App.
Ng2-materialize offers two "out-of-the-box" options for icons although you are free to use the library of your choice.
To use Material Design Icons (community project based on Google Material Icons with lots of added icons), which is used with mz-icon-mdi
directive, you will need to add the library with the following command:
npm install --save mdi
Don't forget to include Mdi library to your application.
If you are using Angular-CLI you can follow the example below :
"styles": [
"styles.scss",
"../node_modules/materialize-css/dist/css/materialize.min.css",
+ "../node_modules/mdi/css/materialdesignicons.min.css"
],
To use Material Icons (official Google Material Icons library), which is used with mz-icon
directive, you will need to add the following into the <head>
tag of your index.html
file:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Some components are using advance animation transition. You need to install @angular/animations
and include BrowserAnimationsModule
if you want those animation to work.
npm install --save @angular/animations
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppModule } from './app.module';
@NgModule({
imports: [
+ BrowserAnimationsModule,
],
})
export class AppModule { }
If you don't want to install a new dependency in your application, you can include NoopAnimationsModule
.
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppModule } from './app.module';
@NgModule({
imports: [
+ NoopAnimationsModule,
],
})
export class AppModule { }
You must import component module you want to use inside your module to be able to use Materialize components.
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { MzButtonModule, MzInputModule } from 'ng2-materialize';
import { HomeComponent } from './home.component';
@NgModule({
imports: [
CommonModule,
+ MzButtonModule,
+ MzInputModule,
],
declarations: [ HomeComponent ],
})
export class HomeModule { }
We will continue to maintain this module for a period of time to allow you to migrate your existing components to the new way. We recommend to use the new component modules when you are building new component/application.
If you still want to import only one module, you can create a separate NgModule
in your application that imports all the ng2-materialize
components. You will be able to include this module anywhere you like to use the components.
import { MzInputModule, MzValidationModule } from 'ng2-materialize';
@NgModule({
imports: [
MzInputModule,
MzValidationModule,
],
exports: [
MzInputModule,
MzValidationModule,
],
})
export class CustomMaterializeModule { }
Page listed in Native CCS Class will not be wrapped.
A demo application is available at https://sherweb.github.io/ng2-materialize/, or refer to the ./demo-app
folder and its README.
We (at SherWeb) are currently wrapping the components as we need them, and unfortunately, we cannot provide a specific road map.
If some components are missing, feel free to contribute.
Contributions are always welcome.
Make sure that :
And you are ready to go!
Thanks to Ali Mohammadi for donating the npm package name.
FAQs
An Angular 2+ wrap around Materialize library
The npm package ng2-materialize receives a total of 73 weekly downloads. As such, ng2-materialize popularity was classified as not popular.
We found that ng2-materialize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.