Not really an issue but I didn't see any licensing on the main page. I was assuming this is MIT but wasn't sure. Really like the big input component. Wanted to use it in a site I am making. Been reading your blog and watching your videos as well and just wanted to say thanks for teaching me Material!

Can you add new feature, auth with Firebase or AngularFire?

Thanks

Been testing this in multiple browsers including Safari, Edge and IE11.

Safari:
The animations in Safari seam to flicker.

Edge: The animations in Edge seam to flicker.

IE11:
As it is does not run. IE11 does not support "includes" method in Strings. As a result its crashes. Use "indexOf" instead.

as per style guide, shared module is intended to be imported only in feature modules and not in app or core.

ngrx material starter error output

after git clone of this project

the project will not be running

here the output of chrome debugging

[DEBUG] action: @ngrx/store/init {payload: undefined, oldState: undefined, newState: {…}}
debug.reducer.ts:6 [DEBUG] action: @ngrx/store/update-reducers {payload: undefined, oldState: {…}, newState: {…}}
debug.reducer.ts:6 [DEBUG] action: @ngrx/effects/init {payload: undefined, oldState: {…}, newState: {…}}
core.es5.js:168 Could not find HammerJS. Certain Angular Material components may not work correctly.
push../node_modules/@angular/material/esm5/core.es5.js.MatCommonModule._checkHammerIsAvailable @ core.es5.js:168

EDIT: removed unnecessary long stacktrace

Create tests for settings.effects.ts in settings.effects.spec.ts file either by following official ngrx testing guide or feel free to suggest any improvements.

Try to keep tests as independent as possible (eg minimize importing of various modules in setting up tests)

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

With CLI v6 we now have options to maintain multiple projects in a monospace.
Currently when I add a new project with help of cli v6 into the this starter code base, I could not use any code provided here

Create tests for todos.reducer.ts in todos.recuder.spec.ts file either by following official ngrx testing guide or feel free to suggest any improvements.

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

Thanks for sharing. It is a great repo.

I would like to recommend you using ngrx-store-localstorage instead.

Hi guys, somebody knows how to avaible the pug/jade templating support?

Regards.

Hi,

after selecting e.g. the LIGHT-THEME on your published website the theme gets restored when refreshing the page. That is what is expected...

When cloning your rep the theme gets not restored in development mode after refreshing the page with F5.

I tried debugging for quite a while but couldn't find any solution.
Do you have a fix for that?

Thanks,
Daniel

The stock market example was getting data from google finance API which seems to be discontinued. We have to find another free source of simple stock prices to consume and use it in stock-market.service.ts.

Based on the shape of retrieved data (JSON), additional adjustments to map functions might be needed.

Original Google finance API url: https://finance.google.com/finance?output=json&q=NYSE:

Tips for first time contributors:

1. Create fork of the repository
2. Create fix commit in format fix(examples): fix stock market API source or something similar
3. Create pull request (Github) should offer that option automatically once the fix branch was pushed

I'm trying to run angular cli commands like ng generate component hello and it changes nothing.

I don't get the distinction between these two folders? Can you elaborate on this a bit?

Hi Hackers!

In order to make sense of the communication between components, I am looking for a simple example, one that mimics the old and problematic emit and broadcast communication but this time using ngrx.

For example:

On click event Component 1 sends an ID Param to the method of another component => Component 2, so Component 2 re-loads a listing table based on the ID Param previously sent by Component 1.

Thanks a bunch!

After your latest changes of making the default themes always included the forecolor of Active drop down items in Dark Theme is a dark blue color. You can see this if you go to change the settings and your theme is currently the Dark theme.

Hi,
Nice template. Found an issue tho with the about.component.scss .background &::before class.
If you maximize the window - the mountains picture is displayed properly. When you make the browser much smaller, the problem happens when you scroll down in the menu. The toolbar and footer are fixed, but the image is set to a fixed size as well. See screenshots:

At this stage I am not sure how to fix it. I tested couple of ideas, but no solution yet. Potentially, another div which will cover the resizing, or changing the background & &behind classes?

Regards,
Kuba

I do not understand one thing only, the login and logout does not work or is it only inlustrative? how would it look for a login before the main screen?

usually I do this:

