Angular2 and NgRx

My Challenge was to get little experience of working with ngrx .
What is NgRx?
NgRx is RxJS powered, inspired by Redux state management lib for Angular2.

Basic Philosophy

Like many state management frameworks like Redux - app skeleton must include following module types - Store, Actions and Reducers

Store

simple class or object representing the application state

import postListReducer, * as fromPostList from './post-list';
import postReducer, * as fromPost from './post';

export interface AppState {
    posts: fromPostList.PostListState;
    post: fromPost.PostState;
};

Actions

function that passes type and params of what reducer should do

    static LOAD_POSTS = '[Post] Load Posts';
    loadPosts(): Action {        
        return {
            type: PostActions.LOAD_POSTS
        };
    }

Reducers

Immutable function that returns new object containing changed current state returned

export default function (state = initialState, action: Action): PostListState {
    switch (action.type) {
        case PostActions.LOAD_POST_SUCCESS: {            
            return action.payload;
        }
    }
}

Effects

Since state actions are asynchronous - it is better to take advantage of using effects:

    @Effect() loadPosts$ = this.update$
        .ofType(PostActions.LOAD_POSTS)
        .switchMap(() => {            
            return this.svc.getAllSections();
        })
        .map(posts => this.postActions.loadPostsSuccess(posts));

Refactoring our components

Now we can replace our logic inside components:
Instead of:

   this.loadHtml.getPost(params['id']).subscribe(post => {
        this.post = post;
      })

We can now write:

  this.store.dispatch(this.postActions.getPOST(this.name));
  ...
  ...
   store.select('post').subscribe((post:Post) => {
     this.post = post;   
  })

Much more accurate, is it?

Learning Angular2 - Free Stuff

Hi my dear readers, hope you all well...
Wanted to publish some interesting post about angular2 form validations.
Template driven forms VS reactive forms, NgModel, NgForm etc... You know

But instead i decided it will be more useful to publish links to some angular2 tutorials/ blogs i gathered across internet:

Free online Books:

• learn angular2
• angular2 training

Free video tutorials:

• angular2 fundamentals

Blogs

• todd motto angular2

Github Repos

• angular2-tour-of-heroes (first steps)
• ng-pokedex (excellent repo with e2e)
• ngrx/example-app (app using ngrx)

Thats not a lot, but pretty angouth to start with...
Anyway feel free to add more free useful stuff in the comments!

   

    

Building Stretching to the bottom Layout With Flex-Box

Layout

Everybody knows that to build the layout is complicate thing, especially when we talking about layout which should stretch to page bottom. In other words - with footer sticking to page bottom.

I'm sure there is a lot of ways around how to build this layout, but in this article i will try to show how to build it using flex-box CSS3 feature

Dividing to sections

First lets decide to how to divide our layouts to sections:
I decided that two main sections will be displayed one besides other like to columns - nav and main elements
Inside main element will be 3 other sections positioned one above the other:header,article and footer

    <div class="wrap">
      <nav>
        <ul>
          <li><a href>1 link</a></li>
          <li><a href>2 link</a></li>
          <li><a href>3 link</a></li>
        </ul>
      </nav>
      <main>
         <header>Hello Plunker!</header>
         <article>
           HellHePlunkllo Plunker! Plunk
           Hello Plunker!Hello P Plunk
           lunker Plunk!o PHello Plunker Plunk
           !lunker! Hello Plunker! Plunk
         </article>
         <footer>footer</footer>
      </main>
    </div>

VH Trick

One css feature i found very useful is VH unit. This vh represents percents of view height (e.g. browser window height) ,and thus given some element height set to 100vh makes it to stretch over the whole window from its top to its bottom

.wrap{/* root container */
  height:100vh;
  background:green;
  display:flex;
}

Nav & Main sections flow

Since we want those sections to be stick one near other (like two cells in the row) all we have to do is set the display property of their container to flex
By default flex-direction property is "row"
Since nav section has fixed width of 234px - all that left to do is to make the main section to catch all the remaining space:

nav{
  width:234px;
  background:orange;
}
main{
  flex:1   100%;/*will make it stretch over remaining space*/
}

Header Article and Footer

First thing is to set flow of main container to be column

main{
  display:flex;
  flex:1   100%;
  flex-direction:column;
}

Now the only thing left is to arrange the header above the article and make article to catch all available space between header and footer.

article{
  flex:1   100%;
  background:red;
}

See this plunker for running code