Custom Component

You will find the description on how to create a customized component for Angular and React

Creating a customized component

To create a customized component, follow the next steps:

  1. You need an ordinary component, after that you have to create a new one in your project:

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;
  1. Now, add Beagle’s library association in your project

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 {}

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.

Adding properties to the component

To add properties to the created component, follow the next steps:

  1. Open the 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 {}
}
  1. Add the reference to the file custom-text.component.html
<div>
    <h1>{{myCustomText}}</h1>
</div>

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;

Creating a JSON

Now you can add your component to a JSON file:

{
    "_beagleComponent_": "beagle:container",
    "children": [
        {
            "_beagleComponent_": "custom:text",
            "myCustomText":"Beagle Web is Awesome"
        }
    ]
}

Last modified February 11, 2021: create content (#298) (43225e15)