ConnectionIndicator

Use cases:

• Visual representation of the websocket connection status.

Example

Genesis

Declaration

<rapid-connection-indicator></rapid-connection-indicator>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-connection-indicator></rapid-connection-indicator>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

  <rapid-connection-indicator></rapid-connection-indicator>

Usage

export function MyComponent() {
  return (
    <rapid-connection-indicator></rapid-connection-indicator>
  );
}

Angular

Declaration

  <rapid-connection-indicator></rapid-connection-indicator>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
        <rapid-connection-indicator></rapid-connection-indicator>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Name	Type	Description	Example
show-label	boolean	Displays the host url if connected; otherwise it displays the text disconnected.	<rapid-connection-indicator show-label>

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

This component doesn't have any slots.

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.

Login Form

This component has already been integrated into the form of the login page and can easily be enabled by setting the showConnectionIndicator parameter to true.

Example login route settings

{
path: 'login',
  element: Login,
  title: 'Login',
  name: 'login',
  layout: loginLayout,
  settings: {
  defaultRedirectUrl: 'protected',
    public: true,
    resetPassword: true,
    forgotPassword: true,
    requestAccount: true,
    ssoToggle: true,
    ssoEnable: false,
    showConnectionIndicator: true,
},
childRouters: true,
}

Result (connected)

Result (disconnected)