Infineon Design System - Angular Module Example App

Accordion

Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

View Code

ifx-accordion-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-accordion-example',
  templateUrl: './ifx-accordion-example.html',
  styleUrl: './ifx-accordion-example.scss',
  standalone: false
})
export class IfxAccordionExample {
  protected handleClose(event: CustomEvent) {
    console.log('ifxClose:', event);
    // Add your handler logic here
  }

  protected handleOpen(event: CustomEvent) {
    console.log('ifxOpen:', event);
    // Add your handler logic here
  }
}

ifx-accordion-example.html

  <ifx-accordion [autoCollapse]="false">
    <ifx-accordion-item
      caption="Label"
      [open]="true"
      aria-level-number="3"
      (ifxClose)="handleClose($any($event))"
      (ifxOpen)="handleOpen($any($event))">Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
    <ifx-accordion-item
      caption="Label"
      [open]="false"
      aria-level-number="3">Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
    <ifx-accordion-item
      caption="Label"
      [open]="false"
      aria-level-number="3">Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
  </ifx-accordion>

Action List

View Code

ifx-action-list-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-action-list-example',
  templateUrl: './ifx-action-list-example.html',
  styleUrl: './ifx-action-list-example.scss',
  standalone: false
})
export class IfxActionListExample {
  protected handleActionListItemClick(event: CustomEvent) {
    console.log('ifxActionListItemClick:', event);
    // Add your handler logic here
  }

  protected handleConsoleError(event: CustomEvent) {
    console.log('consoleError:', event);
    // Add your handler logic here
  }
}

ifx-action-list-example.html

  <ifx-action-list list-aria-label="Navigation menu">
    <ifx-action-list-item
      item-title="Dashboard"
      description="View your main dashboard"
      value="dashboard"
      item-aria-label="Navigation item"
      (ifxActionListItemClick)="handleActionListItemClick($any($event))"
      (consoleError)="handleConsoleError($any($event))">
      <ifx-icon
        slot="trailing"
        icon="chevron-right-16"></ifx-icon>
    </ifx-action-list-item>
    <ifx-action-list-item
      item-title="Settings"
      value="settings"
      item-aria-label="Navigation item">
      <ifx-icon
        slot="trailing"
        icon="chevron-right-16"></ifx-icon>
    </ifx-action-list-item>
    <ifx-action-list-item
      item-title="Profile"
      description="Manage your profile information"
      value="profile"
      [disabled]="true"
      item-aria-label="Navigation item">
      <ifx-icon
        slot="trailing"
        icon="chevron-right-16"></ifx-icon>
    </ifx-action-list-item>
    <ifx-action-list-item
      item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality"
      description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics."
      value="analytics"
      item-aria-label="Navigation item">
      <ifx-icon
        slot="trailing"
        icon="chevron-right-16"></ifx-icon>
    </ifx-action-list-item>
  </ifx-action-list>

Alert

Attention! This is an alert message — check it out!

View Code

ifx-alert-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-alert-example',
  templateUrl: './ifx-alert-example.html',
  styleUrl: './ifx-alert-example.scss',
  standalone: false
})
export class IfxAlertExample {
  protected handleClose(event: CustomEvent) {
    console.log('ifxClose:', event);
    // Add your handler logic here
  }
}

ifx-alert-example.html

  <ifx-alert
    aria-live-text="assertive"
    variant="primary"
    icon="c-info-16"
    [closable]="true"
    (ifxClose)="handleClose($any($event))">Attention! This is an alert message — check it out!</ifx-alert>

AI Label

View Code

ifx-ai-label-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-ai-label-example',
  templateUrl: './ifx-ai-label-example.html',
  styleUrl: './ifx-ai-label-example.scss',
  standalone: false
})
export class IfxAiLabelExample {}

ifx-ai-label-example.html

  <ifx-ai-label
    [divider]="true"
    variant="label"></ifx-ai-label>

Button

View Code

ifx-button-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-button-example',
  templateUrl: './ifx-button-example.html',
  styleUrl: './ifx-button-example.scss',
  standalone: false
})
export class IfxButtonExample {}

ifx-button-example.html

  <ifx-button
    type="button"
    aria-label-text="Button"
    variant="primary"
    size="m"
    target="_blank"
    theme="default"
    [fullWidth]="false"
    [disabled]="false"
    href="false">Button</ifx-button>

Card

Overline

Headline

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

View Code

ifx-card-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-card-example',
  templateUrl: './ifx-card-example.html',
  styleUrl: './ifx-card-example.scss',
  standalone: false
})
export class IfxCardExample {
  protected handleImgPosition(event: CustomEvent) {
    console.log('imgPosition:', event);
    // Add your handler logic here
  }
}

ifx-card-example.html

  <ifx-card
    direction="vertical"
    target="_blank"
    aria-label-text="Card">
    <ifx-card-image
      position="right"
      src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
      alt="Coffee"
      slot="img"
      (imgPosition)="handleImgPosition($any($event))"></ifx-card-image>
    <ifx-card-overline (imgPosition)="handleImgPosition($any($event))">Overline</ifx-card-overline>
    <ifx-card-headline (imgPosition)="handleImgPosition($any($event))">Headline</ifx-card-headline>
    <ifx-card-text (imgPosition)="handleImgPosition($any($event))">Some quick example text to build on the card title and make up the bulk of the card's content.</ifx-card-text>
    <ifx-card-links
      slot="buttons"
      (imgPosition)="handleImgPosition($any($event))">
      <ifx-button variant="primary">Button</ifx-button>
      <ifx-button variant="secondary">Button</ifx-button>
    </ifx-card-links>
  </ifx-card>