const routes: Routes = [ { path: '', component: ReadmePageComponent }, { path: 'login', component: UserLoginComponent }, { path: 'items', component: ItemsListComponent, canActivate: [AuthGuard] }, { path: 'notes', component: NotesListComponent, canActivate: [AuthGuard] }, // uploads are lazy loaded { path: 'uploads', loadChildren: './uploads/shared/upload.module#UploadModule', canActivate: [AuthGuard] }, ];

auth.guard.ts

`import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

import { AngularFireAuth } from 'angularfire2/auth';
import { AuthService} from './auth.service';
import { NotifyService } from './notify.service';

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

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router, private notify: NotifyService) {}

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | boolean {

return this.auth.user.pipe(
  take(1),
  map((user) => !!user),
  tap((loggedIn) => {
    if (!loggedIn) {
      console.log('access denied');
      this.notify.update('You must be logged in!', 'error');
      this.router.navigate(['/login']);
    }
  }),
);

}
}
`

auth.service.ts

`import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { NotifyService } from './notify.service';

import { Observable } from 'rxjs/Observable';
import { switchMap } from 'rxjs/operators';

interface User {
uid: string;
email?: string | null;
photoURL?: string;
displayName?: string;
}

@Injectable()
export class AuthService {

user: Observable<User | null>;

constructor(private afAuth: AngularFireAuth,
private afs: AngularFirestore,
private router: Router,
private notify: NotifyService) {

this.user = this.afAuth.authState
  .switchMap((user) => {
    if (user) {
      return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
    } else {
      return Observable.of(null);
    }
  });

}

////// OAuth Methods /////

googleLogin() {
const provider = new firebase.auth.GoogleAuthProvider();
return this.oAuthLogin(provider);
}

githubLogin() {
const provider = new firebase.auth.GithubAuthProvider();
return this.oAuthLogin(provider);
}

facebookLogin() {
const provider = new firebase.auth.FacebookAuthProvider();
return this.oAuthLogin(provider);
}

twitterLogin() {
const provider = new firebase.auth.TwitterAuthProvider();
return this.oAuthLogin(provider);
}

private oAuthLogin(provider: firebase.auth.AuthProvider) {
return this.afAuth.auth.signInWithPopup(provider)
.then((credential) => {
this.notify.update('Welcome to Firestarter!!!', 'success');
return this.updateUserData(credential.user);
})
.catch((error) => this.handleError(error) );
}

//// Anonymous Auth ////

anonymousLogin() {
return this.afAuth.auth.signInAnonymously()
.then((user) => {
this.notify.update('Welcome to Firestarter!!!', 'success');
return this.updateUserData(user); // if using firestore
})
.catch((error) => {
console.error(error.code);
console.error(error.message);
this.handleError(error);
});
}

//// Email/Password Auth ////

emailSignUp(email: string, password: string) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((user) => {
this.notify.update('Welcome to Firestarter!!!', 'success');
return this.updateUserData(user); // if using firestore
})
.catch((error) => this.handleError(error) );
}

emailLogin(email: string, password: string) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then((user) => {
this.notify.update('Welcome to Firestarter!!!', 'success')
return this.updateUserData(user); // if using firestore
})
.catch((error) => this.handleError(error) );
}

// Sends email allowing user to reset password
resetPassword(email: string) {
const fbAuth = firebase.auth();

return fbAuth.sendPasswordResetEmail(email)
  .then(() => this.notify.update('Password update email sent', 'info'))
  .catch((error) => this.handleError(error));

}

signOut() {
this.afAuth.auth.signOut().then(() => {
this.router.navigate(['/']);
});
}

// If error, console log and notify user
private handleError(error: Error) {
console.error(error);
this.notify.update(error.message, 'error');
}

// Sets user data to firestore after succesful login
private updateUserData(user: User) {

const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);

const data: User = {
  uid: user.uid,
  email: user.email || null,
  displayName: user.displayName || 'nameless user',
  photoURL: user.photoURL || 'https://goo.gl/Fz9nrQ',
};
return userRef.set(data);

}
}
`

In your project I do not know how it would look, thank you for sharing your great project, I'll use it as a basis for my next project.
Thank you again !

Thanks for the wonderful work on this starter. We have forked it to use as a base at my institution and it has saved us a lot of time.

I noticed that you embedded the Google Analytics tracking code in the starter app, which is great, but due to the nature of single page applications, it is only tracking the initial load of index.html. In order to track each page view you must subscribe to the NavigationEnd router event and manually push each pageview to Google Analytics.

I'm creating a PR to primarily address the pageview issue, however, there is quite a lot going on in the ngOnInit method in app.component.ts, so I refactored for clarity and readability. If there is a particular style or refinement you'd like in the PR, I'd be happy to oblige.

Create tests for stock-market.service.ts in stock-market.service.spec.ts file by following official Angular testing guide or feel free to suggest improvements!

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

Also noticed that there is no theme applied to SnackBars when used.

Hi All,

I am seeing 2 vertical scrollbars along with horizontal scrollbar when viewing the page in IE v11.2189

Seems like the horizontal scrollbar is appearing because of the 2 vertical scrollbars taking up some extra space. Everything is working perfectly in Chrome browser though.

Thanks,
Pramod

Create unit test for settings component that covers its functionality.

Please follow testing pattern introduced in todos.component.spec.ts or please suggest improvements in the comments.

TESTS (rough idea, please add /adjust / improve where makes sense):

should dispatch change theme action on theme selection
should dispatch change auto night mode on night mode toggle
should dispatch change animations page ...
should dispatch change animations elements ...
should disable change animations page when disabled is set in state
...

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

It would be great to add the new ngrx/entity feature and provide an example. So we can follow the latest update provided by ngrx. :)

