coreui-angular-ex/projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts

CoreUI Components Library for Angular

import { Component, HostBinding, Input } from '@angular/core';
import { CommonModule, NgIf, NgTemplateOutlet } from '@angular/common';
import { RouterModule } from '@angular/router';

import { HtmlAttributesDirective, SharedModule } from '../../shared';
import { INavAttributes, INavLinkProps } from './breadcrumb-item';

@Component({
  selector: 'c-breadcrumb-item',
  templateUrl: './breadcrumb-item.component.html',
  styleUrls: ['./breadcrumb-item.component.scss'],
  standalone: true,
  imports: [RouterModule, NgIf, NgTemplateOutlet, HtmlAttributesDirective]
})
export class BreadcrumbItemComponent {

  /**
   * Toggle the active state for the component. [docs]
   * @type boolean
   */
  @Input() active?: boolean;
  /**
   * The `url` prop for the inner `[routerLink]` directive. [docs]
   * @type string
   */
  @Input() url?: string | any[];
  /**
   * Additional html attributes for link. [docs]
   * @type INavAttributes
   */
  @Input() attributes?: INavAttributes;
  /**
   * Some `NavigationExtras` props for the inner `[routerLink]` directive and `routerLinkActiveOptions`. [docs]
   * @type INavLinkProps
   */
  @Input() linkProps?: INavLinkProps;

  @HostBinding('attr.aria-current') get ariaCurrent(): string | null {
    return this.active ? 'page' : null;
  }

  @HostBinding('class')
  get hostClasses(): any {
    return {
      'breadcrumb-item': true,
      active: this.active
    };
  }
}