How to use angular-formio - 6 common examples

// provide our own Event resource page.
@Component({
  styles: [
    'ul.nav.nav-tabs { margin-bottom: 20px; }',
    '.resource-back-icon { font-size: 1.2em; padding: 0.6em; }'
  ],
  template: require('./event.html')
})
export class EventResourceComponent extends FormioResourceComponent {
  constructor(public service: FormioResourceService, public route: ActivatedRoute) {
    super(service, route);
  }
}

// add the Activity nested resource.
let eventResourceRoutes: Routes = FormioResourceRoutes({
  resource: EventResourceComponent
});
eventResourceRoutes[2].children.push({
  path: 'activity',
  loadChildren: 'es6-promise-loader?,[name]!../activity/activity.module#ActivityResource'
});

@NgModule({
  imports: [
    CommonModule,
    FormioResource,
    RouterModule.forChild(eventResourceRoutes)
  ],
  declarations: [
    EventResourceComponent
  ],

'' +
        '' +
      '' +
    ''
})
export class UserViewComponent extends FormioResourceViewComponent {
  constructor(public service: FormioResourceService, public config: FormioResourceConfig) {
    super(service, config);
  }
}

@NgModule({
  imports: [
    CommonModule,
    FormioResource,
    RouterModule.forChild(FormioResourceRoutes({
      view: UserViewComponent
    }))
  ],
  providers: [
    FormioResourceService,
    {provide: FormioResourceConfig, useValue: {
      name: 'user',
      form: 'user'
    }}
  ],
  declarations: [
    UserViewComponent
  ]
})
export class UserResource {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {
  FormioResource,
  FormioResourceConfig,
  FormioResourceRoutes,
  FormioResourceService
} from 'angular-formio/resource';

@NgModule({
  imports: [
    CommonModule,
    FormioResource,
    RouterModule.forChild(FormioResourceRoutes())
  ],
  declarations: [],
  providers: [
    FormioResourceService,
    {provide: FormioResourceConfig, useValue: {
      name: 'employee',
      form: 'employee'
    }}
  ]
})
export class EmployeeModule { }

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormioModule } from 'angular-formio';
import {
  FormioResource,
  FormioResourceRoutes,
  FormioResourceConfig,
  FormioResourceService
} from 'angular-formio/resource';

@NgModule({
  imports: [
    CommonModule,
    FormioModule,
    FormioResource,
    RouterModule.forChild(FormioResourceRoutes())
  ],
  declarations: [],
  providers: [
    FormioResourceService,
    {
      provide: FormioResourceConfig,
      useValue: {
        name: 'participant',
        form: 'participant',
        parents: [
          'event',
          {
            field: 'user',
            resource: 'currentUser',
            filter: false
          }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AppConfig } from '../../../config';
import {
  FormioResource,
  FormioResourceRoutes,
  FormioResourceConfig,
  FormioResourceService
} from 'angular-formio/resource';

@NgModule({
  imports: [
    CommonModule,
    FormioResource,
    RouterModule.forChild(FormioResourceRoutes())
  ],
  providers: [
    FormioResourceService,
    {provide: FormioResourceConfig, useValue: {
      name: 'activity',
      form: 'activity',
      parents: ['event']
    }}
  ]
})
export class ActivityResource {}

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormioAuthModule, FormioAuthRoutes } from 'angular-formio/auth';
const authRoutes = FormioAuthRoutes();
@NgModule({
  imports: [
    FormioAuthModule,
    RouterModule.forChild(authRoutes)
  ]
})
export class AuthModule {}