From 1f5b257a273d385b1f4b45d76466b024fb5fa798 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 20:59:53 -0200 Subject: [PATCH 1/8] Add a subroute on tutorials --- src/app/tutorials/tutorials.router.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/tutorials/tutorials.router.ts b/src/app/tutorials/tutorials.router.ts index 1eead52..c906802 100644 --- a/src/app/tutorials/tutorials.router.ts +++ b/src/app/tutorials/tutorials.router.ts @@ -1,9 +1,16 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { TutorialsComponent } from './tutorials.component'; +import { InputComponent } from './input/input.component'; const routes: Routes = [ - { path: '', component: TutorialsComponent }, + { + path: '', + component: TutorialsComponent, + children: [ + { path: 'input', component: InputComponent }, + ], + }, ]; export const TutorialsRoutingModule = RouterModule.forChild(routes); From 961248c697d3fa51ada318dbb08e9480d06db413 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:00:32 -0200 Subject: [PATCH 2/8] Add Input component --- src/app/tutorials/input/input.component.html | 17 ++++++++++++ src/app/tutorials/input/input.component.scss | 0 .../tutorials/input/input.component.spec.ts | 27 +++++++++++++++++++ src/app/tutorials/input/input.component.ts | 9 +++++++ 4 files changed, 53 insertions(+) create mode 100644 src/app/tutorials/input/input.component.html create mode 100644 src/app/tutorials/input/input.component.scss create mode 100644 src/app/tutorials/input/input.component.spec.ts create mode 100644 src/app/tutorials/input/input.component.ts diff --git a/src/app/tutorials/input/input.component.html b/src/app/tutorials/input/input.component.html new file mode 100644 index 0000000..7a912ad --- /dev/null +++ b/src/app/tutorials/input/input.component.html @@ -0,0 +1,17 @@ +
+

You can use @Input to decorate a field making it accept values sent by the component props.

+

For example:

+ 
+    export class TitleComponent {{ '{' }}
+      @Input()
+      message: string;
+    {{ '}' }}
+
+ +

And then you can call the component passing a value for message.

