KarolinaCzo’s gists

KarolinaCzo / gist:64111ff1a8b4ecdcac9cbeb1cad70629

Created August 7, 2018 12:19

'AppTranslationService' with Feature Module Store (dispatchers, actions, reducers) - Angular 2/6

	1) In 'main-page-module.ts':
	import { NgModule } from '@angular/core';
	import { CommonModule } from '@angular/common';
	// Import Bootstrap
	import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
	// Import components
	import { MainPageComponent } from './main-page.component';
	import { NavbarComponent } from './components/navbar/navbar.component';
	import { FooterComponent } from './components/footer/footer.component';
	import { JumbotronComponent } from './components/jumbotron/jumbotron.component';

KarolinaCzo / gist:ea3d2eccc9a1dca52c03b29702fdb259

Created August 7, 2018 10:33

Create 'AppTranslationService' to change the language after icon 'click'

	1) Import the 'AppTranslationService' as a 'provider' in the module, more info on this here:
	"Declare the service in the providers of a @NgModule which has both SearchComponent and TransferComponent in its declarations. 9 times out of 10 this is the right solution!"
	https://stackoverflow.com/questions/42567674/share-data-between-components-using-a-service-in-angular2

	import { NgModule } from '@angular/core';
	import { CommonModule } from '@angular/common';
	// Import Bootstrap
	import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
	// Import components
	import { MainPageComponent } from './main-page.component';

KarolinaCzo / gist:2a89d3592362c3c407815bae29333df9

Created August 7, 2018 08:28

Using 'TranslateService' to change the language after icon 'click'

	Situation: a main-page module with a navbar-component :)

	1) In 'main-page.module':
	import { NgModule } from '@angular/core';
	import { CommonModule } from '@angular/common';
	// Import Bootstrap
	import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
	// Import components
	import { MainPageComponent } from './main-page.component';
	import { NavbarComponent } from './components/navbar/navbar.component';

KarolinaCzo / gist:e4e2fb70deb4dc08dd8c59f4dba43f2a

Created August 3, 2018 12:46

How to add @ngx-translate/http-loader to Anugular 2/6 app

	More info on this here:
	https://github.com/ngx-translate/http-loader
	https://stackblitz.com/github/ngx-translate/example?file=src%2Fapp%2Fapp.component.ts

	1) Install through npm:
	npm install @ngx-translate/core --save
	npm install @ngx-translate/http-loader --save

	2) In 'main-page.module':
	import { NgModule } from '@angular/core';

KarolinaCzo / gist:32fbfab6e72205bc190a9e3a4136415c

Last active August 2, 2018 10:34

Example feature module with a private store and feature selectors - Angular 2/6

	I'm not sure I understand everything here correctly - but it works :P
	The order of info flow is as follows:
	component -> dispatcher -> actions -> reducers - > component

	1) In 'register-page.module':
	import { NgModule } from '@angular/core';
	import { CommonModule } from '@angular/common';
	// Import Bootstrap
	import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
	// Import components

KarolinaCzo / gist:d118c111b9bb11fd1b72b20ec95dca70

Created August 2, 2018 07:27

How to make a ngrx-store for feature modeule in Angular 2/6

	More information here:
	https://github.com/ngrx/platform/blob/master/docs/store/selectors.md
	https://toddmotto.com/ngrx-store-understanding-state-selectors

	1) In register-page.component.ts:
	import { Component, OnInit } from '@angular/core';
	// Import for reducers to work
	import { Store } from '@ngrx/store';
	import { Observable } from 'rxjs';
	// Import State for reducers

KarolinaCzo / gist:3170967a1e119650759bfd50a72e6d7e

Created August 1, 2018 12:20

Create a simple increment/decrement reducer in ngrx for Angular 2/6

	1) In 'app.module.ts'
	- import reducers:
	import { reducers } from './app.reducers';

	- make sure your module looks similar:
	@NgModule({
	declarations: [AppComponent],
	imports: [
	BrowserModule,
	NgbModule.forRoot(),

KarolinaCzo / gist:b0cc138637d28c0f372543b1fff13cb5

Created August 1, 2018 09:23

Add ngrx/store-devtools

	More infor here: https://github.com/ngrx/platform/blob/master/docs/store-devtools/README.md

	Instructions can be found here:
	https://github.com/ngrx/platform/blob/master/docs/store-devtools/README.md

	1) install through npm:
	npm install @ngrx/store-devtools --save

	2) Download the Redux Devtools Extension:
	https://github.com/zalmoxisus/redux-devtools-extension/

KarolinaCzo / gist:7a28367e66672219c99e7d11eb003e12

Last active August 1, 2018 07:49

How to add ngrx router in Angular 2/6

	Install ngrx-store through npm: npm install @ngrx/store
	(more info here: https://github.com/ngrx/platform/blob/master/docs/store/README.md)
	then...

	1) Add a relular Angular Router - here's a good tutorial:
	https://angular.io/guide/router

	- make sure that there is the <base> element to the index.html as the first child in the <head> tag:
	<base href="/">

KarolinaCzo / gist:1f18b5ec38ff46748e81982af89ad7d8

Created July 30, 2018 07:16

Angular for Bootstrap isn't working :P

	Maybe you forgot to import in in your 'module.ts' file?

	import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

	@NgModule({
	imports: [CommonModule, NgbModule.forRoot()]
	})