UISrefStatus | @uirouter/angular
Options
Menu

A directive which emits events when a paired UISref status changes.

This directive is primarily used by the UISrefActive directives to monitor UISref(s).

This directive shares two attribute selectors with UISrefActive:

  • [uiSrefActive]
  • [uiSrefActiveEq].

Thus, whenever a UISrefActive directive is created, a UISrefStatus directive is also created.

Most apps should simply use UISrefActive, but some advanced components may want to process the SrefStatus events directly.

<li (uiSrefStatus)="onSrefStatusChanged($event)">
  <a uiSref="book" [uiParams]="{ bookId: book.id }">Book </a>
</li>

The uiSrefStatus event is emitted whenever an enclosed uiSref's status changes. The event emitted is of type SrefStatus, and has boolean values for active, exact, entering, and exiting; also has a StateOrName identifiervalue.

The values from this event can be captured and stored on a component (then applied, e.g., using ngClass).


A single uiSrefStatus can enclose multiple uiSref. Each status boolean (active, exact, entering, exiting) will be true if any of the enclosed uiSref status is true. In other words, all enclosed uiSref statuses are merged to a single status using || (logical or).

<li (uiSrefStatus)="onSrefStatus($event)" uiSref="admin">
  Home
  <ul>
    <li> <a uiSref="admin.users">Users</a> </li>
    <li> <a uiSref="admin.groups">Groups</a> </li>
  </ul>
</li>

In the above example, $event.active === true when either admin.users or admin.groups is active.


This API is subject to change.

Hierarchy

  • UISrefStatus

Index

Constructors

Properties

_globals: UIRouterGlobals
_srefChangesSub: Subscription
_srefs: QueryList<UISref>

Monitor all child components for UISref(s)

Monitor all child components for UISref(s)

_srefs$: BehaviorSubject<UISref[]>
_subscription: Subscription
status: SrefStatus

The current status

The current status

uiSrefStatus: EventEmitter<SrefStatus> = new EventEmitter<SrefStatus>(false)

current statuses of the state/params the uiSref directive is linking to

current statuses of the state/params the uiSref directive is linking to

Methods

  • ngAfterContentInit(): void
  • ngOnDestroy(): void

Generated using TypeDoc