Checkbox

Text

View Code

ifx-checkbox-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-checkbox-example',
  templateUrl: './ifx-checkbox-example.html',
  styleUrl: './ifx-checkbox-example.scss',
  standalone: false
})
export class IfxCheckboxExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleError(event: CustomEvent) {
    console.log('ifxError:', event);
    // Add your handler logic here
  }
}

ifx-checkbox-example.html

  <ifx-checkbox
    [error]="false"
    [disabled]="false"
    [checked]="false"
    size="s"
    [indeterminate]="false"
    name="checkbox"
    (ifxChange)="handleChange($any($event))"
    (ifxError)="handleError($any($event))">Text</ifx-checkbox>

Checkbox Group

Option 0

Option 1

Option 2

View Code

ifx-checkbox-group-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-checkbox-group-example',
  templateUrl: './ifx-checkbox-group-example.html',
  styleUrl: './ifx-checkbox-group-example.scss',
  standalone: false
})
export class IfxCheckboxGroupExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleError(event: CustomEvent) {
    console.log('ifxError:', event);
    // Add your handler logic here
  }
}

ifx-checkbox-group-example.html

  <ifx-checkbox-group
    alignment="vertical"
    group-label-text="Group Label"
    caption-text="Caption text, description, error notification"
    size="m"
    [showGroupLabel]="false"
    [showCaption]="false"
    [showCaptionIcon]="false"
    [required]="false">
    <ifx-checkbox
      value="0"
      size="m">Option 0</ifx-checkbox>
    <ifx-checkbox
      value="1"
      size="m">Option 1</ifx-checkbox>
    <ifx-checkbox
      value="2"
      size="m">Option 2</ifx-checkbox>
  </ifx-checkbox-group>

Chip

Item Label 1

Item Label 2

Item Label 3

Item Label 4

View Code

ifx-chip-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-chip-example',
  templateUrl: './ifx-chip-example.html',
  styleUrl: './ifx-chip-example.scss',
  standalone: false
})
export class IfxChipExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleChipItemSelect(event: CustomEvent) {
    console.log('ifxChipItemSelect:', event);
    // Add your handler logic here
  }
}

ifx-chip-example.html

  <ifx-chip
    placeholder="Label"
    size="medium"
    variant="single"
    theme="outlined"
    aria-label="Chip"
    [readOnly]="false"
    value="Item Value"
    [disabled]="false">
    <ifx-chip-item
      value="Item Value 1"
      (ifxChange)="handleChange($any($event))"
      (ifxChipItemSelect)="handleChipItemSelect($any($event))">Item Label 1</ifx-chip-item>
    <ifx-chip-item value="Item Value 2">Item Label 2</ifx-chip-item>
    <ifx-chip-item value="Item Value 3">Item Label 3</ifx-chip-item>
    <ifx-chip-item value="Item Value 4">Item Label 4</ifx-chip-item>
  </ifx-chip>

Content Switcher

View Code

ifx-content-switcher-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-content-switcher-example',
  templateUrl: './ifx-content-switcher-example.html',
  styleUrl: './ifx-content-switcher-example.scss',
  standalone: false
})
export class IfxContentSwitcherExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleConsoleError(event: CustomEvent) {
    console.log('consoleError:', event);
    // Add your handler logic here
  }
}

ifx-content-switcher-example.html

  <ifx-content-switcher>
    <ifx-content-switcher-item
      value="item 1"
      (ifxChange)="handleChange($any($event))"
      (consoleError)="handleConsoleError($any($event))">
      <ifx-icon icon="applications-16"></ifx-icon>
    </ifx-content-switcher-item>
    <ifx-content-switcher-item value="item 2">
      <ifx-icon icon="applications-16"></ifx-icon>
    </ifx-content-switcher-item>
    <ifx-content-switcher-item value="item 3">
      <ifx-icon icon="applications-16"></ifx-icon>
    </ifx-content-switcher-item>
    <ifx-content-switcher-item value="item 4">
      <ifx-icon icon="applications-16"></ifx-icon>
    </ifx-content-switcher-item>
  </ifx-content-switcher>

Date Picker

View Code

ifx-date-picker-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-date-picker-example',
  templateUrl: './ifx-date-picker-example.html',
  styleUrl: './ifx-date-picker-example.scss',
  standalone: false
})
export class IfxDatePickerExample {
  protected handleDate(event: CustomEvent) {
    console.log('ifxDate:', event);
    // Add your handler logic here
  }
}

ifx-date-picker-example.html

  <ifx-date-picker
    name="date-picker"
    [error]="false"
    [disabled]="false"
    size="s"
    [success]="false"
    label="Label Text"
    caption="Caption text, description, error notification."
    aria-label-text="Date Picker"
    [required]="false"
    autocomplete="on"
    type="date"
    (ifxDate)="handleDate($any($event))"></ifx-date-picker>

Dropdown

Menu Item

View Code

