@talenra/components documentation
  1. Components
  2. AppFrameComponent

File

app-layout/src/app-frame/app-frame.component.ts

Description

Provides the global app layout. Is typically placed at the root of your app's component tree.

Template slots

The template uses three template slots

  • [default] – Projects child elements of <talenra-app-frame> except for children using one of the following attributes. Typically the only element you want to be projected in the default template slot is <router-outlet>.

  • appHeader - The element with the appHeader attribute is projected in the slot in the upper-right corner of the app's header. This slot is typically used for buttons like "apps", "user-settings" etc. Expects a single element. Example: <div appHeader>

  • appHeaderDrawer - Elements with the appHeaderDrawer attribute are expected to be instances of <talenra-header-drawer> component and are projected in the global "App Header Drawer". Check the component's docs for details. Example: <talenra-header-drawer appHeaderDrawer […] >

Import

Example :
import { AppFrameComponent } from '@talenra/components/app-layout';

../../../#/welcome

Implements

OnInit

Metadata

host {
}
selector talenra-app-frame
imports AppHeaderComponent AppSidenavComponent AppFooterComponent AsyncPipe
styleUrls ./app-frame.component.scss
templateUrl ./app-frame.component.html

Index

Inputs
Outputs

Inputs

appDisplayName
Type : string
Default value : ''

Name of the app as displayed in the header. If the app name is associated with a logotype, this logotype is rendered and the display name is shortened accordingly (e.g. "Opus Fall-Manager" is rendered as "[Opus Logotype] Fall-Manager")

Example :
<talenra-app-frame appDisplayName="My App"></talenra-app-frame>
appEnv
Type : SupportedEnvironment
Default value : SupportedEnvironment.PROD

Code for the current environment (e.g. 'AIT', 'DEV', 'EDU', 'SIT', 'PROD'). Displayed in the app's footer.

Example :
<talenra-app-frame appEnv="DEV"></talenra-app-frame>
appLang
Type : string
Default value : ''

Code for the current language (e.g. 'de', 'fr', 'it'). Displayed in the app's footer.

Example :
<talenra-app-frame appLang="de"></talenra-app-frame>
appName
Type : string
Default value : ''

Name of the app (e.g. "SoHi"). Note that while most app names are displayed as plain text while other names might be represented as logotype (e.g. "talenra").

Example :
<talenra-app-frame appName="SoHi"></talenra-app-frame>
appVersion
Type : string
Default value : ''

Version of the app (e.g. 'AB123' or '1.2.3')

Example :
<talenra-app-frame appVersion="1.2.3"></talenra-app-frame>
headerless
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Renders the layout without the app's header. Note that this option is deprecated and support will be dropped.

Headerless mode is required by the apps listed below. It is deprecated on release and shall not be used by any other product.

  • KAMESA
  • SoHi

IMPORTANT: Support shall not be dropped without consulting the teams responsible for the apps listed above.

Example :
<talenra-app-frame headerless></talenra-app-frame>
issuerName
Type : string
Default value : ''

Name of the issuer of the app (e.g. "SVA Zürich")

Example :
<talenra-app-frame issuerName="SVA Zürich"></talenra-app-frame>
sidenavBottomItems
Type : SidenavItem[]
Default value : []

Items displayed in the footer section of the side-navigation. Typically used for things like settings.

Example :
<talenra-app-frame [sidenavBottomItems]="sidenavBottomItems"></talenra-app-frame>

see SidenavItem
sidenavItems
Type : SidenavItem[]
Default value : []

Items displayed in the main section of the side-navigation. Supports two-way binding.

Example :
<talenra-app-frame [(sidenavItems)]="sidenavItems"></talenra-app-frame>

see SidenavItem

Outputs

sidenavItemExpandedChange
Type : SidenavItem

Event emitted when a sidenavItem is toggled (property isExpanded has updated). The updated item is attached.

Example :
// Component class
sidenavItemExpandedChange(sidenavItem: SidenavItem): void => {
  console.log(sidenavItem);
}
Example :
<!-- Component template -->
<talenra-app-frame
  [...]
  [(sidenavItems)]="sidenavItems"
  (sidenavItemExpandedChange)="sidenavItemExpandedChange($event)"></talenra-app-frame>
sidenavItems
Type : SidenavItem[]

Items displayed in the main section of the side-navigation. Supports two-way binding.

Example :
<talenra-app-frame [(sidenavItems)]="sidenavItems"></talenra-app-frame>

see SidenavItem
sidenavItemsChange
Type : SidenavItem[]

Event emitted when value of sidenavItems changes.

Example :
// Component class
sidenavItemsChange(sidenavItems: SidenavItem[]): void => {
  console.log(sidenavItems);
}
Example :
<!-- Component template -->
<talenra-app-frame [...] [(sidenavItems)]="sidenavItems" (sidenavItemsChange)="sidenavItemsChange($event)"></talenra-app-frame>

results matching ""

    No results matching ""