UIView | @uirouter/angular
Options
Menu

A UI-Router viewport directive, which is filled in by a view (component) on a state.

Selector

A ui-view directive can be created as an element: <ui-view></ui-view> or as an attribute: <div ui-view></div>.

Purpose

This directive is used in a Component template (or as the root component) to create a viewport. The viewport is filled in by a view (as defined by a Ng2ViewDeclaration inside a Ng2StateDeclaration) when the view's state has been activated.

Example:

// This app has two states, 'foo' and 'bar'
stateRegistry.register({ name: 'foo', url: '/foo', component: FooComponent });
stateRegistry.register({ name: 'bar', url: '/bar', component: BarComponent });
<!-- This ui-view will be filled in by the foo state's component or
     the bar state's component when the foo or bar state is activated -->
<ui-view></ui-view>

Named ui-views

A ui-view may optionally be given a name via the attribute value: <div ui-view='header'></div>. Note: an unnamed ui-view is internally named $default. When a ui-view has a name, it will be filled in by a matching named view.

Example:

stateRegistry.register({
  name: 'foo',
  url: '/foo',
  views: { header: HeaderComponent, $default: FooComponent });
<!-- When 'foo' state is active, filled by HeaderComponent -->
<div ui-view="header"></div>

<!-- When 'foo' state is active, filled by FooComponent -->
<ui-view></ui-view>

Hierarchy

  • UIView

Index

Constructors

  • new UIView(router: UIRouter, parent: any, viewContainerRef: ViewContainerRef): UIView

Properties

componentRef: ComponentRef<any>

The reference to the component currently inside the viewport

The reference to the component currently inside the viewport

componentTarget: ViewContainerRef
deregisterHook: Function

Deregisters the master uiCanExit transition hook

Deregisters the master uiCanExit transition hook

deregisterUIView: Function

Deregisters the ui-view from the view service

Deregisters the ui-view from the view service

name: string
router: UIRouter
uiViewData: ActiveUIView = <any> {}

Data about the this UIView

Data about the this UIView

viewContainerRef: ViewContainerRef
PARENT_INJECT: string = "UIView.PARENT_INJECT"

Accessors

  • set _name(val: string): void

Methods

  • applyInputBindings(factory: ComponentFactory<any>, ref: ComponentRef<any>, context: ResolveContext, componentClass: any): void
  • Supplies component inputs with resolve data

  • Supplies component inputs with resolve data

    Finds component inputs which match resolves (by name) and sets the input value to the resolve data.

    Parameters

    • factory ComponentFactory<any>
    • ref ComponentRef<any>
    • context ResolveContext
    • componentClass any

    Returns void


  • applyUiCanExitHook(trans: Transition): void
  • For each transition, checks the component loaded in the ui-view for:

  • For each transition, checks the component loaded in the ui-view for:

    • has a uiCanExit() component hook
    • is being exited

    If both are true, adds the uiCanExit component function as a hook to that singular Transition.

    Parameters

    • trans Transition

    Returns void


  • disposeLast(): void
  • getComponentInjector(context: ResolveContext): Injector
  • Creates a new Injector for a routed component.

  • Creates a new Injector for a routed component.

    Adds resolve values to the Injector Adds providers from the NgModule for the state Adds providers from the parent Component in the component tree Adds a PARENT_INJECT view context object

    Parameters

    • context ResolveContext

    Returns Injector

    :

    an Injector


  • ngOnDestroy(): void
  • ngOnInit(): void
  • viewConfigUpdated(config: ViewConfig): void
  • The view service is informing us of an updated ViewConfig (usually because a transition activated some state and its views)

  • The view service is informing us of an updated ViewConfig (usually because a transition activated some state and its views)

    Parameters

    • config ViewConfig

    Returns void


Generated using TypeDoc