fix: styles and store

Author: Alain BOUDARD

application/ng-shell/src/app/app-routing.module.ts

@@ -1,9 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
 
 export const APP_ROUTES: Routes = [
+  {
+    path: 'home', component: HomeComponent
+  },
   {
     path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
+  },
+  {
+    path: '', redirectTo: 'home', pathMatch: 'full'
   }
 ];
 

application/ng-shell/src/app/app.component.html

@@ -1,10 +1,14 @@
-<h1>{{title}}</h1>
 <ul>
-  <li class="user">## {{(user$ | async)?.name}} ##</li>
-  <li><a routerLink="/">Home</a></li>
-  <li><a routerLink="users">Users</a></li>
+  <li><span class="title">
+    {{title}} -
+  </span></li>
+  <li><a routerLink="home" routerLinkActive="active">Home</a></li>
+  <li><a routerLink="users" routerLinkActive="active">Users</a></li>
   <li *ngFor="let remote of remotes">
-    <a [routerLink]="remote.routePath">{{remote.displayName}}</a>
+    <a [routerLink]="remote.routePath" routerLinkActive="active">{{remote.displayName}}</a>
   </li>
+  <li class="user"><span>## {{ (user$ | async)?.name }} ##</span></li>
 </ul>
+<main>
 <router-outlet></router-outlet>
+</main>

application/ng-shell/src/app/app.component.scss

@@ -1,3 +1,3 @@
-li.user {
+li.user > span {
   color: crimson;
 }

application/ng-shell/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { CoreModule } from 'core';
 
@@ -8,13 +9,16 @@ import { AppComponent } from './app.component';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../environments/environment';
+import { HomeComponent } from './home/home.component';
 import { reducers, metaReducers } from './store';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent
   ],
   imports: [
+    FormsModule,
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,

application/ng-shell/src/app/home/home.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { CoreService } from 'core';
+import { Observable } from 'rxjs';
+import { getCount } from '../store/counter.selectors';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <h2>home works !</h2>
+    <p>This is the counter: {{counter$ | async}}</p>
+    <p><button class="btn" (click)="getCore()">get core</button></p>
+    <div>
+      <input type="number" [(ngModel)]="a"> / <input type="number" [(ngModel)]="b">
+    </div>
+    <div>
+    <span>
+        val : {{a + b}}
+    </span>
+    </div>
+
+  `,
+  styles: []
+})
+export class HomeComponent {
+
+
+  counter$: Observable<number> = this.store.select(getCount);
+
+  a = 1;
+  b = 2;
+
+  getCore(): void {
+    alert(this.coreService.getCore());
+  }
+
+constructor(
+  private store: Store,
+  private coreService: CoreService
+) {
+}
+
+
+}

application/ng-shell/src/app/store/counter.actions.ts

@@ -0,0 +1,5 @@
+import { createAction, props } from '@ngrx/store';
+
+export const loadCounters = createAction(
+  '[Counter] Load Counters'
+);

application/ng-shell/src/app/store/counter.reducer.ts

@@ -0,0 +1,17 @@
+import { Action, createReducer, on } from '@ngrx/store';
+
+
+export const counterFeatureKey = 'counter';
+
+export interface CounterState {
+  count: number;
+}
+
+export const initialState: CounterState = {
+  count: 10
+};
+
+export const reducer = createReducer(
+  initialState,
+
+);

application/ng-shell/src/app/store/counter.selectors.ts

@@ -0,0 +1,9 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { CounterState, counterFeatureKey } from './counter.reducer';
+
+const getCounterState = createFeatureSelector<CounterState>(counterFeatureKey);
+
+export const getCount = createSelector(
+  getCounterState,
+  state => state.count
+);

application/ng-shell/src/app/store/index.ts

@@ -6,14 +6,14 @@ import {
   MetaReducer
 } from '@ngrx/store';
 import { environment } from '../../environments/environment';
-
+import * as fromCounter from './counter.reducer';
 
 export interface State {
-
+  [fromCounter.counterFeatureKey]: fromCounter.CounterState;
 }
 
 export const reducers: ActionReducerMap<State> = {
-
+  [fromCounter.counterFeatureKey]: fromCounter.reducer,
 };
 
 

application/ng-shell/src/app/users/users.component.html

@@ -1 +1,2 @@
-<p>users works!</p>
+<h2>users works !</h2>
+<p>This is the internal feature</p>