ifx-dropdown-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-dropdown-example',
  templateUrl: './ifx-dropdown-example.html',
  styleUrl: './ifx-dropdown-example.scss',
  standalone: false
})
export class IfxDropdownExample {
  protected handleClose(event: CustomEvent) {
    console.log('ifxClose:', event);
    // Add your handler logic here
  }

  protected handleDropdown(event: CustomEvent) {
    console.log('ifxDropdown:', event);
    // Add your handler logic here
  }

  protected handleOpen(event: CustomEvent) {
    console.log('ifxOpen:', event);
    // Add your handler logic here
  }

  protected handleDropdownMenuItem(event: CustomEvent) {
    console.log('ifxDropdownMenuItem:', event);
    // Add your handler logic here
  }

  protected handleMenuSize(event: CustomEvent) {
    console.log('menuSize:', event);
    // Add your handler logic here
  }

  protected handleDropdownItem(event: CustomEvent) {
    console.log('ifxDropdownItem:', event);
    // Add your handler logic here
  }
}

ifx-dropdown-example.html

  <ifx-dropdown
    placement="bottom-start"
    [defaultOpen]="false"
    [noCloseOnOutsideClick]="false"
    [noCloseOnMenuClick]="false"
    [noAppendToBody]="false"
    [disabled]="false">
    <ifx-dropdown-trigger-button
      variant="primary"
      (ifxClose)="handleClose($any($event))"
      (ifxDropdown)="handleDropdown($any($event))"
      (ifxOpen)="handleOpen($any($event))"
      (ifxDropdownMenuItem)="handleDropdownMenuItem($any($event))"
      (menuSize)="handleMenuSize($any($event))"
      (ifxDropdownItem)="handleDropdownItem($any($event))">Dropdown</ifx-dropdown-trigger-button>
    <ifx-dropdown-menu
      size="m"
      (ifxClose)="handleClose($any($event))"
      (ifxDropdown)="handleDropdown($any($event))"
      (ifxOpen)="handleOpen($any($event))"
      (ifxDropdownMenuItem)="handleDropdownMenuItem($any($event))"
      (menuSize)="handleMenuSize($any($event))"
      (ifxDropdownItem)="handleDropdownItem($any($event))">
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        [error]="false"
        (ifxClose)="handleClose($any($event))"
        (ifxDropdown)="handleDropdown($any($event))"
        (ifxOpen)="handleOpen($any($event))"
        (ifxDropdownMenuItem)="handleDropdownMenuItem($any($event))"
        (menuSize)="handleMenuSize($any($event))"
        (ifxDropdownItem)="handleDropdownItem($any($event))">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        [error]="false">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        [error]="false">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        [error]="false">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        [error]="false">Menu Item</ifx-dropdown-item>
    </ifx-dropdown-menu>
  </ifx-dropdown>

Footer - Medium

Terms

Imprint

Glossary

View Code

ifx-footer-example-medium.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-footer-example-medium',
  templateUrl: './ifx-footer-example-medium.html',
  styleUrl: './ifx-footer-example-medium.scss',
  standalone: false
})
export class IfxFooterMediumExample {
  protected handleConsoleError(event: CustomEvent) {
    console.log('consoleError:', event);
    // Add your handler logic here
  }
}

ifx-footer-example-medium.html

  <ifx-footer copyright-text="© 1999 - 2026 Infineon Technologies AG">
    <div
      slot="socials"
      (consoleError)="handleConsoleError($any($event))">
      <ifx-link
        variant="title"
        href="http://facebook.com/infineon"
        aria-label="Follow us on Facebook"
        (consoleError)="handleConsoleError($any($event))">
        <ifx-icon icon="facebook"></ifx-icon>
      </ifx-link>
      <ifx-link
        variant="title"
        href="http://youtube.com/infineon"
        aria-label="Follow us on Youtube">
        <ifx-icon icon="youtube"></ifx-icon>
      </ifx-link>
      <ifx-link
        variant="title"
        href="http://instagram.com/infineon"
        aria-label="Follow us on Instagram">
        <ifx-icon icon="instagram"></ifx-icon>
      </ifx-link>
      <ifx-link
        variant="title"
        href="http://linkedin.com/infineon"
        aria-label="Follow us on LinkedIn">
        <ifx-icon icon="linkedin"></ifx-icon>
      </ifx-link>
      <ifx-link
        variant="title"
        href="http://xing.com/infineon"
        aria-label="Follow us on Xing">
        <ifx-icon icon="xing"></ifx-icon>
      </ifx-link>
    </div>
    <div slot="info">
      <ifx-link
        variant="menu"
        href="https://yourwebsite.com/terms"
        target="_blank">Terms</ifx-link>
      <ifx-link
        variant="menu"
        href="https://yourwebsite.com/imprint"
        target="_blank">Imprint</ifx-link>
      <ifx-link
        variant="menu"
        href="https://yourwebsite.com/privacy-policy"
        target="_blank">Privacy policy</ifx-link>
      <ifx-link
        variant="menu"
        href="https://yourwebsite.com/glossary"
        target="_blank">Glossary</ifx-link>
    </div>
  </ifx-footer>

Icon Button

View Code

ifx-icon-button-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-icon-button-example',
  templateUrl: './ifx-icon-button-example.html',
  styleUrl: './ifx-icon-button-example.scss',
  standalone: false
})
export class IfxIconButtonExample {}

