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 handleOpen(event: CustomEvent) {
    console.log('ifxOpen:', event);
    // Add your handler logic here
  }

  protected handleClose(event: CustomEvent) {
    console.log('ifxClose:', 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"
      mutable="true"
      icon="true"
      (ifxOpen)="handleOpen($any($event))"
      (ifxClose)="handleClose($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"
      mutable="true"
      icon="true">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"
      mutable="true"
      icon="true">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
  }
}

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))">
      <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="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="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 {}

ifx-card-example.html

  <ifx-card
    direction="vertical"
    href="true"
    target="_blank"
    aria-label="Card">
    <ifx-card-image
      position="right"
      src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
      alt="Coffee"
      slot="img"></ifx-card-image>
    <ifx-card-overline>Overline</ifx-card-overline>
    <ifx-card-headline>Headline</ifx-card-headline>
    <ifx-card-text>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">
      <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"
    [readOnly]="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 handleSetGroupError(event: CustomEvent) {
    console.log('setGroupError:', 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
  }
}

ifx-chip-example.html

  <ifx-chip
    placeholder="Label"
    size="medium"
    variant="single"
    theme="outlined"
    icon="true"
    [readOnly]="false"
    aria-label="Chip"
    [disabled]="false"
    value="Item Value">
    <ifx-chip-item
      value="Item Value 1"
      (ifxChange)="handleChange($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
  }
}

ifx-content-switcher-example.html

  <ifx-content-switcher>
    <ifx-content-switcher-item
      value="item 1"
      (ifxChange)="handleChange($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"
    [readOnly]="false"
    size="s"
    [success]="false"
    value="true"
    max="true"
    min="true"
    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 handleOpen(event: CustomEvent) {
    console.log('ifxOpen:', event);
    // Add your handler logic here
  }

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

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