Over all, this is a really good starter. :)

I get an error 'mat-sidenav-container' is not a know element in app.component.html

When I click on the icon in the the (click)="sidenav.open()" does not trigger.

I've tried the online demo
https://tomastrajan.github.io/angular-ngrx-material-starter#/about
in both Chrome and Edge and get the same behaviour (I don't get the sidenav bar)

Any idea what would be the problem?

Looking at the code there is a sidenav with ngFor anchors but when the app is run the sidenav is nowhere to be seen. Is this a feature of the app? If so, what's the rational behind it? Thanks

The matInput colors for Dark theme are not right, they show up as black when focused. I dug around and wasn't 100% clear on how this should be fixed properly. It looks like setting the 900 on mat-palette($mat-grey, 900...) in the first parameter is responsible. But if you change that it also changes the navbar, etc.

I was able to override these settings in styles.reset.scss-theme.scss with the following:

 .mat-focused {
    .mat-form-field-label {
      color: mat-color($accent, lighter) !important;
    }

    .mat-form-field-ripple {
      background-color: mat-color($accent, lighter);
    }
  }

But that seems kind of like a hack and not proper. I also didn't fix the cursor color in that fix, just the ripple, and the field label. For a proper fix you would also want to address the cursor color.

Hi @tomastrajan !

Doesn't work for me ... any solution ? Thanks

The starter project contains lazy loaded examples module which currently contains following examples:

• todos
• stock market
• theming
• auth only route

Create new example demonstrating "real life" complex reactive form using a form builder.

• should live in examples/form route
• should have dedicated component, reducer (effects if needed)

Form should have following features:

• record to be edited (eg user record with edit, save, reset button)
• use various input types (eg input, dropdown, slider, toggle)
• use unified "real life" like content (eg pizza creator, user editor, order creation or similar)
• use form validation with validation messages (eg required, email, more than ...)
• reset button ( to clear form to original state )
  ...

Please feel free to suggest, enhance or improve anything!

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

Create tests for settings.reducer.ts in settings.reducer.spec.ts file either by following official ngrx testing guide or feel free to suggest any improvements.

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

Thanks for making this starter project!!

I am wondering though why none of the components use OnPush change detection. I am under the impression that one of the benefits of using "dumb" components that only receive input data and/or produce output data was that their performance could be improved by using the OnPush change detection.

It seems that at the very least BigInputActionComponent and perhaps AboutComponent should use OnPush change detection. Any thoughts on this?

Create unit test for stock market component that covers its functionality.

Please follow testing pattern introduced in todos.component.spec.ts or please suggest improvements in the comments.

TESTS (rough idea, please adjust / improve where makes sense):

should show spinner if stocks are loading
should hide spinner if stocks are loaded
should show error on retrieve stocks error
should display stock (name, price, change, exchange)
should dispatch retrieve action on symbol input change
...

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

Instead of overriding the Action interface for @ngrx its a ver nice development experience having typed actions with models for the payload, with intellisense.

Hi Tomas,

I have had this message: Could not find Angular Material core theme. in my dev log.
I could solve it by adding
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
after line 11 in styles.scss:

...
@import '../node_modules/@angular/material/theming';

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

@include mat-core();
...

Regards

Jan

Create tests for todos.effects.ts in todos.effects.spec.ts file either by following official ngrx testing guide or feel free to suggest any improvements.

Try to keep tests as independent as possible (eg minimize importing of various modules in setting up tests)

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

During npm install I have problem with angular 6.0.0-beta7 because it references github:webpack-contrib/html-webpack-plugin which doesn't exist anymore. I tried to update to 6.0.0-rc.2, but got another issue with Local workspace file ('angular.json') could not be found.

Can you please help me?

Currently repository contains only test stubs generated by Angular CLI (for the corresponding components and services).

These test stubs contains only necessary imports so that the basic expect(component).toBeTruthy(); style test passes.

We need to improve tests to serve as a example for the users of this repository.

• suggest best test practices
• standardized imports for test related stuff
• add unit tests for the component / service functionality
• use community driven test library? (optional)

Tests can be added in step by step fashion with one PR corresponding to the tests of one component / service to keep the required effort low but please feel free to add more ;)

