Custom component (Angular)
This guide shows how to create and use a custom component in Radzen.
Create the component
- Add a new file in the
client/src/appdirectory of your Radzen application e.g.custom.component.ts. - 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
- Drag and drop a Html component from the Radzen toolbox.
- Set the
Contentproperty to<my-component text="Label" (navigate)="onNavigate()"></my-component>. - Open the
*.component.tsfile that Radzen has generated for your page to add theonNavigateevent handler. Radzen generates that file only once and will not overwrite it. - 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';
}
}