Beagle’s library already has a default component that’s called when a screen loads. If necessary, you are able to change it to a customized one, according to your application’s needs.
To create a loading component, follow the steps below:
On React:
Step 1: Create a substitute component;
See an example:
import React, { FC } from 'react'
const CustomLoadingComponent: FC<any> = () => {
return (
<div>Carregando</div>
)
}
export default CustomLoadingComponent
Step 2: Add it to Beagle’s Service components list to substitute the default component:
import { createBeagleUIService } from '@zup-it/beagle-react'
import CustomLoadingComponent from '../components/CustomLoading'
export default createBeagleUIService<any>({
baseUrl: "localhost:4000",
components: {
"custom:loading":CustomLoadingComponent
}
})
On Angular
Step 1: Create a substitute component.
You can use angular CLI, if you want, to generate the component automatically, see:
ng generate component components/custom-loading
Step 2: After that, open beagle-components.module.ts
file and add the component to the list:
import { NgModule } from '@angular/core'
import { CustomLoadingComponent } from './components/custom-loading/custom-loading.component';
// import all the components you're going to use with beagle
const components = [
CustomLoadingComponent
];
@NgModule({
declarations: components,
entryComponents: components,
exports: components,
imports: [
// everything your components depend on
],
})
export class BeagleComponentsModule {}
Step 3: Now, you can replace the default component in beagle.module.ts
file:
import { BeagleModule } from '@zup-it/beagle-angular';
import { CustomLoadingComponent } from './components/custom-loading/custom-loading.component';
// import all the components you wish to use with Beagle.
@BeagleModule({
baseUrl: 'http://mypath',
module: {
path: './beagle-components.module',
name: 'BeagleComponentsModule',
},
components: {
'custom:loading': CustomLoadingComponent
}
})
export class Beagle { }
The files beagle.module.ts
and beagle-components.module.ts
are automatically generated by Angular’s library. If you haven’t found it, check you installation.
The default error component on Beagle is called when a connection error happens, for example, when a server path cannot be reached.
To this component, the library shows an interface called ErrorComponentParams
, throught it you have access to the error list and a retry method, responsible to retry the server request.
Attribute | Type | Definition |
---|---|---|
retry | Method | Retry the request to the server. |
When using this interface, you can create a component, see the example below with each framework:
On React, you have to create a Functional Component
that uses the ErrorComponentParams
interface. When using it, you have access to two props
errors and retry, which are the errors list and the retry
method, both described on the interface:
import { ErrorComponentParams } from '@zup-it/beagle-react'
import React, { FC } from 'react'
const CustomErrorComponent: FC<ErrorComponentParams> = ({ retry }) => {
return (
<>
<p>
Unexpected Error!
</p>
<button onClick={retry}>Retry</button>
</>
)
}
export default CustomErrorComponent
After that, add it to the Beagle Service components list:
import { createBeagleUIService } from '@zup-it/beagle-react'
import CustomErrorComponent from '../components/CustomError'
export default createBeagleUIService<any>({
baseUrl: "localhost:4000",
components: {
"custom:error":CustomErrorComponent
}
})
On Angular, create a component, if you prefer use angula cli to automatically generate the inicial structure:
ng g component components/custom-error
Open the controller
file of the created component and add the ErrorComponentParams
interface. The interface gives access to two @Inputs
errors and retry, which are the errors list and the request method:
import { Component, Input } from '@angular/core';
import { ErrorComponentParams } from '@zup-it/beagle-angular';
@Component({
selector: 'app-custom-error',
templateUrl: './custom-error.component.html',
styleUrls: ['./custom-error.component.less']
})
export class CustomErrorComponent implements ErrorComponentParams {
@Input() retry: () => void;
handleRetry() {
this.retry();
}
}
Now, add the created component to the file list beagle-components.module.ts
import { NgModule } from '@angular/core';
import { CustomErrorComponent } from './components/custom-error/custom-error.component';
// import all the components you're going to use with beagle
const components = [
CustomErrorComponent
];
@NgModule({
declarations: components,
entryComponents: components,
exports: components,
imports: [
// everything your components depend on
],
})
export class BeagleComponentsModule {}
Finally, replace the default component to beagle.module.ts
file:
import { CustomErrorComponent } from './components/custom-error/custom-error.component';
// import all the components you wish to use with Beagle.
@BeagleModule({
baseUrl: 'http://localhost:4202/assets',
module: {
path: './beagle-components.module',
name: 'BeagleComponentsModule',
},
components: {
'custom:error': CustomErrorComponent
}
})
export class Beagle { }
The files beagle.module.ts
and beagle-components.module.ts
are automatically generated by Angular’s library. If you haven’t found them, check your installation.
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.