This guide shows how to create and use a custom component in Radzen.

Create the component

  1. Add a new file in the client/src/app directory of your Radzen application e.g. custom.component.ts.
  2. Implement the component. For this example it will be a button with one @Input() and one @Output() property.
import { EventEmitter, Component, Input, Output } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <button (click)="onClick()">{{ text }}</button>
  `
})
export class CustomComponent {
  @Input() text: string;
  @Output() navigate = new EventEmitter();

  onClick() {
    this.navigate.next();
  }
} 

Register the component

The component should be registered with the application module. Open client/src/app/app.module.ts and register it.

import { NgModule } from '@angular/core';

// Import the custom component
import { CustomComponent } from './custom.component';

import { AppImports, AppComponent, AppDeclarations, AppProviders } from './app.module-generated';

@NgModule({
  declarations: [
    // Register the custom component
    CustomComponent,
    ...AppDeclarations
  ],
  imports: [
    ...AppImports
  ],
  providers: [
    ...AppProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Radzen generates the app.module.ts file only once and will not overwrite it. This allows various customizations - custom components, services etc.

Use the custom component

  1. Drag and drop a Html component from the Radzen toolbox.
  2. Set the Content property to <my-component text="Label" (navigate)="onNavigate()"></my-component>.
  3. Open the *.component.ts file that Radzen has generated for your page to add the onNavigate event handler. Radzen generates that file only once and will not overwrite it.
  4. Add the event handler implementation.
import { Component, Injector } from '@angular/core';
import { <PageName>Generated } from './<PageName>-generated.component';

@Component({
  selector: '<PageName>',
  templateUrl: './<PageName>.component.html'
})
export class <PageName>Component extends <PageName>Generated {
  constructor(injector: Injector) {
    super(injector);
  }

  // Handle the navigate event
  onNavigate() {
    location.href = 'http://www.radzen.com';
  }
}

If you hit a bug or want to get in touch please open an issue or send an email to info at radzen.com.

Make sure you are running the latest version: 1.6.0.