SiLandingPageComponent documentation¶

selector

si-landing-page

A comprehensive landing page component that provides a standardized layout for authentication flows.

This component serves as a container for various authentication-related components and provides a consistent layout with support for branding, internationalization, legal acknowledgments, and various notification types. It includes slots for custom content and handles responsive layout adjustments.

The component supports: - Custom branding and background images - Multi-language support with language switcher - Legal acknowledgments and terms display - Alert and notification systems - Copyright information display - Responsive layout with full-height section option

Example:

<si-landing-page
  [heading]="appTitle"
  [subtitle]="appDescription"
  [availableLanguages]="languages"
  [copyrightDetails]="copyright"
  [announcement]="announcementConfig"
  [loginAlert]="loginErrorConfig">

  <si-login-basic
    (login)="handleLogin($event)"
    (usernameValidation)="validateUsername($event)">
  </si-login-basic>

</si-landing-page>

Input Properties¶

Name	Type	Default	Description
announcement ¶	`AlertConfig`		Config to enable/disable general alerts on landing page
availableLanguages ¶	(`string`[] \| `IsoLanguageValue`[])	`[]`	Input of si-language-switcher: List of all available languages in this application.
backgroundImageUrl ¶	`string`	`'./assets/images/landing-page-steel.webp'`	URL to custom background image
copyrightDetails ¶	`CopyrightDetails`		Copyright information to be displayed. Alternatively, you can use the SI_COPYRIGHT_DETAILS global inject.
heading ¶	`TranslatableString`		Heading of the application.
implicitLegalAcknowledge ¶	(`string` \| `TemplateRef`<`unknown`>)		Text for some legal artifacts (e.g. Terms of Use) that needs more attention before the login.
links ¶	`Link`[]	`[]`	List of links (e.g. Corporate information)
liveDataWarning ¶	`LandingPageWarning`		Warning text for Live Data. Can be shown, if there is no legal artifact which needs immediate user attention.
loginAlert ¶	`AlertConfig`		Config to enable/disable login related error/alerts
subheading ¶	`TranslatableString`		Secondary heading of the application.
subtitle ¶	`TranslatableString`		Short description of the application.
translationKey ¶	`string`	`'LANGUAGE'`	Input of si-language-switcher: Key for translation. If your languages are already translated, you may display them without any manipulation by passing in an empty string.
version ¶	`string`		Version of the application.
logoUrl ¶	`string`		URL to custom brand image. Deprecated: By default the logo provided in the theme will be used. For a different logo use the respective CSS variables: `<si-landing-page style="--landing-page-logo: url('https://example.com'); --landing-page-logo-width: 100px; --landing-page-logo-height: 100px" />`

Attributes and Methods¶

Name	Type	Default	Description
(readonly) isFullHeightSection ¶	`WritableSignal`<`boolean`>	`false`	Option to display the landing page content in full height.

Types Documentation¶

AlertConfig

¶

Interface

Properties
action?: `Link`¶
heading?: `string`¶
message: `string`¶
severity: `StatusType`¶
translationParams?: { [ key: `string` ]: `any` } }¶

IsoLanguageValue

¶

Interface

Properties
Language name, ex "English" or translatable string, ex "LANGUAGES.EN" name: `string`¶
Official ISO language code, ex "en" value: `string`¶

CopyrightDetails

¶

Interface

Properties
The company name to be displayed in the copyright notice (not to be translated). If empty (recommended), the company name from the theme will be used. company?: `string`¶
The year when the app was last updated. Must be left blank if it equals startYear lastUpdateYear?: `number`¶
The year when the app was first released. startYear: `number`¶

SI_COPYRIGHT_DETAILS `InjectionToken`<`CopyrightDetails`> = ...¶ Variable The injection token to be used when used globally across the app

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Link

¶

Interface

Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc. action?: (`string` \| (param: `any`) => `any`)¶
A boolean that lets the link know whether it is disabled or not. disabled?: `boolean`¶
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set. href?: `string`¶
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route. isActive?: `boolean`¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of `any` as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (`string` \| `any`[])¶
The navigation extras provide additional routing options when using the router link. navigationExtras?: `NavigationExtras`¶
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab. target?: `string`¶
The title of the menu item. Can be either the title to be displayed or the translation key. title?: `TranslatableString`¶
The optional tooltip of the link. Can be either the text to be displayed or the translation key. tooltip?: `TranslatableString`¶

LandingPageWarning

¶

Interface

Properties
content: `string`¶
title: `string`¶

Translatable ¶ import imported from @siemens/element-translate-ng

StatusType (`"success"` \| `"info"` \| `"warning"` \| `"danger"` \| `"caution"` \| `"critical"`)¶ Type alias

Except where otherwise noted, content on this site is licensed under MIT License.