ifx-icon-button-example.html

  <ifx-icon-button
    shape="round"
    variant="primary"
    icon="c-info-16"
    target="_blank"
    size="m"
    aria-label-text="Icon Button"
    [disabled]="false"></ifx-icon-button>

Indicator

View Code

ifx-indicator-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-indicator-example',
  templateUrl: './ifx-indicator-example.html',
  styleUrl: './ifx-indicator-example.scss',
  standalone: false
})
export class IfxIndicatorExample {}

ifx-indicator-example.html

  <ifx-indicator
    variant="number"
    number="1"
    [inverted]="false"></ifx-indicator>

Link

View Code

ifx-link-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-link-example',
  templateUrl: './ifx-link-example.html',
  styleUrl: './ifx-link-example.scss',
  standalone: false
})
export class IfxLinkExample {}

ifx-link-example.html

  <ifx-link
    aria-label="Link"
    target="_blank"
    size="m"
    variant="bold"
    [disabled]="false">Link</ifx-link>

Navigation/Navbar

Link Layer 3 Nested Item 1

Layer 3 Nested Item 2

Layer 3 Nested Item 3

Layer 3 Nested Item 4

Layer 2 Nested Item 3

Layer 2 Nested Item 4

Layer 2 Nested Item 5

Layer 2 Item 1

Layer 2 Item 2

Layer 2 Item 3

Nested Item 3

Nested Item 4

Menu Item

Item1

Item2

View Code

ifx-navbar-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-navbar-example',
  templateUrl: './ifx-navbar-example.html',
  styleUrl: './ifx-navbar-example.scss',
  standalone: false
})
export class IfxNavbarExample {
  protected handleNavbarMobileMenuIsOpen(event: CustomEvent) {
    console.log('ifxNavbarMobileMenuIsOpen:', event);
    // Add your handler logic here
  }

  protected handleNavItem(event: CustomEvent) {
    console.log('ifxNavItem:', event);
    // Add your handler logic here
  }

  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', event);
    // Add your handler logic here
  }

  protected handleOpen(event: CustomEvent) {
    console.log('ifxOpen:', event);
    // Add your handler logic here
  }
}

ifx-navbar-example.html

  <ifx-navbar
    [showLogoAndAppname]="true"
    application-name="Application name"
    [fixed]="false"
    logo-href="http://google.com"
    logo-href-target="_self">
    <ifx-navbar-item
      slot="left-item"
      target="_self"
      [hideOnMobile]="true"
      (ifxNavbarMobileMenuIsOpen)="handleNavbarMobileMenuIsOpen($any($event))"
      (ifxNavItem)="handleNavItem($any($event))"
      (ifxInput)="handleInput($any($event))"
      (ifxOpen)="handleOpen($any($event))">
      <ifx-navbar-item>
        <ifx-navbar-item>
          <ifx-navbar-item
            href="http://google.com"
            target="_blank">Link Layer 3 Nested Item 1</ifx-navbar-item>
          <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>
          <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>
          <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item>Layer 2 Nested Item 3</ifx-navbar-item>
        <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>
        <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>
      </ifx-navbar-item>
      <ifx-navbar-item>
        <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>
        <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>
        <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>
      </ifx-navbar-item>
      <ifx-navbar-item>Nested Item 3</ifx-navbar-item>
      <ifx-navbar-item>
        <ifx-navbar-item>Nested Item 4</ifx-navbar-item>
      </ifx-navbar-item>
    </ifx-navbar-item>
    <ifx-navbar-item
      target="_self"
      slot="left-item"
      [showLabel]="true">Menu Item</ifx-navbar-item>
    <ifx-navbar-item slot="left-item">
      <ifx-navbar-item>Item1</ifx-navbar-item>
      <ifx-navbar-item>Item2</ifx-navbar-item>
    </ifx-navbar-item>
    <ifx-search-bar
      slot="search-bar-left"
      [isOpen]="false"></ifx-search-bar>
    <ifx-navbar-item
      slot="right-item"
      target="_blank"
      href="http://google.com"
      [hideOnMobile]="true"
      [showLabel]="false"
      icon="image-16"></ifx-navbar-item>
    <ifx-navbar-item
      [dotIndicator]="false"
      slot="right-item"
      [hideOnMobile]="true"
      [showLabel]="false"
      icon="image-16"></ifx-navbar-item>
    <ifx-navbar-profile
      slot="right-item"
      [showLabel]="true"
      target="_self"
      alt="profile image"
      (ifxNavbarMobileMenuIsOpen)="handleNavbarMobileMenuIsOpen($any($event))"
      (ifxNavItem)="handleNavItem($any($event))"
      (ifxInput)="handleInput($any($event))"
      (ifxOpen)="handleOpen($any($event))"></ifx-navbar-profile>
  </ifx-navbar>

Navigation/Sidebar

Menu Items

Menu Item

Sub menu item

Menu Item

Items group

Item 1

Item 2

View Code

ifx-sidebar-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-sidebar-example',
  templateUrl: './ifx-sidebar-example.html',
  styleUrl: './ifx-sidebar-example.scss',
  standalone: false
})
export class IfxSidebarExample {
  protected handleSidebarCollapseChange(event: CustomEvent) {
    console.log('ifxSidebarCollapseChange:', event);
    // Add your handler logic here
  }