ps: please use commit message in format like feat(examples): add tests, #<issue-number>, just replace examples with applicable application part.

I'm trying to extend a notification system using a snack bar on your project, but without success, do you have any tips?

import { MatExpansionModule } from '@angular/material/expansion'; import { MatSnackBarModule } from '@angular/material/snack-bar';

openSnackBar() { this.snackBar.openFromComponent(AppComponent, { duration: 900, }); }

<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar"> Button </button>

There is an overlap problem with the toolbar and the scrollbar where it's not possible to click and drag the scrollbar at the top right of the browser window as depicted in the image below.

Hi Tomas,

take a look on the import statements for your themes in styles.scss.
They are missing the parent folder "themes".
It should look like this:

@import 'themes/default-theme.scss';
@import 'themes/light-theme.scss';
@import 'themes/black-theme.scss';
@import 'themes/nature-theme.scss';

Although it worked before, my IDE PhpStorm stopped complaining about these lines after the change.

Jan

PS: Nice project.

As a AngularCli added support for Universal app angular-ngrx-material-starter should have option to be build with support for Angular Universal to achieve better seo.

Create tests for stock-market.reducer.ts in stock-market.reducer.spec.ts file either by following official ngrx testing guide or feel free to suggest any improvements.

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

I want to suggest providing some sample integration with firestore + ngrx, maybe on some branch. I think it's quite popular BaaS and some people will try to use it, especially for some MVP concepts. And from what I see integrating this with ngrx is not very trivial so this would help a lot to see your sample implementation :)

Create tests for stock-market.effects.ts in stock-market.effects.spec.ts file either by following official ngrx testing guide or feel free to suggest any improvements.

Try to keep tests as independent as possible (eg minimize importing of various modules in setting up tests)

Feel free to check out Contributors Guide for useful tips and hints that help you get started.

I am currently getting the following error when running npm start: ERROR in C:/Users/....../angular-ngrx-material/src/app/app.component.ts (52,31): Property 'themeClass' does not exist on type 'OverlayContainer'.

As per the recent Angular Material changelog available here https://github.com/angular/material2/blob/master/CHANGELOG.md#200-beta11-carapace-parapet-2017-09-21

overlay: Now that the Overlay is part of the cdk rather than Angular Material directly, the themeClass property has been removed. To add a class to the overlay for theming, you can do

overlayContainer.getContainerElement().classList.add('my-theme-class');

Can you please help me with this issue. I think replacing this.overlayContainer.themeClass = theme; inside the app.component.ts with the above code will resolve the issue but I am afraid it may break other things in the App. Thanks in advance.

Barrel files are no longer recommended by the Angular team:

Barrels now [after introduction of ngModules] are far less useful and have been removed from the [Angular] style guide

angular-ngrx-material-starter/src/app/core/index.ts
angular-ngrx-material-starter/src/app/shared/index.ts

In my experience, barrel files can lead to problems due to circular dependencies. Any thoughts on that?

Hello,
Do you have a solution to fix the issue with the animation on edge browser?
all content is to the left and then after the animation has finished it goes to the center

This repository currently runs single e2e test as a part of it's CI (continuous integration) build on Travis CI. Test can also be executed using npm run e2e.

It would be great to provide more e2e test examples for the users of this repository to serve as a great example for how to write their own tests.

• best practices for angular e2e testing ( eg: separate tests and page objects ... )
• more e2e test (mostly for the examples functionality) like add todo, toggle todo, ...
• suggest / evaluate / use community driven e2e test library for angular

Tests can be added in step by step fashion with one PR corresponding to the tests of one route / page to keep the required effort low but please feel free to add more ;)

ps: please use commit message in format like feat(e2e): add tests, #, just replace test description with stuff like "todos" based on applicable route / page.