ifx-dropdown-example.html

  <ifx-dropdown
    placement="bottom-start"
    [disabled]="false"
    [defaultOpen]="false"
    [noCloseOnOutsideClick]="false"
    [noCloseOnMenuClick]="false"
    [noAppendToBody]="false">
    <ifx-dropdown-trigger-button
      variant="primary"
      (ifxOpen)="handleOpen($any($event))"
      (ifxClose)="handleClose($any($event))"
      (ifxDropdownMenuItem)="handleDropdownMenuItem($any($event))">Dropdown</ifx-dropdown-trigger-button>
    <ifx-dropdown-menu
      size="m"
      (ifxOpen)="handleOpen($any($event))"
      (ifxClose)="handleClose($any($event))"
      (ifxDropdownMenuItem)="handleDropdownMenuItem($any($event))">
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        href="true"
        [error]="false"
        (ifxOpen)="handleOpen($any($event))"
        (ifxClose)="handleClose($any($event))"
        (ifxDropdownMenuItem)="handleDropdownMenuItem($any($event))">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        href="true"
        [error]="false">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        href="true"
        [error]="false">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        href="true"
        [error]="false">Menu Item</ifx-dropdown-item>
      <ifx-dropdown-item
        icon="c-info-16"
        target="_self"
        href="true"
        [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 {}

ifx-footer-example-medium.html

  <ifx-footer copyright-text="© 1999 - 2026 Infineon Technologies AG">
    <div slot="socials">
      <ifx-link
        variant="title"
        href="http://facebook.com/infineon"
        aria-label="Follow us on Facebook">
        <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"
    href="true"
    target="_blank"
    size="m"
    aria-label="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
    href="true"
    aria-label="Link"
    target="_blank"
    size="m"
    variant="bold"
    download="true"
    [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 {}

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
      icon="true"
      slot="left-item"
      target="_self"
      href="true"
      [hideOnMobile]="true">
      <ifx-navbar-item icon="true">
        <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
      href="true"
      target="_self"
      slot="left-item"
      icon="true"
      show-label="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"></ifx-search-bar>
    <ifx-navbar-item
      number-indicator="true"
      slot="right-item"
      target="_blank"
      href="http://google.com"
      [hideOnMobile]="true"
      show-label="false"
      icon="image-16"></ifx-navbar-item>
    <ifx-navbar-item
      [dotIndicator]="false"
      slot="right-item"
      [hideOnMobile]="true"
      show-label="false"
      icon="image-16"></ifx-navbar-item>
    <ifx-navbar-profile
      user-name="true"
      slot="right-item"
      image-url="true"
      show-label="true"
      href="true"
      target="_self"
      alt="profile image"></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 handleSidebarNavigationItem(event: CustomEvent) {
    console.log('ifxSidebarNavigationItem:', 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 handleSidebarCollapseChange(event: CustomEvent) {
    console.log('ifxSidebarCollapseChange:', event);
    // Add your handler logic here
  }
}

ifx-sidebar-example.html

  <ifx-sidebar
    application-name="Application Name"
    [collapsible]="false"
    [collapsed]="false"
    show-header="true"
    show-footer="true"
    initial-collapse="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"
    hide-menu-label="Hide Menu"
    target="_self">
    <ifx-sidebar-title
      (ifxSidebarNavigationItem)="handleSidebarNavigationItem($any($event))"
      (ifxSidebarActionItem)="handleSidebarActionItem($any($event))"
      (ifxSidebarMenu)="handleSidebarMenu($any($event))"
      (ifxSidebarCollapseChange)="handleSidebarCollapseChange($any($event))">Menu Items</ifx-sidebar-title>
    <ifx-sidebar-item
      href="https://google.com"
      target="_blank"
      icon="image-16"
      (ifxSidebarNavigationItem)="handleSidebarNavigationItem($any($event))"
      (ifxSidebarActionItem)="handleSidebarActionItem($any($event))"
      (ifxSidebarMenu)="handleSidebarMenu($any($event))"
      (ifxSidebarCollapseChange)="handleSidebarCollapseChange($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"
      number-indicator="true"
      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 handlePageChange(event: CustomEvent) {
    console.log('ifxPageChange:', event);
    // Add your handler logic here
  }

  protected handleItemsPerPageChange(event: CustomEvent) {
    console.log('ifxItemsPerPageChange:', 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}]'
    (ifxPageChange)="handlePageChange($any($event))"
    (ifxItemsPerPageChange)="handleItemsPerPageChange($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"
    [readOnly]="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 handleSetGroupError(event: CustomEvent) {
    console.log('setGroupError:', 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"
    value="true"
    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 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
  }

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

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

ifx-search-field-example.html

  <ifx-search-field
    size="m"
    [disabled]="false"
    [showDeleteIcon]="true"
    [showSuggestions]="false"
    [enableHistory]="true"
    max-suggestions="10"
    max-history-items="5"
    history-key="ifx-search-history"
    history-header-text="Recent Searches"
    value="true"
    autocomplete="on"
    placeholder="Search..."
    aria-label="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"
    (ifxInput)="handleInput($any($event))"
    (ifxSuggestionRequested)="handleSuggestionRequested($any($event))"
    (ifxSuggestionSelected)="handleSuggestionSelected($any($event))"
    (ifxFocus)="handleFocus($any($event))"
    (ifxBlur)="handleBlur($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 {}

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 handleSelect(event: CustomEvent) {
    console.log('ifxSelect:', event);
    // Add your handler logic here
  }

  protected handleInput(event: CustomEvent) {
    console.log('ifxInput:', 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"
    label="true"
    caption="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"
    [readOnly]="false"
    (ifxSelect)="handleSelect($any($event))"
    (ifxInput)="handleInput($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
    aria-label="true"
    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"
    aria-label="true"
    aria-current="true"
    [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"
    aria-label="true"
    aria-current="true"
    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"
    [readOnly]="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
    table-height="auto"
    row-height="default"
    variant="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-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}]'></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 handleSelectionChange(event: CustomEvent) {
    console.log('ifxSelectionChange:', event);
    // Add your handler logic here
  }

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

ifx-table-example-defaultstate.html

  <ifx-table
    row-height="default"
    table-height="auto"
    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"
    show-loading="false"
    enable-selection="false"
    fit-columns="false"
    pagination-items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}]'
    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}]'
    (ifxSelectionChange)="handleSelectionChange($any($event))"
    (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
  }
}

ifx-tabs-example.html

  <ifx-tabs
    orientation="horizontal"
    active-tab-index="0"
    [fullWidth]="false">
    <ifx-tab
      header="Tab 1"
      icon="true"
      icon-position="left">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="true"
      icon-position="left">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="true"
      icon-position="left">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"
    disabled="false"
    size="m"
    icon="true"
    success="false"
    placeholder="Placeholder"
    read-only="false"
    caption="Caption"
    label="Label"
    required="true"
    name="text-field"
    show-delete-icon="false"
    value="true"
    autocomplete="on"
    type="text"
    internal-id="text-field"
    aria-label="text field for user input"
    maxlength="true"
    (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 {}

ifx-textarea-example.html

  <ifx-textarea
    caption="Caption text, description, error notification"
    cols="43"
    disabled="false"
    error="false"
    label="Label Text"
    name="textarea"
    placeholder="Placeholder"
    required="true"
    read-only="false"
    resize="both"
    rows="5"
    value="true"
    wrap="soft"
    [fullWidth]="false"></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="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