  protected handleSidebarLogoClick(event: CustomEvent) {
    console.log('ifxSidebarLogoClick:', event);
    // Add your handler logic here
  }

  protected handleSidebarActionItem(event: CustomEvent) {
    console.log('ifxSidebarActionItem:', event);
    // Add your handler logic here
  }

  protected handleSidebarMenu(event: CustomEvent) {
    console.log('ifxSidebarMenu:', event);
    // Add your handler logic here
  }

  protected handleSidebarNavigationItem(event: CustomEvent) {
    console.log('ifxSidebarNavigationItem:', event);
    // Add your handler logic here
  }
}

ifx-sidebar-example.html

  <ifx-sidebar
    application-name="Application Name"
    [collapsible]="false"
    [collapsed]="false"
    [showHeader]="true"
    [showFooter]="true"
    [initialCollapse]="true"
    terms-of-use="https://yourwebsite.com/terms"
    imprint="https://yourwebsite.com/imprint"
    privacy-policy="https://yourwebsite.com/privacy-policy"
    copyright-text="© 1999 - 2026 Infineon Technologies AG"
    position="left"
    hide-menu-label="Hide Menu">
    <ifx-sidebar-title
      (ifxSidebarCollapseChange)="handleSidebarCollapseChange($any($event))"
      (ifxSidebarLogoClick)="handleSidebarLogoClick($any($event))"
      (ifxSidebarActionItem)="handleSidebarActionItem($any($event))"
      (ifxSidebarMenu)="handleSidebarMenu($any($event))"
      (ifxSidebarNavigationItem)="handleSidebarNavigationItem($any($event))">Menu Items</ifx-sidebar-title>
    <ifx-sidebar-item
      href="https://google.com"
      target="_blank"
      icon="image-16"
      (ifxSidebarCollapseChange)="handleSidebarCollapseChange($any($event))"
      (ifxSidebarLogoClick)="handleSidebarLogoClick($any($event))"
      (ifxSidebarActionItem)="handleSidebarActionItem($any($event))"
      (ifxSidebarMenu)="handleSidebarMenu($any($event))"
      (ifxSidebarNavigationItem)="handleSidebarNavigationItem($any($event))">Menu Item</ifx-sidebar-item>
    <ifx-sidebar-item
      href="https://google.com"
      target="_blank"
      icon="image-16">Menu Item</ifx-sidebar-item>
    <ifx-sidebar-item
      href="https://google.com"
      target="_blank"
      icon="image-16">Menu Item</ifx-sidebar-item>
    <ifx-sidebar-item
      href="https://google.com"
      target="_blank"
      icon="image-16">Menu Item</ifx-sidebar-item>
    <ifx-sidebar-item>
      <ifx-sidebar-item
        href="https://google.com"
        target="_blank"
        icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item icon="image-16">
        <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
        <ifx-sidebar-item [active]="true">Sub menu item</ifx-sidebar-item>
        <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
      </ifx-sidebar-item>
      <ifx-sidebar-item
        href="https://google.com"
        target="_blank">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item
        href="https://google.com"
        target="_blank">Menu Item</ifx-sidebar-item>
    </ifx-sidebar-item>
    <ifx-sidebar-title>Items group</ifx-sidebar-title>
    <ifx-sidebar-item
      href="https://google.com"
      target="_self"
      icon="image-16"
      isactionitem="false"
      [active]="false">Item 1</ifx-sidebar-item>
    <ifx-sidebar-item
      href="https://google.com"
      target="_blank"
      icon="image-16">Item 2</ifx-sidebar-item>
  </ifx-sidebar>

Notification

Sample Notification

View Code

ifx-notification-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-notification-example',
  templateUrl: './ifx-notification-example.html',
  styleUrl: './ifx-notification-example.scss',
  standalone: false
})
export class IfxNotificationExample {}

ifx-notification-example.html

  <ifx-notification
    icon="c-check-16"
    variant="success"
    link-text="Link"
    link-href="https://www.example.com"
    link-target="_blank">Sample Notification</ifx-notification>

Pagination

View Code

ifx-pagination-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-pagination-example',
  templateUrl: './ifx-pagination-example.html',
  styleUrl: './ifx-pagination-example.scss',
  standalone: false
})
export class IfxPaginationExample {
  protected handleItemsPerPageChange(event: CustomEvent) {
    console.log('ifxItemsPerPageChange:', event);
    // Add your handler logic here
  }

  protected handlePageChange(event: CustomEvent) {
    console.log('ifxPageChange:', event);
    // Add your handler logic here
  }
}

ifx-pagination-example.html

  <ifx-pagination
    total="50"
    current-page="1"
    [showItemsPerPage]="true"
    items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]'
    items-per-page-label="Result per Pages"
    (ifxItemsPerPageChange)="handleItemsPerPageChange($any($event))"
    (ifxPageChange)="handlePageChange($any($event))"></ifx-pagination>

Progress Bar

View Code

ifx-progress-bar-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-progress-bar-example',
  templateUrl: './ifx-progress-bar-example.html',
  styleUrl: './ifx-progress-bar-example.scss',
  standalone: false
})
export class IfxProgressBarExample {}

ifx-progress-bar-example.html

  <ifx-progress-bar
    value="50"
    size="m"
    [showLabel]="false"></ifx-progress-bar>

Radio Button

Text

View Code

