Submodules and components #9
Conversation
Adds the class active on link with current route
This module declares shared components and exports them. To use in another module you can simply add SharedModule in the imports section.
| path: '', | ||
| component: TutorialsComponent, | ||
| children: [ | ||
| { path: 'input', component: InputComponent }, |
There was a problem hiding this comment.
This sub-module is loaded by the path tutorials , so path here is going to be tutorials/input and will render the component InputComponent
| <app-title message="Hello world" /> | ||
| </pre> | ||
|
|
||
| <app-title message="Hello world"></app-title> |
There was a problem hiding this comment.
The component Title has a field named message which is decorated with @Input(). This allows you to add a component and set the value of message.
| styleUrls: ['./title.component.scss'] | ||
| }) | ||
| export class TitleComponent { | ||
| @Input() |
There was a problem hiding this comment.
This decorator allows you to set the value of this field in the html markup.
<app-title message="some message"></app-title>
| <div class="col-2"> | ||
| <ul class="Tutorials-menu"> | ||
| <li> | ||
| <a routerLink="/tutorials/input" [routerLinkActive]="'active'">@Input</a> |
There was a problem hiding this comment.
You can use routerLinkActive to bind a class name that is going to be set on the element if the current route match the routerLink
| @NgModule({ | ||
| imports: [ | ||
| CommonModule, | ||
| RouterModule, |
There was a problem hiding this comment.
Required if any of your components use router-outlet
| LayoutComponent, | ||
| TitleComponent, | ||
| ], | ||
| declarations: [ |
There was a problem hiding this comment.
Components declared by this module
| CommonModule, | ||
| RouterModule, | ||
| ], | ||
| exports: [ |
There was a problem hiding this comment.
Components this module exports.
If you want to use any of these components in another module you can import SharedModule (this module) in the other module, anything that is exported here will be available in the other end.
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| CommonModule, | ||
| TutorialsRoutingModule, | ||
| SharedModule, |
There was a problem hiding this comment.
Imports the TitleComponent used by InputComponent in this module.
|
|
||
| describe('TutorialsComponent', () => { | ||
| let component: TutorialsComponent; | ||
| let fixture: ComponentFixture<TutorialsComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ TutorialsComponent ] | ||
| declarations: [ TutorialsComponent ], | ||
| imports: [RouterTestingModule], |
There was a problem hiding this comment.
To test components that use router-outlet you need to import RouterTestingModule, a module specifically for tests.
Testing
Routes
Modules & Components