Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

Custom component (Angular)

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

Source Code

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