This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

ApplicationRef

npm Package @angular/core
Module import { ApplicationRef } from '@angular/core';
Source core/src/application_ref.ts

Interface Overview

      
      interface ApplicationRef { 
  get componentTypes: Type<any>[]
  get components: ComponentRef<any>[]
  get isStable: Observable<boolean>
  bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: string | any): ComponentRef<C>
  tick(): void
  attachView(viewRef: ViewRef): void
  detachView(viewRef: ViewRef): void
  get viewCount
}
    

Description

A reference to an Angular application running on a page.

Members

      
      get componentTypes: Type<any>[]
    

Get a list of component types registered to this application. This list is populated even before the component is created.


      
      get components: ComponentRef<any>[]
    

Get a list of components registered to this application.


      
      get isStable: Observable<boolean>
    

Returns an Observable that indicates when the application is stable or unstable.


      
      bootstrap<C>(componentOrFactory: ComponentFactory<C> | Type<C>, rootSelectorOrNode?: string | any): ComponentRef<C>
    

Bootstrap a new component at the root level of the application.

Bootstrap process

When bootstrapping a new root component into an application, Angular mounts the specified application component onto DOM elements identified by the [componentType]'s selector and kicks off automatic change detection to finish initializing the component.

Optionally, a component can be mounted onto a DOM element that does not match the [componentType]'s selector.

Example

      
      @Component({selector: 'my-app', template: 'Hello World'})
class MyApp {
}

const myPlatformFactory = createPlatformFactory(platformBrowserDynamic, 'myPlatform');
myPlatformFactory().bootstrapModule(MyApp);
    

      
      tick(): void
    

Invoke this method to explicitly process change detection and its side-effects.

In development mode, tick() also performs a second change detection cycle to ensure that no further changes are detected. If additional changes are picked up during this second cycle, bindings in the app have side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error, since an Angular application can only have one change detection pass during which all change detection must complete.


      
      attachView(viewRef: ViewRef): void
    

Attaches a view so that it will be dirty checked. The view will be automatically detached when it is destroyed. This will throw if the view is already attached to a ViewContainer.


      
      detachView(viewRef: ViewRef): void
    

Detaches a view from dirty checking again.


      
      get viewCount
    

Returns the number of attached views.