Custom component (Angular)link

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

Source Code

Create the componentlink

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 componentlink

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 componentlink

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';
  }
}