ifx-radio-button-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-radio-button-example',
  templateUrl: './ifx-radio-button-example.html',
  styleUrl: './ifx-radio-button-example.scss',
  standalone: false
})
export class IfxRadioButtonExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleError(event: CustomEvent) {
    console.log('ifxError:', event);
    // Add your handler logic here
  }
}

ifx-radio-button-example.html

  <ifx-radio-button
    size="s"
    name="radio-button"
    value="radio"
    [error]="false"
    [disabled]="false"
    [checked]="false"
    (ifxChange)="handleChange($any($event))"
    (ifxError)="handleError($any($event))">Text</ifx-radio-button>

Radio Button Group

Option 0

Option 1

Option 2

View Code

ifx-radio-button-group-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-radio-button-group-example',
  templateUrl: './ifx-radio-button-group-example.html',
  styleUrl: './ifx-radio-button-group-example.scss',
  standalone: false
})
export class IfxRadioButtonGroupExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleError(event: CustomEvent) {
    console.log('ifxError:', event);
    // Add your handler logic here
  }
}

ifx-radio-button-group-example.html

  <ifx-radio-button-group
    alignment="vertical"
    group-label-text="Group Label"
    caption-text="Caption text, description, error notification"
    size="m"
    [showGroupLabel]="false"
    [showCaption]="false"
    [showCaptionIcon]="false"
    [required]="false">
    <ifx-radio-button
      value="0"
      size="m">Option 0</ifx-radio-button>
    <ifx-radio-button
      value="1"
      size="m">Option 1</ifx-radio-button>
    <ifx-radio-button
      value="2"
      size="m">Option 2</ifx-radio-button>
  </ifx-radio-button-group>

Search Bar

View Code

ifx-search-bar-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-search-bar-example',
  templateUrl: './ifx-search-bar-example.html',
  styleUrl: './ifx-search-bar-example.scss',
  standalone: false
})
export class IfxSearchBarExample {
  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', event);
    // Add your handler logic here
  }

  protected handleOpen(event: CustomEvent) {
    console.log('ifxOpen:', event);
    // Add your handler logic here
  }
}

ifx-search-bar-example.html

  <ifx-search-bar
    [isOpen]="true"
    [disabled]="false"
    autocomplete="on"
    (ifxInput)="handleInput($any($event))"
    (ifxOpen)="handleOpen($any($event))"></ifx-search-bar>

Search Field

View Code

ifx-search-field-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-search-field-example',
  templateUrl: './ifx-search-field-example.html',
  styleUrl: './ifx-search-field-example.scss',
  standalone: false
})
export class IfxSearchFieldExample {
  protected handleBlur(event: CustomEvent) {
    console.log('ifxBlur:', event);
    // Add your handler logic here
  }

  protected handleFocus(event: CustomEvent) {
    console.log('ifxFocus:', event);
    // Add your handler logic here
  }

  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', event);
    // Add your handler logic here
  }

  protected handleSuggestionRequested(event: CustomEvent) {
    console.log('ifxSuggestionRequested:', event);
    // Add your handler logic here
  }

  protected handleSuggestionSelected(event: CustomEvent) {
    console.log('ifxSuggestionSelected:', event);
    // Add your handler logic here
  }
}

ifx-search-field-example.html

  <ifx-search-field
    size="m"
    [showDeleteIcon]="true"
    [showSuggestions]="false"
    [enableHistory]="true"
    max-suggestions="10"
    max-history-items="5"
    history-key="ifx-search-history"
    history-header-text="Recent Searches"
    autocomplete="on"
    placeholder="Search..."
    aria-label-text="Search field"
    delete-icon-aria-label="Clear search"
    history-delete-aria-label="Remove from history"
    dropdown-aria-label="Search suggestions and history"
    suggestion-aria-label="Search suggestion"
    history-item-aria-label="Search history item"
    [disabled]="false"
    (ifxBlur)="handleBlur($any($event))"
    (ifxFocus)="handleFocus($any($event))"
    (ifxInput)="handleInput($any($event))"
    (ifxSuggestionRequested)="handleSuggestionRequested($any($event))"
    (ifxSuggestionSelected)="handleSuggestionSelected($any($event))"></ifx-search-field>

Segmented Control

View Code

ifx-segmented-control-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-segmented-control-example',
  templateUrl: './ifx-segmented-control-example.html',
  styleUrl: './ifx-segmented-control-example.scss',
  standalone: false
})
export class IfxSegmentedControlExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleSegmentSelect(event: CustomEvent) {
    console.log('segmentSelect:', event);
    // Add your handler logic here
  }
}

ifx-segmented-control-example.html

  <ifx-segmented-control
    caption="Caption text to describe the controls"
    label="Group Label"
    size="regular"
    [error]="false"
    [required]="false">
    <ifx-segment
      value="Value1"
      icon="star-16"></ifx-segment>
    <ifx-segment
      value="Value2"
      icon="star-16"></ifx-segment>
    <ifx-segment
      value="Value3"
      icon="star-16"></ifx-segment>
    <ifx-segment
      value="Value4"
      icon="star-16"></ifx-segment>
    <ifx-segment
      value="Value5"
      icon="star-16"></ifx-segment>
  </ifx-segmented-control>

Select/Single Select

View Code

