| SCION Workbench | Projects Overview | Changelog | Contributing | Sponsoring |
|---|
SCION Workbench > How To Guides > View
Any component can be displayed as a view. A view is a regular Angular component associated with a route. Below are some examples of common route configurations.
import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';
bootstrapApplication(AppComponent, {
providers: [
provideRouter([
{path: 'path/to/view1', component: ViewComponent},
{path: 'path/to/view2', loadComponent: () => import('./view/view.component')}, // lazy loaded route
{path: 'path/to/views', loadChildren: () => import('./routes')}, // lazy loaded routes
]),
],
});import {Routes} from '@angular/router';
// file: routes.ts
export default [
{path: 'view3', component: ViewComponent},
{path: 'view4', loadComponent: () => import('./view/view.component')},
] satisfies Routes;Having defined the routes, views can be opened using the WorkbenchRouter.
import {WorkbenchRouter} from '@scion/workbench';
import {inject} from '@angular/core';
// Open view 1
inject(WorkbenchRouter).navigate(['/path/to/view1']);
// Open view 2
inject(WorkbenchRouter).navigate(['/path/to/view2']);
// Open view 3
inject(WorkbenchRouter).navigate(['/path/to/views/view3']);
// Open view 4
inject(WorkbenchRouter).navigate(['/path/to/views/view4']);The workbench supports associating view-specific data with a route, such as a tile, a heading, or a CSS class.
import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';
import {WorkbenchRouteData} from '@scion/workbench';
bootstrapApplication(AppComponent, {
providers: [
provideRouter([
{
path: 'path/to/view',
loadComponent: () => import('./view/view.component'),
data: {
[WorkbenchRouteData.title]: 'View Title',
[WorkbenchRouteData.heading]: 'View Heading',
[WorkbenchRouteData.cssClass]: ['class 1', 'class 2'],
},
},
]),
],
});Alternatively, the above data can be set in the view by injecting the view handle WorkbenchView. See How to interact with a view.