angular2-materialize | Angular 2 support for Materialize CSS framework

angular2-materialize probably uses Materialize 0.x which uses the Materialize namespace. materialize-next switchted to the M namespace.

angular2-materialize should already include Materialize (0.x).

It looks like your operators are still chained in rxjs 5.x fashion.

So to recap what changed in rxjs6 :

1. Imports are different. Now, you should import Observable, Subject, BehaviorSubject etc. AND methods that were in 'rxjs/add/observable' differently. So all of these must be imported from 'rxjs'. For example :

   import {Observable, Subject, of, from} from 'rxjs';

   Alternatively, all operators like map, concat, do (which now is called tap) etc. are to be imported from rxjs/operators. so something like :

   import { map, tap, takeUntil} from 'rxjs/operators';

   I think your imports are pretty sane.

2. You must use pipes instead of chaining your operators. For instance, in your all-matches.components.ts, line 33, if you replace : this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{

   by

   this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{

   your takeUntil error will disappear.

   In the same fashion, instead of Observable.of(true), you should import of operator and use of(true).

   You can try this in your authorization.service.ts file. All the "of errors" will be fixed.

   maybe you should inspect this

3. Concerning the import errors regarding custom files, please check the files actually exist. For example :

   ERROR in src/app/app.module.ts(6,38): error TS2307: Cannot find module './api-keys'

   related to

   import { masterFirebaseConfig } from './api-keys'

   is normal, since this file './api-keys' doesn't exist. PS: maybe you don't have these errors if keys are not stored in git, if so ignore this.

4. Finally, about AngularFire5.0, you should use one of the operators :

   Db.list('items').subscribe(console.log)

   becomes (with valueChanges method) :

   Db.list('items').valueChanges().subscribe(console.log)

   More info : https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Good luck!

https://github.com/auth0/angular2-jwt

NOTE: This library is now at version 2 and is published on npm as @auth0/angular-jwt. If you're looking for the pre-v1.0 version of this library, it can be found in the pre-v1.0 branch and on npm as angular2-jwt. @auth0/angular-jwt v2 is to be used with Angular v6+ and RxJS v6+. For Angular v4.3 to v5+, use @auth0/angular-jwt v1

you need install @auth0/angular-jwt to use with Angular v6+

Seems i know where is your problem.

As you don't give many of your code files, it is hard to answer your specific scenario. Regarding the question how to use materialize with angular 2? though, this is a demonstratable way to get the two to work together.

• Create a new project with the cli ng new ng-materialize
• Run npm install --save materialize-css @types/materialize-css

• Update app.component.html

This is a very difficult question to answer as you don't provide a Minimal, Complete, and Verifiable example.

It would seem from your question that you are having trouble getting the vis.js library to work in an Angular 4 application. Getting vis.js to work in Angular 4 is quite straightforward. Here are the steps I followed:

• Create a new project with the cli ng new ng-vis
• Install the vis library and its typings npm install --save vis @types/vis
• Add vis styles to the project
  • In the .angular-cli.json file add "../node_modules/vis/dist/vis.css" to the styles array(as you have shown above)

• Add vis to a view/view-model

  • I updated src/app/app.component.html to

  • I then updated src/app/app.component.ts to the following

I thought I would have to come up with nested loops for each row but I had never realized that within Materializecss' grid system it looks like if you add more cols than a row can normally contain (12), the cols will actually wrap below. It will all still be contained within the same row element but visually you'll get a neatly formatted grid. Here's my HTML for example.

Below is a copy of my Auth Service. I have two properties "currentUserId()" and "currentUserDisplayName()".