ifx-select-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-select-example',
  templateUrl: './ifx-select-example.html',
  styleUrl: './ifx-select-example.scss',
  standalone: false
})
export class IfxSelectExample {
  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', event);
    // Add your handler logic here
  }

  protected handleSelect(event: CustomEvent) {
    console.log('ifxSelect:', event);
    // Add your handler logic here
  }
}

ifx-select-example.html

  <ifx-select
    size="m"
    placeholder="true"
    [showClearButton]="true"
    [showSearch]="true"
    search-placeholder-value="Search..."
    [required]="true"
    placeholder-value="Placeholder"
    options='[{"value":"a","label":"option a","selected":false},{"value":"b","label":"option b","selected":false},{"value":"c","label":"option c","selected":false}]'
    [error]="false"
    [disabled]="false"
    (ifxInput)="handleInput($any($event))"
    (ifxSelect)="handleSelect($any($event))"></ifx-select>

Spinner

View Code

ifx-spinner-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-spinner-example',
  templateUrl: './ifx-spinner-example.html',
  styleUrl: './ifx-spinner-example.scss',
  standalone: false
})
export class IfxSpinnerExample {}

ifx-spinner-example.html

  <ifx-spinner
    variant="default"
    size="m"
    [inverted]="false"></ifx-spinner>

Status

View Code

ifx-status-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-status-example',
  templateUrl: './ifx-status-example.html',
  styleUrl: './ifx-status-example.scss',
  standalone: false
})
export class IfxStatusExample {}

ifx-status-example.html

  <ifx-status
    label="text"
    color="orange-500"
    [border]="true"></ifx-status>

Stepper

Step Label 1

Step Label 2

Step Label 3

Step Label 4

Step Label 5

View Code

ifx-stepper-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-stepper-example',
  templateUrl: './ifx-stepper-example.html',
  styleUrl: './ifx-stepper-example.scss',
  standalone: false
})
export class IfxStepperExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }
}

ifx-stepper-example.html

  <ifx-stepper
    active-step="2"
    [showStepNumber]="false"
    variant="default"
    indicator-position="left">
    <ifx-step>Step Label 1</ifx-step>
    <ifx-step>Step Label 2</ifx-step>
    <ifx-step>Step Label 3</ifx-step>
    <ifx-step>Step Label 4</ifx-step>
    <ifx-step>Step Label 5</ifx-step>
  </ifx-stepper>

Stepper - Compact

Step Label 1

Step Label 2

Step Label 3

Step Label 4

Step Label 5

View Code

ifx-stepper-example-compact.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-stepper-example-compact',
  templateUrl: './ifx-stepper-example-compact.html',
  styleUrl: './ifx-stepper-example-compact.scss',
  standalone: false
})
export class IfxStepperCompactExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }
}

ifx-stepper-example-compact.html

  <ifx-stepper
    active-step="2"
    indicator-position="left"
    variant="compact"
    [showStepNumber]="false">
    <ifx-step>Step Label 1</ifx-step>
    <ifx-step>Step Label 2</ifx-step>
    <ifx-step>Step Label 3</ifx-step>
    <ifx-step>Step Label 4</ifx-step>
    <ifx-step>Step Label 5</ifx-step>
  </ifx-stepper>

Switch

View Code

ifx-switch-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-switch-example',
  templateUrl: './ifx-switch-example.html',
  styleUrl: './ifx-switch-example.scss',
  standalone: false
})
export class IfxSwitchExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }
}

ifx-switch-example.html

  <ifx-switch
    name="switch"
    value="on"
    [checked]="false"
    [disabled]="false"
    (ifxChange)="handleChange($any($event))">Switch</ifx-switch>

Table (basic)

View Code

ifx-basic-table-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-basic-table-example',
  templateUrl: './ifx-basic-table-example.html',
  styleUrl: './ifx-basic-table-example.scss',
  standalone: false
})
export class IfxBasicTableExample {}

ifx-basic-table-example.html

  <ifx-basic-table
    cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]'
    rows='[{"id":1,"item":"Item 1","price":356,"date":"2025-05-11"},{"id":2,"item":"Item 2","price":55,"date":"2025-03-26"},{"id":3,"item":"Item 3","price":24},{"id":4,"item":"Item 4","price":874,"date":"2025-04-30"},{"id":5,"item":"Item 5","price":689,"date":"2025-09-14"},{"id":6,"item":"Item 6","price":46},{"id":7,"item":"Item 7","price":421,"date":"2026-07-25"},{"id":8,"item":"Item 8","price":17,"date":"2026-06-28"},{"id":9,"item":"Item 9","price":752},{"id":10,"item":"Item 10","price":73,"date":"2026-01-27"},{"id":11,"item":"Item 11","price":94,"date":"2026-10-31"},{"id":12,"item":"Item 12","price":846}]'
    table-height="auto"
    row-height="default"
    variant="default"></ifx-basic-table>

Table (advanced) - DefaultState

View Code

ifx-table-example-defaultstate.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-table-example-defaultstate',
  templateUrl: './ifx-table-example-defaultstate.html',
  styleUrl: './ifx-table-example-defaultstate.scss',
  standalone: false
})
export class IfxTableDefaultStateExample {
  protected handleSortChange(event: CustomEvent) {
    console.log('ifxSortChange:', event);
    // Add your handler logic here
  }
}

