To create a customized component, follow the next steps:
The component will be created with customText
name, in this example. In your terminal, use the following command:
ng generate component components/customText --skip-import
Here, a component will be created to render a CustomTextComponent
text.
import React from "react";
function CustomTextComponent() {
return <p>Beagle Web React</p>;
}
export default CustomTextComponent;
Open beagle-components.module.ts
file and add the new CustomTextComponent
generated in the list, see the example below:
...
import { CustomTextComponent } from './components/custom-text/custom-text.component'
// import all the components you're going to use with beagle
const components = [
CustomTextComponent
]
@NgModule({
declarations: components,
entryComponents: components,
exports: components,
imports: [
// everything your components depend on
],
})
export class BeagleComponentsModule {}
On beagle.module.ts
file, add your new component in the association’s list:
import { BeagleModule } from "@zup-it/beagle-angular";
import { CustomTextComponent } from "./components/custom-text/custom-text.component";
// import all the components you wish to use with Beagle.
@BeagleModule({
baseUrl: "http://localhost:4200/assets",
module: {
path: "./beagle-components.module",
name: "BeagleComponentsModule",
},
components: {
// Associate every beagle component to your angular component.
"custom:text": CustomTextComponent,
},
})
export class Beagle {}
If you didn’t find the beagle-components.module.ts
files or beagle.module.ts
, see how to configure Beagle’s library in your project.
Now, access Beagle’s library configuration file in your project and add your component to the association list. If you don’t have this file in your project, learn here how to configure Beagle Web React library.
import { createBeagleUIService } from "@zup-it/beagle-react";
import CustomTextComponent from "../components/CustomTextComponent";
export default createBeagleUIService <
any >
{
baseUrl: "",
components: {
"custom:text": CustomTextComponent,
},
};
On the step below, the word custom was added to identify the components, this will make Beagle’s library understand that this component does not belong to the predefined component’s list.
To add properties to the created component, follow the next steps:
custom-text.component.ts
file and add an @Input
like the code below:import { Component, OnInit, Input } from "@angular/core";
@Component({
selector: "app-custom-text",
templateUrl: "./custom-text.component.html",
styleUrls: ["./custom-text.component.less"],
})
export class CustomTextComponent implements OnInit {
@Input() myCustomText: string;
constructor() {}
ngOnInit(): void {}
}
custom-text.component.html
<div>
<h1>{{myCustomText}}</h1>
</div>
If you have a project that is currently running, it is necessary to restart with the commands: yarn serve
or npm run serve
On React, all the attributes defined in the JSON can be accessed through props, see the example:
import React from "react";
function CustomTextComponent(props) {
return <p>{props.myCustomText}</p>;
}
export default CustomTextComponent;
Now you can add your component to a JSON file:
{
"_beagleComponent_": "beagle:container",
"children": [
{
"_beagleComponent_": "custom:text",
"myCustomText":"Beagle Web is Awesome"
}
]
}
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.