+ 
+    <app-title message="Hello world" />
+
+ + +
diff --git a/src/app/tutorials/input/input.component.scss b/src/app/tutorials/input/input.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tutorials/input/input.component.spec.ts b/src/app/tutorials/input/input.component.spec.ts new file mode 100644 index 0000000..7fc6af1 --- /dev/null +++ b/src/app/tutorials/input/input.component.spec.ts @@ -0,0 +1,27 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputComponent } from './input.component'; +import { SharedModule } from '../../shared/shared.module'; + +describe('InputComponent', () => { + let component: InputComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputComponent ], + imports: [SharedModule], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tutorials/input/input.component.ts b/src/app/tutorials/input/input.component.ts new file mode 100644 index 0000000..a406d7d --- /dev/null +++ b/src/app/tutorials/input/input.component.ts @@ -0,0 +1,9 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-input', + templateUrl: './input.component.html', + styleUrls: ['./input.component.scss'] +}) +export class InputComponent { +} From 6261d26af1dfa91410687b379256bc719ff70be0 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:01:03 -0200 Subject: [PATCH 3/8] Add Title component with @Input decorator --- src/app/shared/title/title.component.html | 4 ++++ src/app/shared/title/title.component.scss | 0 src/app/shared/title/title.component.spec.ts | 25 ++++++++++++++++++++ src/app/shared/title/title.component.ts | 11 +++++++++ 4 files changed, 40 insertions(+) create mode 100644 src/app/shared/title/title.component.html create mode 100644 src/app/shared/title/title.component.scss create mode 100644 src/app/shared/title/title.component.spec.ts create mode 100644 src/app/shared/title/title.component.ts diff --git a/src/app/shared/title/title.component.html b/src/app/shared/title/title.component.html new file mode 100644 index 0000000..7044fe7 --- /dev/null +++ b/src/app/shared/title/title.component.html @@ -0,0 +1,4 @@ +
+

{{ message }}

+
+
diff --git a/src/app/shared/title/title.component.scss b/src/app/shared/title/title.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/title/title.component.spec.ts b/src/app/shared/title/title.component.spec.ts new file mode 100644 index 0000000..df219fa --- /dev/null +++ b/src/app/shared/title/title.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TitleComponent } from './title.component'; + +describe('TitleComponent', () => { + let component: TitleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TitleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TitleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/title/title.component.ts b/src/app/shared/title/title.component.ts new file mode 100644 index 0000000..2567f4c --- /dev/null +++ b/src/app/shared/title/title.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-title', + templateUrl: './title.component.html', + styleUrls: ['./title.component.scss'] +}) +export class TitleComponent { + @Input() + message: string; +} From a318697990da9aee8dee64102927f523d4d6d231 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:01:43 -0200 Subject: [PATCH 4/8] Add a menu with tutorial links Adds the class active on link with current route --- src/app/tutorials/tutorials.component.html | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/app/tutorials/tutorials.component.html b/src/app/tutorials/tutorials.component.html index 917645a..d8f4831 100644 --- a/src/app/tutorials/tutorials.component.html +++ b/src/app/tutorials/tutorials.component.html @@ -1,8 +1,19 @@ -
+
TutorialsComponent -
- Tutorials +
+
+ +
+
+
+ +
+
From b6a13b5089b339335b823feba63cf7557ed30b2f Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:01:55 -0200 Subject: [PATCH 5/8] Add tutorial styles --- src/app/tutorials/tutorials.component.scss | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/app/tutorials/tutorials.component.scss b/src/app/tutorials/tutorials.component.scss index e69de29..6b20649 100644 --- a/src/app/tutorials/tutorials.component.scss +++ b/src/app/tutorials/tutorials.component.scss @@ -0,0 +1,25 @@ +.Tutorials-container fieldset { + padding-top: 0; +} + +.Tutorials-menu { + background-color: #f1f1f1; + list-style: none; + margin: 0; + padding: 0; +} + +.Tutorials-menu li { + margin: 0; +} + +.Tutorials-menu a { + display: block; + color: #000; + padding: .5em; +} + +.Tutorials-menu a.active { + background-color: #4CAF50; + color: #fff; +} From a78c9f50d1d98d064f113a588b044d363e121745 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:02:58 -0200 Subject: [PATCH 6/8] Add a sub module to group common components This module declares shared components and exports them. To use in another module you can simply add SharedModule in the imports section. --- src/app/shared/shared.module.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/app/shared/shared.module.ts diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 0000000..e1fafd7 --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { LayoutComponent } from './layout/layout.component'; +import { TitleComponent } from './title/title.component'; +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + ], + exports: [ + LayoutComponent, + TitleComponent, + ], + declarations: [ + LayoutComponent, + TitleComponent, + ], +}) +export class SharedModule { } From ed662a5bd4eac6f3dbfcc466ae7c459fede35435 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:03:27 -0200 Subject: [PATCH 7/8] Import SharedModule on App and Tutorials modules --- src/app/app.module.ts | 3 ++- src/app/tutorials/tutorials.module.ts | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4afb6dc..0a68f3d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,15 +5,16 @@ import { AppComponent } from './app.component'; import { AppRoutingModule } from './app.router'; import { LayoutComponent } from './shared/layout/layout.component'; import { RouterModule } from '@angular/router'; +import { SharedModule } from './shared/shared.module'; @NgModule({ declarations: [ AppComponent, - LayoutComponent ], imports: [ AppRoutingModule, BrowserModule, + SharedModule, ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/tutorials/tutorials.module.ts b/src/app/tutorials/tutorials.module.ts index 4ee65dd..e3e6e9f 100644 --- a/src/app/tutorials/tutorials.module.ts +++ b/src/app/tutorials/tutorials.module.ts @@ -2,12 +2,15 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TutorialsComponent } from './tutorials.component'; import { TutorialsRoutingModule } from './tutorials.router'; +import { InputComponent } from './input/input.component'; +import { SharedModule } from '../shared/shared.module'; @NgModule({ imports: [ CommonModule, TutorialsRoutingModule, + SharedModule, ], - declarations: [TutorialsComponent] + declarations: [TutorialsComponent, InputComponent], }) export class TutorialsModule { } From e69ca7d75561ae522bad8de76482e472aeee00c9 Mon Sep 17 00:00:00 2001 From: Bruno Leonardo Michels Date: Fri, 24 Nov 2017 21:03:45 -0200 Subject: [PATCH 8/8] Add router testing module on tutorials tests --- src/app/tutorials/tutorials.component.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/tutorials/tutorials.component.spec.ts b/src/app/tutorials/tutorials.component.spec.ts index f5dc56d..ad2f3d6 100644 --- a/src/app/tutorials/tutorials.component.spec.ts +++ b/src/app/tutorials/tutorials.component.spec.ts @@ -1,6 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { TutorialsComponent } from './tutorials.component'; +import { RouterTestingModule } from '@angular/router/testing'; describe('TutorialsComponent', () => { let component: TutorialsComponent; @@ -8,7 +9,8 @@ describe('TutorialsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TutorialsComponent ] + declarations: [ TutorialsComponent ], + imports: [RouterTestingModule], }) .compileComponents(); }));