ifx-table-example-defaultstate.html

  <ifx-table
    row-height="default"
    cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]'
    rows='[{"id":"1","item":"Item 1","price":356,"date":"2025-06-25"},{"id":"2","item":"Item 2","price":55,"date":"2025-03-26"},{"id":"3","item":"Item 3","price":24},{"id":"4","item":"x","price":874},{"id":"5","item":"x","price":689},{"id":"6","item":"x","price":46},{"id":"7","item":"Item 7","price":421},{"id":"8","item":"Item 8","price":17},{"id":"9","item":"x","price":752},{"id":"10","item":"Item 10","price":73},{"id":"11","item":"x","price":94}]'
    table-height="auto"
    pagination-items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]'
    filter-orientation="none"
    variant="default"
    fit-column="false"
    column-min-width="200"
    column-width="100"
    headline="Matching results"
    headline-number="0"
    [pagination]="false"
    [serverSidePagination]="false"
    [showLoading]="false"
    [enableSelection]="false"
    [fitColumns]="false"
    (ifxSortChange)="handleSortChange($any($event))"></ifx-table>

Tabs

Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Tab #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Content for Tab #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

View Code

ifx-tabs-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-tabs-example',
  templateUrl: './ifx-tabs-example.html',
  styleUrl: './ifx-tabs-example.scss',
  standalone: false
})
export class IfxTabsExample {
  protected handleChange(event: CustomEvent) {
    console.log('ifxChange:', event);
    // Add your handler logic here
  }

  protected handleTabHeaderChange(event: CustomEvent) {
    console.log('tabHeaderChange:', event);
    // Add your handler logic here
  }
}

ifx-tabs-example.html

  <ifx-tabs
    orientation="horizontal"
    active-tab-index="0"
    [fullWidth]="false"
    [positionSticky]="false"
    number="0">
    <ifx-tab
      header="Tab 1"
      icon-position="left"
      number="0">Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
    <ifx-tab
      header="Tab 2"
      [disabled]="false"
      icon-position="left"
      number="0">Content for Tab #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
    <ifx-tab
      header="Tab 3"
      icon-position="left"
      number="0">Content for Tab #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
  </ifx-tabs>

Text Field

View Code

ifx-text-field-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-text-field-example',
  templateUrl: './ifx-text-field-example.html',
  styleUrl: './ifx-text-field-example.scss',
  standalone: false
})
export class IfxTextFieldExample {
  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', event);
    // Add your handler logic here
  }
}

ifx-text-field-example.html

  <ifx-text-field
    [error]="false"
    size="m"
    [success]="false"
    placeholder="Placeholder"
    [readOnly]="false"
    caption="Caption"
    label="Label"
    [required]="true"
    name="text-field"
    [showDeleteIcon]="false"
    autocomplete="on"
    type="text"
    internal-id="text-field"
    aria-label="text field for user input"
    [disabled]="false"
    (ifxInput)="handleInput($any($event))"></ifx-text-field>

Textarea

View Code

ifx-textarea-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-textarea-example',
  templateUrl: './ifx-textarea-example.html',
  styleUrl: './ifx-textarea-example.scss',
  standalone: false
})
export class IfxTextareaExample {
  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', event);
    // Add your handler logic here
  }
}

ifx-textarea-example.html

  <ifx-textarea
    caption="Caption text, description, error notification"
    cols="43"
    [error]="false"
    label="Label Text"
    name="textarea"
    placeholder="Placeholder"
    [required]="true"
    [readOnly]="false"
    resize="both"
    rows="5"
    wrap="soft"
    full-width="false"
    [disabled]="false"
    (ifxInput)="handleInput($any($event))"></ifx-textarea>

Tooltip

I'm the tooltip reference element - Please hover me

View Code

ifx-tooltip-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ifx-tooltip-example',
  templateUrl: './ifx-tooltip-example.html',
  styleUrl: './ifx-tooltip-example.scss',
  standalone: false
})
export class IfxTooltipExample {}

ifx-tooltip-example.html

  <ifx-tooltip
    text="Hi, I'm a tooltip"
    variant="compact"
    position="auto"
    icon="c-info-16"
    aria-label-text="Tooltip with important information"
    header="Tooltip headline">I'm the tooltip reference element - Please hover me</ifx-tooltip>

Modal

This example demonstrates the classic Angular NgModule pattern with primitive values and two-way binding using [(ngModel)].

Modal content

Cancel

Open Modal

View Code

modal-example.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-modal-example',
  standalone: false,
  templateUrl: './modal-example.html',
  styleUrl: './modal-example.scss'
})
export class ModalExample {
  opened = false;

  openModal() {
    this.opened = true;
  }

  protected handleOpen(event: any) {
    console.log('ifxOpen:', event.detail);
  }

  protected handleClose(event: any) {
    console.log('ifxClose:', event.detail);
  }
}

modal-example.html


  <ifx-modal
    caption="Modal Title"
    [captionAriaLabel]="'Additional information for caption'"
    [closeButtonAriaLabel]="'Close modal'"
    variant="default"
    [closeOnOverlayClick]="false"
    [showCloseButton]="true"
    size="s"
    [(ngModel)]="opened"
    (ifxOpen)="handleOpen($event)"
    (ifxClose)="handleClose($event)">
    
      Modal content
    
    
      Cancel
      OK
    
  

  Open Modal