infomedialtd / angular2-materialize Goto Github PK
View Code? Open in Web Editor NEWAngular 2 support for Materialize CSS framework.
Home Page: https://infomedialtd.github.io/angular2-materialize/
License: MIT License
Angular 2 support for Materialize CSS framework.
Home Page: https://infomedialtd.github.io/angular2-materialize/
License: MIT License
I've noticed on the tab routing, if you refresh the page on any tab but the first, the line under the tabs always goes to the first tab. It does not match up with the page you are on.
I've also seen it happen where, if there is another link other than the tab, that goes to the same route, the line stays on the tab it was previously on instead of moving with the page change.
Thanks for the support!
Hi the problem That i have everything install fine, but when I put this line in main.ts
import "angular2-materialize";
The lite server redirect me on this address all the time giving me an error
http://localhost:3000/angular2-materialize 404 (Not Found)
angular2-materialize:23 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-materialize(…)
Is it possible to suggest a working example using systemjs?
I cannot get it to work with https://github.com/Elecash/angular2-testing
hi, its may be not an issue with angular2-materialize itself but i am having a weird problem , when i click on the button background fades out but sidenav is not poping out .
<ul id="slide-out" class="side-nav">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<a href="#" materialize="sideNav" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
if i make it fixed nav then it shows its just on click its not sliding out , please if have any suggestion.
I want to use tabs like in original materialize-css project. And In you exampel tabs are used only for navigation. Do you have any suggestion how to implement them to follow original structure?
I don't want to use brute solution like bunch of *ngIf
calls...(and not sure if it is really possible)
In other hand it's quite nice to load content for each tab separately...But it looks too complex because not all pages contain tabs (in my app)... And each page that contains tabs contains different set of tabs....
I'm open to hear any suggestion :)
Hi,
The selected value becomes null when Form Submit is triggered using the below code
<select materialize="material_select" [materializeSelectOptions]="selectOptions" #genderType (change)="select('genderType',genderType.value)" >
<option *ngFor="let item of ddGenderType" [value]="item.value">{{item.name}} </option>
</select>
And if I add ngControl to it the dropdown list does not get populated. no errors displayed in console.
<select materialize="material_select" ngControl='genderType' [materializeSelectOptions]="selectOptions" #genderType (change)="select('genderType',genderType.value)" > <option *ngFor="let item of ddGenderType" [value]="item.value">{{item.name}}</option> </select>
Hi
I am using angular2-materialize along with meteor and poetic:materialize-scss package.
I do not use npm "materialize" package, so importing angular2-materialize would result in a dependency error.
My solution was to clone the repo and remove the import "materialize"
, all works.
Here I am not sure why this import is necessary for this package.
Can you please consider removing it ?
Regards
Hi,
In short, I have 2 questions.
Longer explanation:
I understand Materialize uses pickadate.js under the covers. Having checked its API I see there are a range of event callbacks available:
How can I apply these to the datepicker in Angular 2? I got as far as grabbing the datepicker through
var $input =$(this.el.nativeElement); // We grab a reference to the datepicker here
var picker = $input.pickadate('picker');
but there's not a great deal I can do from there. I actually want to close the datepicker on selection and found that an attribute 'closeOnSelect' exists: http://amsul.ca/pickadate.js/date/
Unfortunately, placing this in [materializeParams] doesn't seem to work.
One more thing, I noticed the Datepicker sample here http://angular2-materialize.surge.sh/#/datepicker
does not suffer from this bug whereas Materializes (plus mine) does... can you think of any reasons why? I thought the implementation between both would be near identical...
As always, thank you!
Pieris
I've found that when initializing the datepicker with a starting value it seems to init with the correct day & month but not year.
You can see this in the current model binding example:
http://angular2-materialize.surge.sh/#/modelbindings
Hello,
I want to use tabs inside routing outlet,and it is not working with following code:
<li [class]="'tab col s3' + (tab.disabled?' disabled':'')" *ngFor="#tab of tabs">
To fix it for myself I use following syntax:
<li class="tab col s3" [class.disabled]="tab.disabled" *ngFor="#tab of tabs">
Hey,
I was using this starter https://github.com/AngularClass/angular2-webpack-starter and the default prod config.
I encountered a little issue while using materialize and webpack. The build both in dev and prod mode were OK, however when i tried to reach my website i had this error :
materialize.js:238 Uncaught TypeError: Cannot convert undefined or null to object
I then unminified it and it worked.
Hope it helps !
Great job on the component anyway !
Hi,
I'm on Windows 7 and I've triggered the following commands.
$ git clone --depth 1 https://github.com/InfomediaLtd/angular2-webpack-starter.git
$ cd angular2-webpack-starter/
$ npm install typings webpack-dev-server rimraf webpack -g
$ npm install
$ npm start
I then added import {MaterializeDirective} from "angular2-materialize";
to home.component.ts
and <a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
to home.html to test the Materialize element comes through as expect. Unfortunately, even though the hover works, no styling is applied.
I found this link which describes the issue #2 but I'm using the https://github.com/InfomediaLtd/angular2-webpack-starter and the changes to webpack config have already been made. Any help on how I can get styling to come through as part of the configuration would be greatly appreciated.
Hi!
I'm trying to figure out how to work with validation. You provide simple seamless with inputs. What about validation for select? I did following :
<select materialize="material_select" [(ngModel)]="model.requested" class="validate" required> <option value disabled selected> </option> <option *ngFor="#requested of reguestFrom" [value]="requested">{{requested}}</option> </select> <label>Request from*</label>
but it doesn't work. Actually I have found workaround but it's not better solution:
<select materialize="material_select" [(ngModel)]="model.requested" class="validate" required>
It's add ng-valid class and I can use it.
Could you please explain me how to use validation for select and how to write custom validation function?
thanks for advance!
I have been trying to load angular2-material in a very basic angular2 example. I am having a hard time getting the service to start. I get an error: angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(…)
Usually this is because of the system.js configuration in my index.html so i was hoping someone could assist me.
here is my system.config settings
`
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'materialize': {//I think the issue may be with 'main'. Is this main, reference my main.ts?
'main': 'dist/js/materialize'
}
},
map: {//not sure if this is necessary
'materialize': 'node_modules/materialize-css'
}
});`
Also, i had a difficult time understanding the jspm installation. I have never used jspm and only have used the system.js installation on the angular 2 page. The jspm install overriding the dependencies did not make sense to me and i was unable to get this to run. Is jspm required for angular2-materialize?
Thank you for the help.
Is there any option to add search field for select form control?
Hi,
i've tried to use these syntax :
<a href="#" data-activates="mobile-demo" materialize="sideNav" class="button-collapse">
<i class="material-icons">menu</i>
</a>
But when i click on the menu, angular2 restart.
In the materializecss doc, the authors write this :
$(".button-collapse").sideNav();
But how can i do this with Angular ?
Thanks for your help,
best regards
I've forked your fork of angular2-webpack-starter (to https://github.com/vesteraas/angular2-webpack-starter), and added the following markup to src/app/app.component.ts
:
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Then I ran the webpack dev server:
npm run server:dev:hmr
In the browser console. I get the following error:
browser_adapter.js:77EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'materializeParams' since it isn't a known native property ("
<br/>
<a materialize="leanModal" [ERROR ->][materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="): App@31:31BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.js:77STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.js:77Error: Uncaught (in promise): Template parse errors:
Can't bind to 'materializeParams' since it isn't a known native property ("
<br/>
<a materialize="leanModal" [ERROR ->][materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="): App@31:31
at resolvePromise (zone.js:538)
at zone.js:574
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at HTMLDocument.ZoneTask.invoke (zone.js:426)
After adding MaterializeDirective
to directives
in src/app/app.component.ts
, the error message goes away, and it works as expected. But the tests are failing:
karma start
...
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "materialize"
at /Users/werner/work2/angular2/angular2-webpack-starter/config/spec-bundle.js:70345 <- webpack:///~/angular2-materialize/dist/index.js:2:0
Hi,
I can't get ngModel to bind to selected values in a multi-select (but single select works fine). I think the problem is that no event is being emitted when new values are selected. See sample code below. The onChange function isn't called when values are selected in the multi-select.
Sample html code:
<div class="input-field">
<select materialize="material_select" [ngModel]="shippingCountriesTemp
(ngModelChange)="onChange($event)" multiple>
<option value="" disabled selected>Click Here for Options</option>
<option *ngFor="let country of countryOptions" [value]="country">{{country}}</option>
</select>
<label>Countries You Ship To</label>
</div>
onChange function (in .ts file) just prints the event value to screen:
onChange(r) { console.log(r); }
Tabs are not rendering properly if the tab is loaded with the data from the back end using Angular.
for the Below code tabs are rendering fine
<div class="col s12">
<ul materialize="tabs" class="tabs">
<li class="tab col s3"><a class='active' href="#test1">hello </a></li>
<li class="tab col s3"><a class='' href="#test2">nice </a></li>
</ul>
</div>
but tabs are not loading properly when I use the below
<div class="col s12">
<ul materialize="tabs" class="tabs">
<template ngFor let-section [ngForOf]="gridTo.sections" let-i="index+1">
<li *ngIf="section.defaultIndicator ==='Y'" class="tab col s3"><a id="tabsEl1" class='active' href="#test{{i}}">{{gridTo.examName}} : {{section.sectionName}} : {{section.defaultIndicator}} </a></li>
<li *ngIf="section.defaultIndicator ==='N'" class="tab col s3"><a id="tabsEl2" class='' href="#test{{i}}">{{gridTo.examName}} : {{section.sectionName}} : {{section.defaultIndicator}} </a></li>
</template>
</ul>
</div>
After 3 or 4 clicks over the tabs, it's coming properly.
is anyone else faced the issue? Please help me on this.
I've some problem with integration of angular2-materialize in my Angular2 app.
Here is my code:
index.html:
System.config({
map: {
"ng2-translate": "node_modules/ng2-translate",
"materialize-css": "node-modules/materialize-css",
"angular2-materialize": "node_modules/angular2-materialize"
},
packages: {
dist: {
format: 'register',
defaultExtension: 'js'
},
"ng2-translate": {
"defaultExtension": "js"
},
"materialize-css": {
"main": "dist/js/materialize"
},
"angular2-materialize": {
"main": "dist/materialize-directive",
"defaultExtension": "js"
}
}
});
main.ts:
import "angular2-materialize";
home.component.ts:
import {MaterializeDirective} from "angular2-materialize";
@Component({
selector: 'swp-home',
templateUrl: 'app/memberarea/components/home.component.html',
directives: [RouterLink, MaterializeDirective]
})
Template of my component:
<a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
and here my error:
EXCEPTION: ReferenceError: Materialize is not defined
angular2.dev.js:23730 EXCEPTION: ReferenceError: Materialize is not definedBrowserDomAdapter.logError @ angular2.dev.js:23730BrowserDomAdapter.logGroup @ angular2.dev.js:23741ExceptionHandler.call @ angular2.dev.js:1292(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ angular2.dev.js:2245NgZone.run @ angular2.dev.js:13560(anonymous function) @ angular2.dev.js:12773schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._checkStable @ angular2.dev.js:13500NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ angular2.dev.js:13471NgZoneImpl.inner.inner.fork.onHasTask @ angular2.dev.js:2225ZoneDelegate.hasTask @ angular2-polyfills.js:381ZoneDelegate._updateTaskCount @ angular2-polyfills.js:399ZoneDelegate.invokeTask @ angular2-polyfills.js:359Zone.runTask @ angular2-polyfills.js:254drainMicroTaskQueue @ angular2-polyfills.js:473ZoneTask.invoke @ angular2-polyfills.js:425
angular2.dev.js:23730 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23730ExceptionHandler.call @ angular2.dev.js:1294(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ angular2.dev.js:2245NgZone.run @ angular2.dev.js:13560(anonymous function) @ angular2.dev.js:12773schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._checkStable @ angular2.dev.js:13500NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ angular2.dev.js:13471NgZoneImpl.inner.inner.fork.onHasTask @ angular2.dev.js:2225ZoneDelegate.hasTask @ angular2-polyfills.js:381ZoneDelegate._updateTaskCount @ angular2-polyfills.js:399ZoneDelegate.invokeTask @ angular2-polyfills.js:359Zone.runTask @ angular2-polyfills.js:254drainMicroTaskQueue @ angular2-polyfills.js:473ZoneTask.invoke @ angular2-polyfills.js:425
angular2.dev.js:23730 ReferenceError: Materialize is not defined
at MaterializeDirective.performElementUpdates (http://localhost:3000/node_modules/angular2-materialize/dist/materialize-directive.js:58:13)
Hello,
I like to know if this lib still works since Angular2 Realase Candidate version ?
thx.
I'm a bit confused on how to set this up. I'm using Angular CLI, so I know it's a bit different, but nothing i've tried works. Anyone have get this to work with Angular CLI or have suggestions?
Hi, it works for normal select but doesn't work when i add multiple attribute to select , it renders but not showing the values by the way i am fetching values from http request, haven't checked for static values.
Hi,
I am using your angular2 webpack starter pack. Everything runs fine on dev build. But on production build everything that requires materialize javascript not working. I am getting this error
browser_adapter.js:77 TypeError: d.each is not a function
at e (materialize.js:236)
at HTMLDivElement.n (materialize.js:236)
at HTMLDivElement. (materialize.js:237)
at Function.v.extend.each (jquery.js:365)
at x as velocity
at HTMLAnchorElement. (materialize.js:1306)
at HTMLUListElement.v.event.dispatch (jquery.js:4737)
at HTMLUListElement.g.handle (jquery.js:4549)
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)
I think this is because of UglifyJsPlugin on production build. This is my UglifyJsPlugin config
new UglifyJsPlugin({
// beautify: true, //debug
mangle: false, //debug
dead_code: false, //debug
unused: false, //debug
deadCode: false, //debug
// compress: {
// screw_ie8: true,
// keep_fnames: true,
// drop_debugger: false,
// dead_code: false,
// unused: false
// }, // debug
// comments: true, //debug
beautify: false, //prod
/* mangle: {
screw_ie8 : true,
keep_fnames: true
}, //prod*/
compress: {
screw_ie8: true
}, //prod
exclude: ['/materialize.js/g'],
comments: false //prod
}),
When a modal is open and one tries to change the zoom % of the web page (Ctrl +, Ctrl -) the UI does not scale properly for the background webpage (modal scales properly).
Images:
Default (No Zoom)
http://prntscr.com/ayinq4, http://prntscr.com/ayio1d (modal open)
Zoomed in
http://prntscr.com/ayiobj (Modal opened after zooming in)
http://prntscr.com/ayiott (Modal opened before zooming in)
Link for reference:
https://github.com/Dsupreme/Ang2
(I setup a basic project. I documented all the steps in setting up such a project. Please follow the readme.md in case any concerns.)
It would be nice if theres a guide on how to install it with webpack
I have a problem at time i install materialize with web pack it throws this exception:
ORIGINAL EXCEPTION: Error: Couldn't find materialize function ''tabs' on element or the global Materialize object.
Its in all the functions of materialize, i made the installation by webpack. and this is my webpack configuration:
var sliceArgs = Function.prototype.call.bind(Array.prototype.slice);
var toString = Function.prototype.call.bind(Object.prototype.toString);
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
module.exports = {
devtool: 'source-map',
// devtool: 'eval',
//
entry: {
'vendor': [
// Polyfills
'core-js/es6',
'core-js/es7/reflect',
'zone.js/dist/zone',
'zone.js/dist/long-stack-trace-zone',
// Angular2
'@angular/common',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/core',
'@angular/router',
'@angular/router-deprecated',
'@angular/http',
// RxJS
'rxjs',
// Other
'angular2-jwt'
],
'app': [
'./src/index'
]
},
// Config for our build files
output: {
path: root('build'),
filename: '[name].js',
// filename: '[name].[hash].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
// publicPath: 'http://mycdn.com/'
},
resolve: {
root: __dirname,
alias: {
materializecss: 'node_modules/materialize-css/dist/css/materialize.css',
materialize: 'node_modules/materialize-css/dist/js/materialize.js'
},
extensions: [
'',
'.ts',
'.js',
'.json',
'.css',
'.html'
]
},
module: {
preLoaders: [ { test: /.ts$/, loader: 'tslint-loader' } ],
loaders: [
// Support for .ts files.
{
test: /.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 Duplicate identifier
2304, // 2304 Cannot find name
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [ /.spec.ts$/, /.e2e.ts$/, /node_modules/ ]
},
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader' },
//Materialize CSS
{
test: /materialize-css\/dist\/js\/materialize\.js/,
loader: 'imports?materializecss'
},
{ test: /materialize\.css$/, loader: 'style-loader!css-loader' },
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },
],
noParse: [
/zone\.js\/dist\/.+/,
/reflect-metadata/,
/es(6|7)-.+/,
/.zone-microtask/,
/.long-stack-trace-zone/
]
},
plugins: [
new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"root.jQuery": "jquery",
Hammer: "hammerjs/hammer"
})
],
// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},
// our Development Server configs
// our Webpack Development Server config
devServer: {
historyApiFallback: true,
publicPath: '/build'
}
};
function getBanner() {
return 'This is a sample that shows how to add authentication to an Angular 2 (ng2) app by @auth0';
}
function root(args) {
args = sliceArgs(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
function rootNode(args) {
args = sliceArgs(arguments, 0);
return root.apply(path, ['node_modules'].concat(args));
}
Can anyone help me please ???
Is it possible to add the character counter to the list of possibilities? Adding materialize
to the input-field does not add a counter when a length="20"
is specified
When using material_select, ngModel no longer works for binding the value
I have materialize-css & angular2-materialize loaded in my SystemJS config.
I have: import 'angular2-materialize'; in my main.ts
I have: import {MaterializeDirective} from 'angular2-materialize'; in my component
I have: directives: [MaterializeDirective] in my @Compoent declaration
My component's form element includes the 'materialize' directive, but I get the error:
ReferenceError: Materialize is not defined
Angular 2.0.0beta16
Hi,
I just try to use angular2-materialize with my latest project. I am very exciting to kick-start my project with angular2-seed and and angular2-materialize.
I setup my project and with angular2-seed and just add the angular2-materialize, and just stuck with an error:
(index):75 Error: ReferenceError: Waves is not defined(…) "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ (index):75ZoneDelegate.invoke @ zone.js?1467571370075:323Zone.run @ zone.js?1467571370075:216(anonymous function) @ zone.js?1467571370075:571ZoneDelegate.invokeTask @ zone.js?1467571370075:356Zone.runTask @ zone.js?1467571370075:256drainMicroTaskQueue @ zone.js?1467571370075:474ZoneTask.invoke @ zone.js?1467571370075:426
I debug the issue and found that file "src/index.ts" have a declare statement i.e
declare var Waves:any; Waves.displayEffect();
This statement cause issue. As Waves declare with any so there is no method with name displayEffect() exists.
So, Can you please create or remove these statement from final build.
I am trying to bind model or function to dropdown but I am still unsuccessful. This is what I have tried:
`
But this is not working since this is later changed to list in dom. Can anyone show me how to bind model and function to particual example?
(edit) sorry, lately I have saw model is working but still I can not create on change event to work?
(edit nr2) one of the solution for tracking value changes is (ngModelChange) e.g. <select id="{{id}}" (ngModelChange)="alert()" materialize="material_select">
Similar to issue #5 . I have updated my webpack config to the recommended settings:
alias : {
materializecss: 'materialize-css/dist/css/materialize.css',
materialize: 'materialize-css/dist/js/materialize.js',
jQuery: 'jquery', // I tried this and it didn't change anything
$: 'jquery' // I tried this, too, and it didn't change anything
}
I also found I had to install stylus/stylus-loader because webpack was complaining about not being able to understand .styl files
test: /materialize\.css$/, loader:
'style-loader!css-loader'
}, {
test: /\.styl$/,
loader: 'style!css!stylus-loader'
}
var cssLoader = {
test : /^((?!materialize).)*\.css$/,
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development for hot-loading
loader : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
jquery: 'jquery',
'window.$': 'jquery',
"window.jQuery": 'jquery',
"root.jQuery": 'jquery',
Hammer : "hammerjs/hammer"
})
My component:
import { Component, OnInit, ElementRef } from 'angular2/core';
import { TodoContext } from './todo-context';
import { TodoContextService } from './todo-context.service';
import { MaterializeDirective } from 'angular2-materialize';
import 'material-icons/css/material-icons.min.css';
let template = `
<a materialize="sideNav" href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="side-nav fixed">
<li class="bold" *ngFor="#context of contexts"><a href="#!">{{context.name}}</a></li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold" *ngFor="#context of contexts"><a href="#!">{{context.name}}</a></li>
</ul>
`;
@Component({
selector: 'todo-context',
directives: [MaterializeDirective],
template: template,
styles: [`
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
`]
})
export class TodoContextComponent implements OnInit {
contexts: TodoContext[] = [];
constructor(private _todoContextService: TodoContextService) { }
ngOnInit() {
this._todoContextService.getTodoContexts()
.then(contexts => this.contexts = contexts);
}
}
When I make the page smaller to expose the menu icon on the sidenav, and click the menu icon, I see the following in the console
BrowserDomAdapter.logError @ browser_adapter.ts:73ExceptionHandler.call @ exception_handler.ts:52(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:394Zone.runTask @ angular2-polyfills.js:323ZoneTask.invoke @ angular2-polyfills.js:490
browser_adapter.ts:73 TypeError: menu_id.velocity is not a function
at HTMLAnchorElement.eval (webpack:///./~/materialize-css/dist/js/materialize.js?:2305:25)
at HTMLAnchorElement.jQuery.event.dispatch (webpack:///./~/jquery/dist/jquery.js?:4737:27)
at HTMLAnchorElement.elemData.handle (webpack:///./~/jquery/dist/jquery.js?:4549:28)
at ZoneDelegate.invokeTask (webpack:///./~/angular2/bundles/angular2-polyfills.js?:423:38)
whole bunch of other stuff
I believe this issue is because materialize does some loading before jquery and it's dependencies are all wired up. Looking at my webpack output, I would expect to see jquery/hammer loaded before materialize, correct? But this isn't the case:
[0] ./src/index.ts 280 bytes {0} [built]
[1] ./~/jquery/dist/jquery.js 259 kB {0} [built]
[2] ./~/materialize-css/dist/js/materialize.js 281 kB {0} [built]
[3] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
[4] ./~/hammerjs/hammer.js 71.6 kB {0} [built]
[5] ./~/materialize-css/dist/css/materialize.css 897 bytes {0} [built]
[6] ./~/css-loader!./~/materialize-css/dist/css/materialize.css 158 kB {0} [built]
[8] ./~/materialize-css/dist/fonts/roboto/Roboto-Thin.eot 82 bytes {0} [built]
Does anyone have any ideas on how to fix this? I tried the solution in #5 but to no avail.
Hi,
I've been trying to pass a variable to a tooltip. It just renders the variable name, not value. If I pass it within double curly brackets, Angular reports an error.
Any solution?
Could you please update your fork of angular2-webpack-starter? The project has undergone some major changes since your fork, so it would be nice to have an updated example.
Hi all!
First, thank you for your awesome work!
Datepicker seems to be working, value is reported to input, but I still have no value in my [(ngModel)]="object.date"
Did I miss something ? Thank you for your feedback.
Hi,
I try to install the materialize mobile nabar.
I get a strange behavior: on large screen, menu is above the container of my page. On smaller screen, sideNav mobile menu disappears. Here my code for a web mobile app:
home.component.html
`
home.component.ts
`import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {MaterializeDirective} from "angular2-materialize";
@component({
selector: 'swp-home',
templateUrl: 'app/memberarea/home.component.html',
directives: [MaterializeDirective],
styles: [li.active { background-color: #ee6e73 }
]
})
export class SwpHomeComponent {
}`
I want to say that Angular2 directive are well integrated in the project.
Thank you for any help.
Hi guys! I am new in Angular 2 and I am having some problems to use angular2-materialize on my Project!
I am not using webpack (barely know what is it) but I've installed all the dependencies though NPM (hammerjs, materialize and materialize-directive) and added manually the JS files on my index.html and I am facing this error:
materialize-directive.js:10 Uncaught ReferenceError: require is not defined(anonymous function) @ materialize-directive.js:10 system.src.js:1085 XHR finished loading: GET "http://localhost:3000/src/main.js".fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482$ @ system-polyfills.src.js:1340H @ system-polyfills.src.js:1340R.when @ system-polyfills.src.js:1340T.run @ system-polyfills.src.js:1340t._drain @ system-polyfills.src.js:1340drain @ system-polyfills.src.js:1340e @ system-polyfills.src.js:1340
Some one can help-me?
My scripts:
`
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/hammerjs/hammer.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.js"></script>
`
Thanks in advance!
i use
@output() mychange = new EventEmitter();
instead off
// handle select changes from the HTML
if (this.isSelect() && this.changeListenerShouldBeAdded) {
const nativeElement = this._el.nativeElement;
const jQueryElement = $(nativeElement);
jQueryElement.on("change", e => nativeElement.dispatchEvent(new Event("input")));
this.changeListenerShouldBeAdded = false;
}
and i change this
public ngDoCheck() {
const nativeElement = this._el.nativeElement;
if (nativeElement.value!='' && nativeElement.value!=this.previousValue) {
this.previousValue = nativeElement.value;
* this.mychange.emit(nativeElement.value);*
this.performLocalElementUpdates();
}
return false;
}
i hope it's good
It looks like bottom-sheet modals does not play very well with buttons using the waves-effect class. The first time the modal is opened, the button is visible, but the next time, the button is gone. So it seems.
Using the inspect tool reveals that the button is still there. You can click the button, and in the moment you do, it 'magically' appears.
<div id="errorModal" class="modal bottom-sheet">
<div class="modal-content">
Blah blah
</div>
<div class="modal-footer">
<a class="modal-action modal-close btn-flat waves-effect waves-red">Oh well</a>
</div>
</div>
Hi, I read your suggestions and saw your suggestions how setup projects, generated with angular-cli and would suggest some changes to the setup.
In your solution you modify the configuration in system-config.ts directly but this part in the file is handled by angular-cli. Therefore we should configure it in the user configuration part in the top.
/** Map relative paths to URLs. */
const map: any = {
"materialize": "vendor/materialize-css",
"angular2-materialize": "vendor/angular2-materialize",
"jquery": "vendor/jquery"
};
/** User packages configuration. */
const packages: any = {
'materialize': {
"format": "global",
"main": "dist/js/materialize",
"defaultExtension": "js"
},
'angular2-materialize': {
"main": "dist/index",
"defaultExtension": "js"
}
};
I tried to populate the options of a select element using an Observable. The options are populated into the select element as can be seen by inspecting the DOM, but the materialize version of the select is empty. Using class='browser-default' allows me to have a functional select box, but obviously is visually undesirable. Any guidance?
Another dev with a similar issue:
http://stackoverflow.com/questions/36887895/multiple-select-in-materialize-css-with-angular2-not-rendering-dynamic-values
Hey !
I am having a pretty weird issue with tooltips.
When i hover an link, the tooltip appear and disappear as expected.
However when i click on it , the tooltip stays, by looking at the html it looks like a tooltip with a brand new id got created and stays displayed.
click again keeps on creating new displayed tool tip.
Any idea where this could come from ?
piece of code in question :
<a (click)="selectEnv(env)" materialize="tooltip" data-position="top" data-delay="10" data-tooltip="Select Environment" ><i class=" fa fa-square fa-fw " ></i></a>
Update:
This comes from a (click) event on the tooltip source. Removing the (click) event makes the bug disapear.
I installed both materialize-css
and angular2-materialize
using npm
I don't know why it gives this error on building!
ERROR in ./~/angular2-materialize/dist/index.js
Module not found: Error: Cannot resolve module 'materialize' in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
resolve module materialize in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
looking for modules in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules
C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize doesn't exist (module as directory)
resolve 'file' materialize in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules
resolve file
C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize doesn't exist
C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.ts doesn't exist
C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.js doesn't exist
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.ts]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.js]
@ ./~/angular2-materialize/dist/index.js 1:0-22
here is my webpack config:
// @AngularClass
var webpack = require('webpack');
var helpers = require('./helpers');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
var HMR = helpers.hasProcessFlag('hot');
var metadata = {
title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
baseUrl: '/',
host: 'localhost',
port: 3000,
ENV: ENV,
HMR: HMR
};
/*
* Config
* with default values at webpack.default.conf
*/
module.exports = helpers.defaults({
// static data for index.html
metadata: metadata,
// devtool: 'eval' // for faster builds use 'eval'
// our angular app
entry: { 'polyfills': './src/polyfills.ts', 'main': './src/main.ts' },
// Config for our build files
output: {
path: helpers.root('dist')
},
resolve: {
alias: {
materializecss: 'materialize-css/dist/css/materialize.css',
materialize: 'materialize-css/dist/js/materialize.js',
//...
}
},
module: {
preLoaders: [
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
// TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
{ test: /\.js$/, loader: "source-map-loader", exclude: [ helpers.root('node_modules/rxjs') ] }
],
loaders: [
// Support for .ts files.
{ test: /\.ts$/, loader: 'ts-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] },
{ test: /materialize-css\/dist\/js\/materialize\.js/, loader: 'imports?materializecss' },
{ test: /materialize\.css$/, loader: 'style-loader!css-loader' },
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({ name: 'polyfills', filename: 'polyfills.bundle.js', minChunks: Infinity }),
// static assets
new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
// generating html
new HtmlWebpackPlugin({ template: 'src/index.html' }),
// replace
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(metadata.ENV),
'NODE_ENV': JSON.stringify(metadata.ENV),
'HMR': HMR
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
materialize: 'materialize-css'
})
],
// Other module loader config
// our Webpack Development Server config
devServer: {
port: metadata.port,
host: metadata.host
}
});
I'm not sure if I added them correctly but I followed the instructions (Im new to webpack)
First all, thanks for sharing!! I try with your directive but when put a datepicker i have some issues, in your example page in the form section the date picker don't show. In my project when put a datepicker or a reveal card (activator class) the icons doesn't show only text on all my project, but i think maybe is because i try to load components dynamically and routing in the same way. But the issue with datepicker is different from my configurations. Thanks for all!!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.