tomastrajan / angular-ngrx-material-starter Goto Github PK
View Code? Open in Web Editor NEWAngular, NgRx, Angular CLI & Angular Material Starter Project
Home Page: https://tomastrajan.github.io/angular-ngrx-material-starter
License: MIT License
Angular, NgRx, Angular CLI & Angular Material Starter Project
Home Page: https://tomastrajan.github.io/angular-ngrx-material-starter
License: MIT License
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!
Hi @tomastrajan !
Doesn't work for me ... any solution ? Thanks
angular-ngrx-material-starter/src/app/app.module.ts
Lines 5 to 6 in 5e9106a
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.
Instead of overriding the Action
interface for @ngrx
its a ver nice development experience having typed actions with models for the payload, with intellisense.
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.
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:
fix(examples): fix stock market API source
or something similarI 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 !
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 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?
I'm trying to run angular cli commands like ng generate component hello and it changes nothing.
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 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.
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.
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
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.
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.
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.
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?
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.
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.
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>
I don't get the distinction between these two folders? Can you elaborate on this a bit?
Also noticed that there is no theme applied to SnackBars when used.
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.
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 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 :)
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?
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
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
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
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. :)
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
Hi guys, somebody knows how to avaible the pug/jade templating support?
Regards.
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!
Thanks for sharing. It is a great repo.
I would like to recommend you using ngrx-store-localstorage instead.
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.
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.
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?
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.
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.
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.
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.
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
** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ **
95% emitting LicenseWebpackPlugin
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.
as per style guide, shared module is intended to be imported only in feature modules and not in app or core.
The starter project contains lazy loaded examples module which currently contains following examples:
Create new example demonstrating "real life" complex reactive form using a form builder.
examples/form
routeForm should have following features:
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.
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.
Can you add new feature, auth with Firebase or AngularFire?
Thanks
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.