@angular/core 7.2.0-rc.0 → 7.2.3

package/bundles/core.umd.js

@@ -1,5 +1,5 @@
 /**
- * @license Angular v7.2.0-rc.0
+ * @license Angular v7.2.3
  * (c) 2010-2018 Google, Inc. https://angular.io/
  * License: MIT
  */
@@ -7,8 +7,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators')) :
     typeof define === 'function' && define.amd ? define('@angular/core', ['exports', 'rxjs', 'rxjs/operators'], factory) :
-    (factory((global.ng = global.ng || {}, global.ng.core = {}),global.rxjs,global.rxjs.operators));
-}(this, (function (exports,rxjs,operators) { 'use strict';
+    (global = global || self, factory((global.ng = global.ng || {}, global.ng.core = {}), global.rxjs, global.rxjs.operators));
+}(this, function (exports, rxjs, operators) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -231,7 +231,7 @@
      *
      * Use an `InjectionToken` whenever the type you are injecting is not reified (does not have a
      * runtime representation) such as when injecting an interface, callable type, array or
-     * parametrized type.
+     * parameterized type.
      *
      * `InjectionToken` is parameterized on `T` which is the type of object which will be returned by
      * the `Injector`. This provides additional level of type safety.
@@ -537,7 +537,7 @@
         /**
          * Use the `CheckOnce` strategy, meaning that automatic change detection is deactivated
          * until reactivated by setting the strategy to `Default` (`CheckAlways`).
-         * Change detection can still be explictly invoked.
+         * Change detection can still be explicitly invoked.
          */
         ChangeDetectionStrategy[ChangeDetectionStrategy["OnPush"] = 0] = "OnPush";
         /**
@@ -558,7 +558,7 @@
          */
         ChangeDetectorStatus[ChangeDetectorStatus["Checked"] = 1] = "Checked";
         /**
-         * A state in which change detection continues automatically until explictly
+         * A state in which change detection continues automatically until explicitly
          * deactivated.
          */
         ChangeDetectorStatus[ChangeDetectorStatus["CheckAlways"] = 2] = "CheckAlways";
@@ -590,6 +590,140 @@
             changeDetectionStrategy === exports.ChangeDetectionStrategy.Default;
     }
 
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    var __window = typeof window !== 'undefined' && window;
+    var __self = typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' &&
+        self instanceof WorkerGlobalScope && self;
+    var __global = typeof global !== 'undefined' && global;
+    // Check __global first, because in Node tests both __global and __window may be defined and _global
+    // should be __global in that case.
+    var _global = __global || __window || __self;
+    var promise = Promise.resolve(0);
+    var _symbolIterator = null;
+    function getSymbolIterator() {
+        if (!_symbolIterator) {
+            var Symbol_1 = _global['Symbol'];
+            if (Symbol_1 && Symbol_1.iterator) {
+                _symbolIterator = Symbol_1.iterator;
+            }
+            else {
+                // es6-shim specific logic
+                var keys = Object.getOwnPropertyNames(Map.prototype);
+                for (var i = 0; i < keys.length; ++i) {
+                    var key = keys[i];
+                    if (key !== 'entries' && key !== 'size' &&
+                        Map.prototype[key] === Map.prototype['entries']) {
+                        _symbolIterator = key;
+                    }
+                }
+            }
+        }
+        return _symbolIterator;
+    }
+    function scheduleMicroTask(fn) {
+        if (typeof Zone === 'undefined') {
+            // use promise to schedule microTask instead of use Zone
+            promise.then(function () { fn && fn.apply(null, null); });
+        }
+        else {
+            Zone.current.scheduleMicroTask('scheduleMicrotask', fn);
+        }
+    }
+    // JS has NaN !== NaN
+    function looseIdentical(a, b) {
+        return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
+    }
+    function stringify(token) {
+        if (typeof token === 'string') {
+            return token;
+        }
+        if (token instanceof Array) {
+            return '[' + token.map(stringify).join(', ') + ']';
+        }
+        if (token == null) {
+            return '' + token;
+        }
+        if (token.overriddenName) {
+            return "" + token.overriddenName;
+        }
+        if (token.name) {
+            return "" + token.name;
+        }
+        var res = token.toString();
+        if (res == null) {
+            return '' + res;
+        }
+        var newLineIndex = res.indexOf('\n');
+        return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
+    }
+    /**
+     * Convince closure compiler that the wrapped function has no side-effects.
+     *
+     * Closure compiler always assumes that `toString` has no side-effects. We use this quirk to
+     * allow us to execute a function but have closure compiler mark the call as no-side-effects.
+     * It is important that the return value for the `noSideEffects` function be assigned
+     * to something which is retained otherwise the call to `noSideEffects` will be removed by closure
+     * compiler.
+     */
+    function noSideEffects(fn) {
+        return '' + { toString: fn };
+    }
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    var __forward_ref__ = getClosureSafeProperty({ __forward_ref__: getClosureSafeProperty });
+    /**
+     * Allows to refer to references which are not yet defined.
+     *
+     * For instance, `forwardRef` is used when the `token` which we need to refer to for the purposes of
+     * DI is declared, but not yet defined. It is also used when the `token` which we use when creating
+     * a query is not yet defined.
+     *
+     * @usageNotes
+     * ### Example
+     * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='forward_ref'}
+     * @publicApi
+     */
+    function forwardRef(forwardRefFn) {
+        forwardRefFn.__forward_ref__ = forwardRef;
+        forwardRefFn.toString = function () { return stringify(this()); };
+        return forwardRefFn;
+    }
+    /**
+     * Lazily retrieves the reference value from a forwardRef.
+     *
+     * Acts as the identity function when given a non-forward-ref value.
+     *
+     * @usageNotes
+     * ### Example
+     *
+     * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='resolve_forward_ref'}
+     *
+     * @see `forwardRef`
+     * @publicApi
+     */
+    function resolveForwardRef(type) {
+        var fn = type;
+        if (typeof fn === 'function' && fn.hasOwnProperty(__forward_ref__) &&
+            fn.__forward_ref__ === forwardRef) {
+            return fn();
+        }
+        else {
+            return type;
+        }
+    }
+
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -720,91 +854,6 @@
         ViewEncapsulation[ViewEncapsulation["ShadowDom"] = 3] = "ShadowDom";
     })(exports.ViewEncapsulation || (exports.ViewEncapsulation = {}));
 
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    var __window = typeof window !== 'undefined' && window;
-    var __self = typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' &&
-        self instanceof WorkerGlobalScope && self;
-    var __global = typeof global !== 'undefined' && global;
-    // Check __global first, because in Node tests both __global and __window may be defined and _global
-    // should be __global in that case.
-    var _global = __global || __window || __self;
-    var promise = Promise.resolve(0);
-    var _symbolIterator = null;
-    function getSymbolIterator() {
-        if (!_symbolIterator) {
-            var Symbol_1 = _global['Symbol'];
-            if (Symbol_1 && Symbol_1.iterator) {
-                _symbolIterator = Symbol_1.iterator;
-            }
-            else {
-                // es6-shim specific logic
-                var keys = Object.getOwnPropertyNames(Map.prototype);
-                for (var i = 0; i < keys.length; ++i) {
-                    var key = keys[i];
-                    if (key !== 'entries' && key !== 'size' &&
-                        Map.prototype[key] === Map.prototype['entries']) {
-                        _symbolIterator = key;
-                    }
-                }
-            }
-        }
-        return _symbolIterator;
-    }
-    function scheduleMicroTask(fn) {
-        if (typeof Zone === 'undefined') {
-            // use promise to schedule microTask instead of use Zone
-            promise.then(function () { fn && fn.apply(null, null); });
-        }
-        else {
-            Zone.current.scheduleMicroTask('scheduleMicrotask', fn);
-        }
-    }
-    // JS has NaN !== NaN
-    function looseIdentical(a, b) {
-        return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
-    }
-    function stringify(token) {
-        if (typeof token === 'string') {
-            return token;
-        }
-        if (token instanceof Array) {
-            return '[' + token.map(stringify).join(', ') + ']';
-        }
-        if (token == null) {
-            return '' + token;
-        }
-        if (token.overriddenName) {
-            return "" + token.overriddenName;
-        }
-        if (token.name) {
-            return "" + token.name;
-        }
-        var res = token.toString();
-        if (res == null) {
-            return '' + res;
-        }
-        var newLineIndex = res.indexOf('\n');
-        return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
-    }
-    /**
-     * Convince closure compiler that the wrapped function has no side-effects.
-     *
-     * Closure compiler always assumes that `toString` has no side-effects. We use this quirk to
-     * allow us to execute a function but have closure compiler mark the call as no-side-effects.
-     * It is important that the return value for the `noSideEffects` function be assigned
-     * to something which is retained otherwise the call to `noSideEffects` will be removed by closure
-     * compiler.
-     */
-    function noSideEffects(fn) {
-        return '' + { toString: fn };
-    }
-
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -863,6 +912,27 @@
         ngDevModeResetPerfCounters();
     }
 
+    /**
+    * @license
+    * Copyright Google Inc. All Rights Reserved.
+    *
+    * Use of this source code is governed by an MIT-style license that can be
+    * found in the LICENSE file at https://angular.io/license
+    */
+    /**
+     * This file contains reuseable "empty" symbols that can be used as default return values
+     * in different parts of the rendering code. Because the same symbols are returned, this
+     * allows for identity checks against these values to be consistently used by the framework
+     * code.
+     */
+    var EMPTY_OBJ = {};
+    var EMPTY_ARRAY = [];
+    // freezing the values prevents any code from accidentally inserting new values in
+    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        Object.freeze(EMPTY_OBJ);
+        Object.freeze(EMPTY_ARRAY);
+    }
+
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -870,12 +940,6 @@
      * Use of this source code is governed by an MIT-style license that can be
      * found in the LICENSE file at https://angular.io/license
      */
-    var EMPTY = {};
-    var EMPTY_ARRAY = [];
-    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-        Object.freeze(EMPTY);
-        Object.freeze(EMPTY_ARRAY);
-    }
     var _renderCompCount = 0;
     /**
      * Create a component definition object.
@@ -1032,7 +1096,7 @@
      */
     function invertObject(obj, secondary) {
         if (obj == null)
-            return EMPTY;
+            return EMPTY_OBJ;
         var newLookup = {};
         for (var minifiedKey in obj) {
             if (obj.hasOwnProperty(minifiedKey)) {
@@ -1129,204 +1193,6 @@
         return ngModuleDef;
     }
 
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    var R3ResolvedDependencyType;
-    (function (R3ResolvedDependencyType) {
-        R3ResolvedDependencyType[R3ResolvedDependencyType["Token"] = 0] = "Token";
-        R3ResolvedDependencyType[R3ResolvedDependencyType["Attribute"] = 1] = "Attribute";
-    })(R3ResolvedDependencyType || (R3ResolvedDependencyType = {}));
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    function getCompilerFacade() {
-        var globalNg = _global.ng;
-        if (!globalNg || !globalNg.ɵcompilerFacade) {
-            throw new Error("Angular JIT compilation failed: '@angular/compiler' not loaded!\n" +
-                "  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.\n" +
-                "  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?\n" +
-                "  - Alternatively provide the compiler with 'import \"@angular/compiler\";' before bootstrapping.");
-        }
-        return globalNg.ɵcompilerFacade;
-    }
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    /**
-     * Inject decorator and metadata.
-     *
-     * @Annotation
-     * @publicApi
-     */
-    var Inject = makeParamDecorator('Inject', function (token) { return ({ token: token }); });
-    /**
-     * Optional decorator and metadata.
-     *
-     * @Annotation
-     * @publicApi
-     */
-    var Optional = makeParamDecorator('Optional');
-    /**
-     * Self decorator and metadata.
-     *
-     * @Annotation
-     * @publicApi
-     */
-    var Self = makeParamDecorator('Self');
-    /**
-     * SkipSelf decorator and metadata.
-     *
-     * @Annotation
-     * @publicApi
-     */
-    var SkipSelf = makeParamDecorator('SkipSelf');
-    /**
-     * Host decorator and metadata.
-     *
-     * @Annotation
-     * @publicApi
-     */
-    var Host = makeParamDecorator('Host');
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    (function (InjectFlags) {
-        // TODO(alxhub): make this 'const' when ngc no longer writes exports of it into ngfactory files.
-        InjectFlags[InjectFlags["Default"] = 0] = "Default";
-        /**
-         * Specifies that an injector should retrieve a dependency from any injector until reaching the
-         * host element of the current component. (Only used with Element Injector)
-         */
-        InjectFlags[InjectFlags["Host"] = 1] = "Host";
-        /** Don't descend into ancestors of the node requesting injection. */
-        InjectFlags[InjectFlags["Self"] = 2] = "Self";
-        /** Skip the node that is requesting injection. */
-        InjectFlags[InjectFlags["SkipSelf"] = 4] = "SkipSelf";
-        /** Inject `defaultValue` instead if token not found. */
-        InjectFlags[InjectFlags["Optional"] = 8] = "Optional";
-    })(exports.InjectFlags || (exports.InjectFlags = {}));
-    /**
-     * Current injector value used by `inject`.
-     * - `undefined`: it is an error to call `inject`
-     * - `null`: `inject` can be called but there is no injector (limp-mode).
-     * - Injector instance: Use the injector for resolution.
-     */
-    var _currentInjector = undefined;
-    function setCurrentInjector(injector) {
-        var former = _currentInjector;
-        _currentInjector = injector;
-        return former;
-    }
-    /**
-     * Current implementation of inject.
-     *
-     * By default, it is `injectInjectorOnly`, which makes it `Injector`-only aware. It can be changed
-     * to `directiveInject`, which brings in the `NodeInjector` system of ivy. It is designed this
-     * way for two reasons:
-     *  1. `Injector` should not depend on ivy logic.
-     *  2. To maintain tree shake-ability we don't want to bring in unnecessary code.
-     */
-    var _injectImplementation;
-    /**
-     * Sets the current inject implementation.
-     */
-    function setInjectImplementation(impl) {
-        var previous = _injectImplementation;
-        _injectImplementation = impl;
-        return previous;
-    }
-    function injectInjectorOnly(token, flags) {
-        if (flags === void 0) { flags = exports.InjectFlags.Default; }
-        if (_currentInjector === undefined) {
-            throw new Error("inject() must be called from an injection context");
-        }
-        else if (_currentInjector === null) {
-            return injectRootLimpMode(token, undefined, flags);
-        }
-        else {
-            return _currentInjector.get(token, flags & exports.InjectFlags.Optional ? null : undefined, flags);
-        }
-    }
-    function inject(token, flags) {
-        if (flags === void 0) { flags = exports.InjectFlags.Default; }
-        return (_injectImplementation || injectInjectorOnly)(token, flags);
-    }
-    /**
-     * Injects `root` tokens in limp mode.
-     *
-     * If no injector exists, we can still inject tree-shakable providers which have `providedIn` set to
-     * `"root"`. This is known as the limp mode injection. In such case the value is stored in the
-     * `InjectableDef`.
-     */
-    function injectRootLimpMode(token, notFoundValue, flags) {
-        var injectableDef = getInjectableDef(token);
-        if (injectableDef && injectableDef.providedIn == 'root') {
-            return injectableDef.value === undefined ? injectableDef.value = injectableDef.factory() :
-                injectableDef.value;
-        }
-        if (flags & exports.InjectFlags.Optional)
-            return null;
-        if (notFoundValue !== undefined)
-            return notFoundValue;
-        throw new Error("Injector: NOT_FOUND [" + stringify(token) + "]");
-    }
-    function injectArgs(types) {
-        var args = [];
-        for (var i = 0; i < types.length; i++) {
-            var arg = types[i];
-            if (Array.isArray(arg)) {
-                if (arg.length === 0) {
-                    throw new Error('Arguments array must have arguments.');
-                }
-                var type = undefined;
-                var flags = exports.InjectFlags.Default;
-                for (var j = 0; j < arg.length; j++) {
-                    var meta = arg[j];
-                    if (meta instanceof Optional || meta.ngMetadataName === 'Optional') {
-                        flags |= exports.InjectFlags.Optional;
-                    }
-                    else if (meta instanceof SkipSelf || meta.ngMetadataName === 'SkipSelf') {
-                        flags |= exports.InjectFlags.SkipSelf;
-                    }
-                    else if (meta instanceof Self || meta.ngMetadataName === 'Self') {
-                        flags |= exports.InjectFlags.Self;
-                    }
-                    else if (meta instanceof Inject) {
-                        type = meta.token;
-                    }
-                    else {
-                        type = meta;
-                    }
-                }
-                args.push(inject(type, flags));
-            }
-            else {
-                args.push(inject(arg));
-            }
-        }
-        return args;
-    }
-
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -1389,6 +1255,76 @@
         assertLessThan(index, arr ? arr.length : 0, 'index expected to be a valid data index');
     }
 
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    // Below are constants for LView indices to help us look up LView members
+    // without having to remember the specific indices.
+    // Uglify will inline these when minifying so there shouldn't be a cost.
+    var TVIEW = 0;
+    var FLAGS = 1;
+    var PARENT = 2;
+    var NEXT = 3;
+    var QUERIES = 4;
+    var HOST = 5;
+    var HOST_NODE = 6; // Rename to `T_HOST`?
+    var BINDING_INDEX = 7;
+    var CLEANUP = 8;
+    var CONTEXT = 9;
+    var INJECTOR = 10;
+    var RENDERER_FACTORY = 11;
+    var RENDERER = 12;
+    var SANITIZER = 13;
+    var TAIL = 14;
+    var CONTAINER_INDEX = 15;
+    var CONTENT_QUERIES = 16;
+    var DECLARATION_VIEW = 17;
+    /** Size of LView's header. Necessary to adjust for it when setting slots.  */
+    var HEADER_OFFSET = 18;
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    /**
+     * Below are constants for LContainer indices to help us look up LContainer members
+     * without having to remember the specific indices.
+     * Uglify will inline these when minifying so there shouldn't be a cost.
+     */
+    var ACTIVE_INDEX = 0;
+    var VIEWS = 1;
+    // PARENT, NEXT, QUERIES, and HOST are indices 2, 3, 4, and 5.
+    // As we already have these constants in LView, we don't need to re-create them.
+    var NATIVE = 6;
+    var RENDER_PARENT = 7;
+    // Because interfaces in TS/JS cannot be instanceof-checked this means that we
+    // need to rely on predictable characteristics of data-structures to check if they
+    // are what we expect for them to be. The `LContainer` interface code below has a
+    // fixed length and the constant value below references that. Using the length value
+    // below we can predictably gaurantee that we are dealing with an `LContainer` array.
+    // This value MUST be kept up to date with the length of the `LContainer` array
+    // interface below so that runtime type checking can work.
+    var LCONTAINER_LENGTH = 8;
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    /**
+     * This property will be monkey-patched on elements, components and directives
+     */
+    var MONKEY_PATCH_KEY_NAME = '__ngContext__';
+
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -1521,210 +1457,6 @@
         return obj != null && typeof obj == 'object' && Object.getPrototypeOf(obj) == FactoryPrototype;
     }
 
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    // Below are constants for LView indices to help us look up LView members
-    // without having to remember the specific indices.
-    // Uglify will inline these when minifying so there shouldn't be a cost.
-    var TVIEW = 0;
-    var FLAGS = 1;
-    var PARENT = 2;
-    var NEXT = 3;
-    var QUERIES = 4;
-    var HOST = 5;
-    var HOST_NODE = 6; // Rename to `T_HOST`?
-    var BINDING_INDEX = 7;
-    var CLEANUP = 8;
-    var CONTEXT = 9;
-    var INJECTOR = 10;
-    var RENDERER_FACTORY = 11;
-    var RENDERER = 12;
-    var SANITIZER = 13;
-    var TAIL = 14;
-    var CONTAINER_INDEX = 15;
-    var CONTENT_QUERIES = 16;
-    var DECLARATION_VIEW = 17;
-    /** Size of LView's header. Necessary to adjust for it when setting slots.  */
-    var HEADER_OFFSET = 18;
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    function assertNodeType(tNode, type) {
-        assertDefined(tNode, 'should be called with a TNode');
-        assertEqual(tNode.type, type, "should be a " + typeName(type));
-    }
-    function assertNodeOfPossibleTypes(tNode) {
-        var types = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            types[_i - 1] = arguments[_i];
-        }
-        assertDefined(tNode, 'should be called with a TNode');
-        var found = types.some(function (type) { return tNode.type === type; });
-        assertEqual(found, true, "Should be one of " + types.map(typeName).join(', ') + " but got " + typeName(tNode.type));
-    }
-    function typeName(type) {
-        if (type == 1 /* Projection */)
-            return 'Projection';
-        if (type == 0 /* Container */)
-            return 'Container';
-        if (type == 2 /* View */)
-            return 'View';
-        if (type == 3 /* Element */)
-            return 'Element';
-        if (type == 4 /* ElementContainer */)
-            return 'ElementContainer';
-        return '<unknown>';
-    }
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    /**
-     * If this is the first template pass, any ngOnInit or ngDoCheck hooks will be queued into
-     * TView.initHooks during directiveCreate.
-     *
-     * The directive index and hook type are encoded into one number (1st bit: type, remaining bits:
-     * directive index), then saved in the even indices of the initHooks array. The odd indices
-     * hold the hook functions themselves.
-     *
-     * @param index The index of the directive in LView
-     * @param hooks The static hooks map on the directive def
-     * @param tView The current TView
-     */
-    function queueInitHooks(index, onInit, doCheck, tView) {
-        ngDevMode &&
-            assertEqual(tView.firstTemplatePass, true, 'Should only be called on first template pass');
-        if (onInit) {
-            (tView.initHooks || (tView.initHooks = [])).push(index, onInit);
-        }
-        if (doCheck) {
-            (tView.initHooks || (tView.initHooks = [])).push(index, doCheck);
-            (tView.checkHooks || (tView.checkHooks = [])).push(index, doCheck);
-        }
-    }
-    /**
-     * Loops through the directives on a node and queues all their hooks except ngOnInit
-     * and ngDoCheck, which are queued separately in directiveCreate.
-     */
-    function queueLifecycleHooks(tView, tNode) {
-        if (tView.firstTemplatePass) {
-            // It's necessary to loop through the directives at elementEnd() (rather than processing in
-            // directiveCreate) so we can preserve the current hook order. Content, view, and destroy
-            // hooks for projected components and directives must be called *before* their hosts.
-            for (var i = tNode.directiveStart, end = tNode.directiveEnd; i < end; i++) {
-                var def = tView.data[i];
-                queueContentHooks(def, tView, i);
-                queueViewHooks(def, tView, i);
-                queueDestroyHooks(def, tView, i);
-            }
-        }
-    }
-    /** Queues afterContentInit and afterContentChecked hooks on TView */
-    function queueContentHooks(def, tView, i) {
-        if (def.afterContentInit) {
-            (tView.contentHooks || (tView.contentHooks = [])).push(i, def.afterContentInit);
-        }
-        if (def.afterContentChecked) {
-            (tView.contentHooks || (tView.contentHooks = [])).push(i, def.afterContentChecked);
-            (tView.contentCheckHooks || (tView.contentCheckHooks = [])).push(i, def.afterContentChecked);
-        }
-    }
-    /** Queues afterViewInit and afterViewChecked hooks on TView */
-    function queueViewHooks(def, tView, i) {
-        if (def.afterViewInit) {
-            (tView.viewHooks || (tView.viewHooks = [])).push(i, def.afterViewInit);
-        }
-        if (def.afterViewChecked) {
-            (tView.viewHooks || (tView.viewHooks = [])).push(i, def.afterViewChecked);
-            (tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, def.afterViewChecked);
-        }
-    }
-    /** Queues onDestroy hooks on TView */
-    function queueDestroyHooks(def, tView, i) {
-        if (def.onDestroy != null) {
-            (tView.destroyHooks || (tView.destroyHooks = [])).push(i, def.onDestroy);
-        }
-    }
-    /**
-     * Calls onInit and doCheck calls if they haven't already been called.
-     *
-     * @param currentView The current view
-     */
-    function executeInitHooks(currentView, tView, creationMode) {
-        if (currentView[FLAGS] & 16 /* RunInit */) {
-            executeHooks(currentView, tView.initHooks, tView.checkHooks, creationMode);
-            currentView[FLAGS] &= ~16 /* RunInit */;
-        }
-    }
-    /**
-     * Iterates over afterViewInit and afterViewChecked functions and calls them.
-     *
-     * @param currentView The current view
-     */
-    function executeHooks(data, allHooks, checkHooks, creationMode) {
-        var hooksToCall = creationMode ? allHooks : checkHooks;
-        if (hooksToCall) {
-            callHooks(data, hooksToCall);
-        }
-    }
-    /**
-     * Calls lifecycle hooks with their contexts, skipping init hooks if it's not
-     * creation mode.
-     *
-     * @param currentView The current view
-     * @param arr The array in which the hooks are found
-     */
-    function callHooks(currentView, arr) {
-        for (var i = 0; i < arr.length; i += 2) {
-            arr[i + 1].call(currentView[arr[i]]);
-        }
-    }
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    /**
-     * Below are constants for LContainer indices to help us look up LContainer members
-     * without having to remember the specific indices.
-     * Uglify will inline these when minifying so there shouldn't be a cost.
-     */
-    var ACTIVE_INDEX = 0;
-    var VIEWS = 1;
-    // PARENT, NEXT, QUERIES, and HOST are indices 2, 3, 4, and 5.
-    // As we already have these constants in LView, we don't need to re-create them.
-    var NATIVE = 6;
-    var RENDER_PARENT = 7;
-
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    /**
-     * This property will be monkey-patched on elements, components and directives
-     */
-    var MONKEY_PATCH_KEY_NAME = '__ngContext__';
-
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -1830,120 +1562,477 @@
     }
     function isLContainer(value) {
         // Styling contexts are also arrays, but their first index contains an element node
-        return Array.isArray(value) && typeof value[ACTIVE_INDEX] === 'number';
+        return Array.isArray(value) && value.length === LCONTAINER_LENGTH;
     }
     function isRootView(target) {
-        return (target[FLAGS] & 64 /* IsRoot */) !== 0;
+        return (target[FLAGS] & 128 /* IsRoot */) !== 0;
+    }
+    /**
+     * Retrieve the root view from any component by walking the parent `LView` until
+     * reaching the root `LView`.
+     *
+     * @param component any component
+     */
+    function getRootView(target) {
+        ngDevMode && assertDefined(target, 'component');
+        var lView = Array.isArray(target) ? target : readPatchedLView(target);
+        while (lView && !(lView[FLAGS] & 128 /* IsRoot */)) {
+            lView = lView[PARENT];
+        }
+        return lView;
+    }
+    function getRootContext(viewOrComponent) {
+        var rootView = getRootView(viewOrComponent);
+        ngDevMode &&
+            assertDefined(rootView[CONTEXT], 'RootView has no context. Perhaps it is disconnected?');
+        return rootView[CONTEXT];
+    }
+    /**
+     * Returns the monkey-patch value data present on the target (which could be
+     * a component, directive or a DOM node).
+     */
+    function readPatchedData(target) {
+        ngDevMode && assertDefined(target, 'Target expected');
+        return target[MONKEY_PATCH_KEY_NAME];
+    }
+    function readPatchedLView(target) {
+        var value = readPatchedData(target);
+        if (value) {
+            return Array.isArray(value) ? value : value.lView;
+        }
+        return null;
+    }
+    function hasParentInjector(parentLocation) {
+        return parentLocation !== NO_PARENT_INJECTOR;
+    }
+    function getParentInjectorIndex(parentLocation) {
+        return parentLocation & 32767 /* InjectorIndexMask */;
+    }
+    function getParentInjectorViewOffset(parentLocation) {
+        return parentLocation >> 16 /* ViewOffsetShift */;
+    }
+    /**
+     * Unwraps a parent injector location number to find the view offset from the current injector,
+     * then walks up the declaration view tree until the view is found that contains the parent
+     * injector.
+     *
+     * @param location The location of the parent injector, which contains the view offset
+     * @param startView The LView instance from which to start walking up the view tree
+     * @returns The LView instance that contains the parent injector
+     */
+    function getParentInjectorView(location, startView) {
+        var viewOffset = getParentInjectorViewOffset(location);
+        var parentView = startView;
+        // For most cases, the parent injector can be found on the host node (e.g. for component
+        // or container), but we must keep the loop here to support the rarer case of deeply nested
+        // <ng-template> tags or inline views, where the parent injector might live many views
+        // above the child injector.
+        while (viewOffset > 0) {
+            parentView = parentView[DECLARATION_VIEW];
+            viewOffset--;
+        }
+        return parentView;
     }
     /**
-     * Retrieve the root view from any component by walking the parent `LView` until
-     * reaching the root `LView`.
+     * Unwraps a parent injector location number to find the view offset from the current injector,
+     * then walks up the declaration view tree until the TNode of the parent injector is found.
+     *
+     * @param location The location of the parent injector, which contains the view offset
+     * @param startView The LView instance from which to start walking up the view tree
+     * @param startTNode The TNode instance of the starting element
+     * @returns The TNode of the parent injector
+     */
+    function getParentInjectorTNode(location, startView, startTNode) {
+        if (startTNode.parent && startTNode.parent.injectorIndex !== -1) {
+            // view offset is 0
+            var injectorIndex = startTNode.parent.injectorIndex;
+            var parentTNode_1 = startTNode.parent;
+            while (parentTNode_1.parent != null && injectorIndex == parentTNode_1.injectorIndex) {
+                parentTNode_1 = parentTNode_1.parent;
+            }
+            return parentTNode_1;
+        }
+        var viewOffset = getParentInjectorViewOffset(location);
+        // view offset is 1
+        var parentView = startView;
+        var parentTNode = startView[HOST_NODE];
+        // view offset is superior to 1
+        while (viewOffset > 1) {
+            parentView = parentView[DECLARATION_VIEW];
+            parentTNode = parentView[HOST_NODE];
+            viewOffset--;
+        }
+        return parentTNode;
+    }
+    var defaultScheduler = (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame || // browser only
+        setTimeout // everything else
+    ).bind(_global);
+    /**
+     * Equivalent to ES6 spread, add each item to an array.
+     *
+     * @param items The items to add
+     * @param arr The array to which you want to add the items
+     */
+    function addAllToArray(items, arr) {
+        for (var i = 0; i < items.length; i++) {
+            arr.push(items[i]);
+        }
+    }
+    /**
+     * Given a current view, finds the nearest component's host (LElement).
+     *
+     * @param lView LView for which we want a host element node
+     * @returns The host node
+     */
+    function findComponentView(lView) {
+        var rootTNode = lView[HOST_NODE];
+        while (rootTNode && rootTNode.type === 2 /* View */) {
+            ngDevMode && assertDefined(lView[DECLARATION_VIEW], 'lView[DECLARATION_VIEW]');
+            lView = lView[DECLARATION_VIEW];
+            rootTNode = lView[HOST_NODE];
+        }
+        return lView;
+    }
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    var R3ResolvedDependencyType;
+    (function (R3ResolvedDependencyType) {
+        R3ResolvedDependencyType[R3ResolvedDependencyType["Token"] = 0] = "Token";
+        R3ResolvedDependencyType[R3ResolvedDependencyType["Attribute"] = 1] = "Attribute";
+    })(R3ResolvedDependencyType || (R3ResolvedDependencyType = {}));
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    function getCompilerFacade() {
+        var globalNg = _global.ng;
+        if (!globalNg || !globalNg.ɵcompilerFacade) {
+            throw new Error("Angular JIT compilation failed: '@angular/compiler' not loaded!\n" +
+                "  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.\n" +
+                "  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?\n" +
+                "  - Alternatively provide the compiler with 'import \"@angular/compiler\";' before bootstrapping.");
+        }
+        return globalNg.ɵcompilerFacade;
+    }
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    /**
+     * Inject decorator and metadata.
+     *
+     * @Annotation
+     * @publicApi
+     */
+    var Inject = makeParamDecorator('Inject', function (token) { return ({ token: token }); });
+    /**
+     * Optional decorator and metadata.
+     *
+     * @Annotation
+     * @publicApi
+     */
+    var Optional = makeParamDecorator('Optional');
+    /**
+     * Self decorator and metadata.
+     *
+     * @Annotation
+     * @publicApi
+     */
+    var Self = makeParamDecorator('Self');
+    /**
+     * SkipSelf decorator and metadata.
+     *
+     * @Annotation
+     * @publicApi
+     */
+    var SkipSelf = makeParamDecorator('SkipSelf');
+    /**
+     * Host decorator and metadata.
+     *
+     * @Annotation
+     * @publicApi
+     */
+    var Host = makeParamDecorator('Host');
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    (function (InjectFlags) {
+        // TODO(alxhub): make this 'const' when ngc no longer writes exports of it into ngfactory files.
+        InjectFlags[InjectFlags["Default"] = 0] = "Default";
+        /**
+         * Specifies that an injector should retrieve a dependency from any injector until reaching the
+         * host element of the current component. (Only used with Element Injector)
+         */
+        InjectFlags[InjectFlags["Host"] = 1] = "Host";
+        /** Don't descend into ancestors of the node requesting injection. */
+        InjectFlags[InjectFlags["Self"] = 2] = "Self";
+        /** Skip the node that is requesting injection. */
+        InjectFlags[InjectFlags["SkipSelf"] = 4] = "SkipSelf";
+        /** Inject `defaultValue` instead if token not found. */
+        InjectFlags[InjectFlags["Optional"] = 8] = "Optional";
+    })(exports.InjectFlags || (exports.InjectFlags = {}));
+    /**
+     * Current injector value used by `inject`.
+     * - `undefined`: it is an error to call `inject`
+     * - `null`: `inject` can be called but there is no injector (limp-mode).
+     * - Injector instance: Use the injector for resolution.
+     */
+    var _currentInjector = undefined;
+    function setCurrentInjector(injector) {
+        var former = _currentInjector;
+        _currentInjector = injector;
+        return former;
+    }
+    /**
+     * Current implementation of inject.
+     *
+     * By default, it is `injectInjectorOnly`, which makes it `Injector`-only aware. It can be changed
+     * to `directiveInject`, which brings in the `NodeInjector` system of ivy. It is designed this
+     * way for two reasons:
+     *  1. `Injector` should not depend on ivy logic.
+     *  2. To maintain tree shake-ability we don't want to bring in unnecessary code.
+     */
+    var _injectImplementation;
+    /**
+     * Sets the current inject implementation.
+     */
+    function setInjectImplementation(impl) {
+        var previous = _injectImplementation;
+        _injectImplementation = impl;
+        return previous;
+    }
+    function injectInjectorOnly(token, flags) {
+        if (flags === void 0) { flags = exports.InjectFlags.Default; }
+        if (_currentInjector === undefined) {
+            throw new Error("inject() must be called from an injection context");
+        }
+        else if (_currentInjector === null) {
+            return injectRootLimpMode(token, undefined, flags);
+        }
+        else {
+            return _currentInjector.get(token, flags & exports.InjectFlags.Optional ? null : undefined, flags);
+        }
+    }
+    function inject(token, flags) {
+        if (flags === void 0) { flags = exports.InjectFlags.Default; }
+        return (_injectImplementation || injectInjectorOnly)(token, flags);
+    }
+    /**
+     * Injects `root` tokens in limp mode.
+     *
+     * If no injector exists, we can still inject tree-shakable providers which have `providedIn` set to
+     * `"root"`. This is known as the limp mode injection. In such case the value is stored in the
+     * `InjectableDef`.
+     */
+    function injectRootLimpMode(token, notFoundValue, flags) {
+        var injectableDef = getInjectableDef(token);
+        if (injectableDef && injectableDef.providedIn == 'root') {
+            return injectableDef.value === undefined ? injectableDef.value = injectableDef.factory() :
+                injectableDef.value;
+        }
+        if (flags & exports.InjectFlags.Optional)
+            return null;
+        if (notFoundValue !== undefined)
+            return notFoundValue;
+        throw new Error("Injector: NOT_FOUND [" + stringify(token) + "]");
+    }
+    function injectArgs(types) {
+        var args = [];
+        for (var i = 0; i < types.length; i++) {
+            var arg = types[i];
+            if (Array.isArray(arg)) {
+                if (arg.length === 0) {
+                    throw new Error('Arguments array must have arguments.');
+                }
+                var type = undefined;
+                var flags = exports.InjectFlags.Default;
+                for (var j = 0; j < arg.length; j++) {
+                    var meta = arg[j];
+                    if (meta instanceof Optional || meta.ngMetadataName === 'Optional') {
+                        flags |= exports.InjectFlags.Optional;
+                    }
+                    else if (meta instanceof SkipSelf || meta.ngMetadataName === 'SkipSelf') {
+                        flags |= exports.InjectFlags.SkipSelf;
+                    }
+                    else if (meta instanceof Self || meta.ngMetadataName === 'Self') {
+                        flags |= exports.InjectFlags.Self;
+                    }
+                    else if (meta instanceof Inject) {
+                        type = meta.token;
+                    }
+                    else {
+                        type = meta;
+                    }
+                }
+                args.push(inject(type, flags));
+            }
+            else {
+                args.push(inject(arg));
+            }
+        }
+        return args;
+    }
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    function assertNodeType(tNode, type) {
+        assertDefined(tNode, 'should be called with a TNode');
+        assertEqual(tNode.type, type, "should be a " + typeName(type));
+    }
+    function assertNodeOfPossibleTypes(tNode) {
+        var types = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            types[_i - 1] = arguments[_i];
+        }
+        assertDefined(tNode, 'should be called with a TNode');
+        var found = types.some(function (type) { return tNode.type === type; });
+        assertEqual(found, true, "Should be one of " + types.map(typeName).join(', ') + " but got " + typeName(tNode.type));
+    }
+    function typeName(type) {
+        if (type == 1 /* Projection */)
+            return 'Projection';
+        if (type == 0 /* Container */)
+            return 'Container';
+        if (type == 2 /* View */)
+            return 'View';
+        if (type == 3 /* Element */)
+            return 'Element';
+        if (type == 4 /* ElementContainer */)
+            return 'ElementContainer';
+        return '<unknown>';
+    }
+
+    /**
+     * @license
+     * Copyright Google Inc. All Rights Reserved.
+     *
+     * Use of this source code is governed by an MIT-style license that can be
+     * found in the LICENSE file at https://angular.io/license
+     */
+    /**
+     * If this is the first template pass, any ngOnInit or ngDoCheck hooks will be queued into
+     * TView.initHooks during directiveCreate.
      *
-     * @param component any component
+     * The directive index and hook type are encoded into one number (1st bit: type, remaining bits:
+     * directive index), then saved in the even indices of the initHooks array. The odd indices
+     * hold the hook functions themselves.
+     *
+     * @param index The index of the directive in LView
+     * @param hooks The static hooks map on the directive def
+     * @param tView The current TView
      */
-    function getRootView(target) {
-        ngDevMode && assertDefined(target, 'component');
-        var lView = Array.isArray(target) ? target : readPatchedLView(target);
-        while (lView && !(lView[FLAGS] & 64 /* IsRoot */)) {
-            lView = lView[PARENT];
-        }
-        return lView;
-    }
-    function getRootContext(viewOrComponent) {
-        var rootView = getRootView(viewOrComponent);
+    function queueInitHooks(index, onInit, doCheck, tView) {
         ngDevMode &&
-            assertDefined(rootView[CONTEXT], 'RootView has no context. Perhaps it is disconnected?');
-        return rootView[CONTEXT];
+            assertEqual(tView.firstTemplatePass, true, 'Should only be called on first template pass');
+        if (onInit) {
+            (tView.initHooks || (tView.initHooks = [])).push(index, onInit);
+        }
+        if (doCheck) {
+            (tView.initHooks || (tView.initHooks = [])).push(index, doCheck);
+            (tView.checkHooks || (tView.checkHooks = [])).push(index, doCheck);
+        }
     }
     /**
-     * Returns the monkey-patch value data present on the target (which could be
-     * a component, directive or a DOM node).
+     * Loops through the directives on a node and queues all their hooks except ngOnInit
+     * and ngDoCheck, which are queued separately in directiveCreate.
      */
-    function readPatchedData(target) {
-        ngDevMode && assertDefined(target, 'Target expected');
-        return target[MONKEY_PATCH_KEY_NAME];
-    }
-    function readPatchedLView(target) {
-        var value = readPatchedData(target);
-        if (value) {
-            return Array.isArray(value) ? value : value.lView;
+    function queueLifecycleHooks(tView, tNode) {
+        if (tView.firstTemplatePass) {
+            // It's necessary to loop through the directives at elementEnd() (rather than processing in
+            // directiveCreate) so we can preserve the current hook order. Content, view, and destroy
+            // hooks for projected components and directives must be called *before* their hosts.
+            for (var i = tNode.directiveStart, end = tNode.directiveEnd; i < end; i++) {
+                var def = tView.data[i];
+                queueContentHooks(def, tView, i);
+                queueViewHooks(def, tView, i);
+                queueDestroyHooks(def, tView, i);
+            }
         }
-        return null;
     }
-    function hasParentInjector(parentLocation) {
-        return parentLocation !== NO_PARENT_INJECTOR;
+    /** Queues afterContentInit and afterContentChecked hooks on TView */
+    function queueContentHooks(def, tView, i) {
+        if (def.afterContentInit) {
+            (tView.contentHooks || (tView.contentHooks = [])).push(i, def.afterContentInit);
+        }
+        if (def.afterContentChecked) {
+            (tView.contentHooks || (tView.contentHooks = [])).push(i, def.afterContentChecked);
+            (tView.contentCheckHooks || (tView.contentCheckHooks = [])).push(i, def.afterContentChecked);
+        }
     }
-    function getParentInjectorIndex(parentLocation) {
-        return parentLocation & 32767 /* InjectorIndexMask */;
+    /** Queues afterViewInit and afterViewChecked hooks on TView */
+    function queueViewHooks(def, tView, i) {
+        if (def.afterViewInit) {
+            (tView.viewHooks || (tView.viewHooks = [])).push(i, def.afterViewInit);
+        }
+        if (def.afterViewChecked) {
+            (tView.viewHooks || (tView.viewHooks = [])).push(i, def.afterViewChecked);
+            (tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, def.afterViewChecked);
+        }
     }
-    function getParentInjectorViewOffset(parentLocation) {
-        return parentLocation >> 16 /* ViewOffsetShift */;
+    /** Queues onDestroy hooks on TView */
+    function queueDestroyHooks(def, tView, i) {
+        if (def.onDestroy != null) {
+            (tView.destroyHooks || (tView.destroyHooks = [])).push(i, def.onDestroy);
+        }
     }
     /**
-     * Unwraps a parent injector location number to find the view offset from the current injector,
-     * then walks up the declaration view tree until the view is found that contains the parent
-     * injector.
+     * Calls onInit and doCheck calls if they haven't already been called.
      *
-     * @param location The location of the parent injector, which contains the view offset
-     * @param startView The LView instance from which to start walking up the view tree
-     * @returns The LView instance that contains the parent injector
+     * @param currentView The current view
      */
-    function getParentInjectorView(location, startView) {
-        var viewOffset = getParentInjectorViewOffset(location);
-        var parentView = startView;
-        // For most cases, the parent injector can be found on the host node (e.g. for component
-        // or container), but we must keep the loop here to support the rarer case of deeply nested
-        // <ng-template> tags or inline views, where the parent injector might live many views
-        // above the child injector.
-        while (viewOffset > 0) {
-            parentView = parentView[DECLARATION_VIEW];
-            viewOffset--;
+    function executeInitHooks(currentView, tView, checkNoChangesMode) {
+        if (!checkNoChangesMode && currentView[FLAGS] & 32 /* RunInit */) {
+            executeHooks(currentView, tView.initHooks, tView.checkHooks, checkNoChangesMode);
+            currentView[FLAGS] &= ~32 /* RunInit */;
         }
-        return parentView;
     }
     /**
-     * Unwraps a parent injector location number to find the view offset from the current injector,
-     * then walks up the declaration view tree until the TNode of the parent injector is found.
+     * Iterates over afterViewInit and afterViewChecked functions and calls them.
      *
-     * @param location The location of the parent injector, which contains the view offset
-     * @param startView The LView instance from which to start walking up the view tree
-     * @param startTNode The TNode instance of the starting element
-     * @returns The TNode of the parent injector
+     * @param currentView The current view
      */
-    function getParentInjectorTNode(location, startView, startTNode) {
-        if (startTNode.parent && startTNode.parent.injectorIndex !== -1) {
-            // view offset is 0
-            var injectorIndex = startTNode.parent.injectorIndex;
-            var parentTNode_1 = startTNode.parent;
-            while (parentTNode_1.parent != null && injectorIndex == parentTNode_1.injectorIndex) {
-                parentTNode_1 = parentTNode_1.parent;
-            }
-            return parentTNode_1;
-        }
-        var viewOffset = getParentInjectorViewOffset(location);
-        // view offset is 1
-        var parentView = startView;
-        var parentTNode = startView[HOST_NODE];
-        // view offset is superior to 1
-        while (viewOffset > 1) {
-            parentView = parentView[DECLARATION_VIEW];
-            parentTNode = parentView[HOST_NODE];
-            viewOffset--;
+    function executeHooks(currentView, allHooks, checkHooks, checkNoChangesMode) {
+        if (checkNoChangesMode)
+            return;
+        var hooksToCall = currentView[FLAGS] & 2 /* FirstLViewPass */ ? allHooks : checkHooks;
+        if (hooksToCall) {
+            callHooks(currentView, hooksToCall);
         }
-        return parentTNode;
     }
-    var defaultScheduler = (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame || // browser only
-        setTimeout // everything else
-    ).bind(_global);
     /**
-     * Equivalent to ES6 spread, add each item to an array.
+     * Calls lifecycle hooks with their contexts, skipping init hooks if it's not
+     * the first LView pass.
      *
-     * @param items The items to add
-     * @param arr The array to which you want to add the items
+     * @param currentView The current view
+     * @param arr The array in which the hooks are found
      */
-    function addAllToArray(items, arr) {
-        for (var i = 0; i < items.length; i++) {
-            arr.push(items[i]);
+    function callHooks(currentView, arr) {
+        for (var i = 0; i < arr.length; i += 2) {
+            arr[i + 1].call(currentView[arr[i]]);
         }
     }
 
@@ -2100,13 +2189,10 @@
         }
         return currentQueries || (lView[QUERIES] = new QueryType(null, null, null));
     }
-    /**
-     * This property gets set before entering a template.
-     */
-    var creationMode;
-    function getCreationMode() {
-        // top level variables should not be exported for performance reasons (PERF_NOTES.md)
-        return creationMode;
+    /** Checks whether a given view is in creation mode */
+    function isCreationMode(view) {
+        if (view === void 0) { view = lView; }
+        return (view[FLAGS] & 1 /* CreationMode */) === 1 /* CreationMode */;
     }
     /**
      * State of the current view being processed.
@@ -2176,7 +2262,6 @@
         var oldView = lView;
         if (newView) {
             var tView = newView[TVIEW];
-            creationMode = (newView[FLAGS] & 1 /* CreationMode */) === 1 /* CreationMode */;
             firstTemplatePass = tView.firstTemplatePass;
             bindingRootIndex = tView.bindingStartIndex;
         }
@@ -2212,20 +2297,19 @@
      * the direction of traversal (up or down the view tree) a bit clearer.
      *
      * @param newView New state to become active
-     * @param creationOnly An optional boolean to indicate that the view was processed in creation mode
-     * only, i.e. the first update will be done later. Only possible for dynamically created views.
      */
-    function leaveView(newView, creationOnly) {
+    function leaveView(newView) {
         var tView = lView[TVIEW];
-        if (!creationOnly) {
-            if (!checkNoChangesMode) {
-                executeHooks(lView, tView.viewHooks, tView.viewCheckHooks, creationMode);
-            }
+        if (isCreationMode(lView)) {
+            lView[FLAGS] &= ~1 /* CreationMode */;
+        }
+        else {
+            executeHooks(lView, tView.viewHooks, tView.viewCheckHooks, checkNoChangesMode);
             // Views are clean and in update mode after being checked, so these bits are cleared
-            lView[FLAGS] &= ~(1 /* CreationMode */ | 4 /* Dirty */);
+            lView[FLAGS] &= ~(8 /* Dirty */ | 2 /* FirstLViewPass */);
+            lView[FLAGS] |= 32 /* RunInit */;
+            lView[BINDING_INDEX] = tView.bindingStartIndex;
         }
-        lView[FLAGS] |= 16 /* RunInit */;
-        lView[BINDING_INDEX] = tView.bindingStartIndex;
         enterView(newView, null);
     }
 
@@ -2272,7 +2356,7 @@
      *
      * ```
      */
-    var includeViewProviders = false;
+    var includeViewProviders = true;
     function setIncludeViewProviders(v) {
         var oldValue = includeViewProviders;
         includeViewProviders = v;
@@ -2387,7 +2471,7 @@
      */
     function getParentInjectorLocation(tNode, view) {
         if (tNode.parent && tNode.parent.injectorIndex !== -1) {
-            return tNode.parent.injectorIndex; // ViewOffset is 0, AcrossHostBoundary is 0
+            return tNode.parent.injectorIndex; // ViewOffset is 0
         }
         // For most cases, the parent injector index can be found on the host node (e.g. for component
         // or container), so this loop will be skipped, but we must keep the loop here to support
@@ -2396,15 +2480,11 @@
         var viewOffset = 1;
         while (hostTNode && hostTNode.injectorIndex === -1) {
             view = view[DECLARATION_VIEW];
-            hostTNode = view[HOST_NODE];
+            hostTNode = view ? view[HOST_NODE] : null;
             viewOffset++;
         }
-        var acrossHostBoundary = hostTNode && hostTNode.type === 3 /* Element */ ?
-            32768 /* AcrossHostBoundary */ :
-            0;
         return hostTNode ?
-            hostTNode.injectorIndex | (viewOffset << 16 /* ViewOffsetShift */) |
-                acrossHostBoundary :
+            hostTNode.injectorIndex | (viewOffset << 16 /* ViewOffsetShift */) :
             -1;
     }
     /**
@@ -2455,7 +2535,7 @@
         if (attrs) {
             for (var i = 0; i < attrs.length; i = i + 2) {
                 var attrName = attrs[i];
-                if (attrName === 1 /* SelectOnly */)
+                if (attrName === 3 /* SelectOnly */)
                     break;
                 if (attrName == attrNameToInject) {
                     return attrs[i + 1];
@@ -2479,75 +2559,80 @@
      */
     function getOrCreateInjectable(tNode, lView, token, flags, notFoundValue) {
         if (flags === void 0) { flags = exports.InjectFlags.Default; }
-        var bloomHash = bloomHashBitOrFactory(token);
-        // If the ID stored here is a function, this is a special object like ElementRef or TemplateRef
-        // so just call the factory function to create it.
-        if (typeof bloomHash === 'function') {
-            var savePreviousOrParentTNode = getPreviousOrParentTNode();
-            var saveLView = getLView();
-            setTNodeAndViewData(tNode, lView);
-            try {
-                var value = bloomHash();
-                if (value == null && !(flags & exports.InjectFlags.Optional)) {
-                    throw new Error("No provider for " + stringify$1(token) + "!");
-                }
-                else {
-                    return value;
-                }
-            }
-            finally {
-                setTNodeAndViewData(savePreviousOrParentTNode, saveLView);
-            }
-        }
-        else if (typeof bloomHash == 'number') {
-            // If the token has a bloom hash, then it is a token which could be in NodeInjector.
-            // A reference to the previous injector TView that was found while climbing the element injector
-            // tree. This is used to know if viewProviders can be accessed on the current injector.
-            var previousTView = null;
-            var injectorIndex = getInjectorIndex(tNode, lView);
-            var parentLocation = NO_PARENT_INJECTOR;
-            // If we should skip this injector, or if there is no injector on this node, start by searching
-            // the parent injector.
-            if (injectorIndex === -1 || flags & exports.InjectFlags.SkipSelf) {
-                parentLocation = injectorIndex === -1 ? getParentInjectorLocation(tNode, lView) :
-                    lView[injectorIndex + PARENT_INJECTOR];
-                if (!shouldSearchParent(flags, parentLocation)) {
-                    injectorIndex = -1;
-                }
-                else {
-                    previousTView = lView[TVIEW];
-                    injectorIndex = getParentInjectorIndex(parentLocation);
-                    lView = getParentInjectorView(parentLocation, lView);
-                }
-            }
-            // Traverse up the injector tree until we find a potential match or until we know there
-            // *isn't* a match.
-            while (injectorIndex !== -1) {
-                parentLocation = lView[injectorIndex + PARENT_INJECTOR];
-                // Check the current injector. If it matches, see if it contains token.
-                var tView = lView[TVIEW];
-                if (bloomHasToken(bloomHash, injectorIndex, tView.data)) {
-                    // At this point, we have an injector which *may* contain the token, so we step through
-                    // the providers and directives associated with the injector's corresponding node to get
-                    // the instance.
-                    var instance = searchTokensOnInjector(injectorIndex, lView, token, previousTView);
-                    if (instance !== NOT_FOUND) {
-                        return instance;
+        if (tNode) {
+            var bloomHash = bloomHashBitOrFactory(token);
+            // If the ID stored here is a function, this is a special object like ElementRef or TemplateRef
+            // so just call the factory function to create it.
+            if (typeof bloomHash === 'function') {
+                var savePreviousOrParentTNode = getPreviousOrParentTNode();
+                var saveLView = getLView();
+                setTNodeAndViewData(tNode, lView);
+                try {
+                    var value = bloomHash();
+                    if (value == null && !(flags & exports.InjectFlags.Optional)) {
+                        throw new Error("No provider for " + stringify$1(token) + "!");
+                    }
+                    else {
+                        return value;
                     }
                 }
-                if (shouldSearchParent(flags, parentLocation) &&
-                    bloomHasToken(bloomHash, injectorIndex, lView)) {
-                    // The def wasn't found anywhere on this node, so it was a false positive.
-                    // Traverse up the tree and continue searching.
-                    previousTView = tView;
-                    injectorIndex = getParentInjectorIndex(parentLocation);
-                    lView = getParentInjectorView(parentLocation, lView);
+                finally {
+                    setTNodeAndViewData(savePreviousOrParentTNode, saveLView);
+                }
+            }
+            else if (typeof bloomHash == 'number') {
+                // If the token has a bloom hash, then it is a token which could be in NodeInjector.
+                // A reference to the previous injector TView that was found while climbing the element
+                // injector tree. This is used to know if viewProviders can be accessed on the current
+                // injector.
+                var previousTView = null;
+                var injectorIndex = getInjectorIndex(tNode, lView);
+                var parentLocation = NO_PARENT_INJECTOR;
+                var hostTElementNode = flags & exports.InjectFlags.Host ? findComponentView(lView)[HOST_NODE] : null;
+                // If we should skip this injector, or if there is no injector on this node, start by
+                // searching
+                // the parent injector.
+                if (injectorIndex === -1 || flags & exports.InjectFlags.SkipSelf) {
+                    parentLocation = injectorIndex === -1 ? getParentInjectorLocation(tNode, lView) :
+                        lView[injectorIndex + PARENT_INJECTOR];
+                    if (!shouldSearchParent(flags, false)) {
+                        injectorIndex = -1;
+                    }
+                    else {
+                        previousTView = lView[TVIEW];
+                        injectorIndex = getParentInjectorIndex(parentLocation);
+                        lView = getParentInjectorView(parentLocation, lView);
+                    }
                 }
-                else {
-                    // If we should not search parent OR If the ancestor bloom filter value does not have the
-                    // bit corresponding to the directive we can give up on traversing up to find the specific
-                    // injector.
-                    injectorIndex = -1;
+                // Traverse up the injector tree until we find a potential match or until we know there
+                // *isn't* a match.
+                while (injectorIndex !== -1) {
+                    parentLocation = lView[injectorIndex + PARENT_INJECTOR];
+                    // Check the current injector. If it matches, see if it contains token.
+                    var tView = lView[TVIEW];
+                    if (bloomHasToken(bloomHash, injectorIndex, tView.data)) {
+                        // At this point, we have an injector which *may* contain the token, so we step through
+                        // the providers and directives associated with the injector's corresponding node to get
+                        // the instance.
+                        var instance = searchTokensOnInjector(injectorIndex, lView, token, previousTView, flags, hostTElementNode);
+                        if (instance !== NOT_FOUND) {
+                            return instance;
+                        }
+                    }
+                    if (shouldSearchParent(flags, lView[TVIEW].data[injectorIndex + TNODE] === hostTElementNode) &&
+                        bloomHasToken(bloomHash, injectorIndex, lView)) {
+                        // The def wasn't found anywhere on this node, so it was a false positive.
+                        // Traverse up the tree and continue searching.
+                        previousTView = tView;
+                        injectorIndex = getParentInjectorIndex(parentLocation);
+                        lView = getParentInjectorView(parentLocation, lView);
+                    }
+                    else {
+                        // If we should not search parent OR If the ancestor bloom filter value does not have the
+                        // bit corresponding to the directive we can give up on traversing up to find the specific
+                        // injector.
+                        injectorIndex = -1;
+                    }
                 }
             }
         }
@@ -2572,7 +2657,7 @@
         }
     }
     var NOT_FOUND = {};
-    function searchTokensOnInjector(injectorIndex, lView, token, previousTView) {
+    function searchTokensOnInjector(injectorIndex, lView, token, previousTView, flags, hostTElementNode) {
         var currentTView = lView[TVIEW];
         var tNode = currentTView.data[injectorIndex + TNODE];
         // First, we need to determine if view providers can be accessed by the starting element.
@@ -2593,7 +2678,10 @@
             // This means that we just came from the Component's View and therefore are allowed to see
             // into the ViewProviders.
             (previousTView != currentTView && (tNode.type === 3 /* Element */));
-        var injectableIdx = locateDirectiveOrProvider(tNode, lView, token, canAccessViewProviders);
+        // This special case happens when there is a @host on the inject and when we are searching
+        // on the host element node.
+        var isHostSpecialCase = (flags & exports.InjectFlags.Host) && hostTElementNode === tNode;
+        var injectableIdx = locateDirectiveOrProvider(tNode, lView, token, canAccessViewProviders, isHostSpecialCase);
         if (injectableIdx !== null) {
             return getNodeInjectable(currentTView.data, lView, injectableIdx, tNode);
         }
@@ -2608,11 +2696,11 @@
      * @param lView The view we are currently processing
      * @param token Provider token or type of a directive to look for.
      * @param canAccessViewProviders Whether view providers should be considered.
+     * @param isHostSpecialCase Whether the host special case applies.
      * @returns Index of a found directive or provider, or null when none found.
      */
-    function locateDirectiveOrProvider(tNode, lView, token, canAccessViewProviders) {
+    function locateDirectiveOrProvider(tNode, lView, token, canAccessViewProviders, isHostSpecialCase) {
         var tView = lView[TVIEW];
-        var nodeFlags = tNode.flags;
         var nodeProviderIndexes = tNode.providerIndexes;
         var tInjectables = tView.data;
         var injectablesStart = nodeProviderIndexes & 65535 /* ProvidersStartIndexMask */;
@@ -2620,13 +2708,21 @@
         var directiveEnd = tNode.directiveEnd;
         var cptViewProvidersCount = nodeProviderIndexes >> 16 /* CptViewProvidersCountShift */;
         var startingIndex = canAccessViewProviders ? injectablesStart : injectablesStart + cptViewProvidersCount;
-        for (var i = startingIndex; i < directiveEnd; i++) {
+        // When the host special case applies, only the viewProviders and the component are visible
+        var endIndex = isHostSpecialCase ? injectablesStart + cptViewProvidersCount : directiveEnd;
+        for (var i = startingIndex; i < endIndex; i++) {
             var providerTokenOrDef = tInjectables[i];
             if (i < directivesStart && token === providerTokenOrDef ||
                 i >= directivesStart && providerTokenOrDef.type === token) {
                 return i;
             }
         }
+        if (isHostSpecialCase) {
+            var dirDef = tInjectables[directivesStart];
+            if (dirDef && isComponentDef(dirDef) && dirDef.type === token) {
+                return directivesStart;
+            }
+        }
         return null;
     }
     /**
@@ -2709,10 +2805,8 @@
         return !!(value & mask);
     }
     /** Returns true if flags prevent parent injector from being searched for tokens */
-    function shouldSearchParent(flags, parentLocation) {
-        return !(flags & exports.InjectFlags.Self ||
-            (flags & exports.InjectFlags.Host &&
-                (parentLocation & 32768 /* AcrossHostBoundary */)));
+    function shouldSearchParent(flags, isFirstHostTNode) {
+        return !(flags & exports.InjectFlags.Self) && !(flags & exports.InjectFlags.Host && isFirstHostTNode);
     }
     function injectInjector() {
         var tNode = getPreviousOrParentTNode();
@@ -3124,7 +3218,7 @@
             // As long as lView[HOST] is null we know we are part of sub-template such as `*ngIf`
             lView = lView[PARENT];
         }
-        return lView[FLAGS] & 64 /* IsRoot */ ? null : lView[CONTEXT];
+        return lView[FLAGS] & 128 /* IsRoot */ ? null : lView[CONTEXT];
     }
     /**
      * Returns the `RootContext` instance that is associated with
@@ -3229,7 +3323,7 @@
             ngDevMode && assertDefined(componentOrView, 'component');
             lView = readPatchedLView(componentOrView);
         }
-        while (lView && !(lView[FLAGS] & 64 /* IsRoot */)) {
+        while (lView && !(lView[FLAGS] & 128 /* IsRoot */)) {
             lView = lView[PARENT];
         }
         return lView;
@@ -3306,7 +3400,7 @@
                 var secondParam = tCleanup[i++];
                 if (typeof firstParam === 'string') {
                     var name_1 = firstParam;
-                    var listenerElement = lView[secondParam];
+                    var listenerElement = readElementValue(lView[secondParam]);
                     var callback = lCleanup[tCleanup[i++]];
                     var useCaptureOrIndx = tCleanup[i++];
                     // if useCaptureOrIndx is boolean then report it as is.
@@ -3338,55 +3432,6 @@
         return obj.type !== undefined && obj.template !== undefined && obj.declaredInputs !== undefined;
     }
 
-    /**
-     * @license
-     * Copyright Google Inc. All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
-    var __forward_ref__ = getClosureSafeProperty({ __forward_ref__: getClosureSafeProperty });
-    /**
-     * Allows to refer to references which are not yet defined.
-     *
-     * For instance, `forwardRef` is used when the `token` which we need to refer to for the purposes of
-     * DI is declared, but not yet defined. It is also used when the `token` which we use when creating
-     * a query is not yet defined.
-     *
-     * @usageNotes
-     * ### Example
-     * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='forward_ref'}
-     * @publicApi
-     */
-    function forwardRef(forwardRefFn) {
-        forwardRefFn.__forward_ref__ = forwardRef;
-        forwardRefFn.toString = function () { return stringify(this()); };
-        return forwardRefFn;
-    }
-    /**
-     * Lazily retrieves the reference value from a forwardRef.
-     *
-     * Acts as the identity function when given a non-forward-ref value.
-     *
-     * @usageNotes
-     * ### Example
-     *
-     * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='resolve_forward_ref'}
-     *
-     * @see `forwardRef`
-     * @publicApi
-     */
-    function resolveForwardRef(type) {
-        var fn = type;
-        if (typeof fn === 'function' && fn.hasOwnProperty(__forward_ref__) &&
-            fn.__forward_ref__ === forwardRef) {
-            return fn();
-        }
-        else {
-            return type;
-        }
-    }
-
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -3592,7 +3637,7 @@
         else if (isDifferent(lView[bindingIndex], value)) {
             if (ngDevMode && getCheckNoChangesMode()) {
                 if (!devModeEqual(lView[bindingIndex], value)) {
-                    throwErrorIfNoChangesMode(getCreationMode(), lView[bindingIndex], value);
+                    throwErrorIfNoChangesMode(isCreationMode(lView), lView[bindingIndex], value);
                 }
             }
             lView[bindingIndex] = value;
@@ -3809,25 +3854,10 @@
                     else {
                         nextTNode = tNode.next;
                     }
-                }
-            }
-            tNode = nextTNode;
-        }
-    }
-    /**
-     * Given a current view, finds the nearest component's host (LElement).
-     *
-     * @param lView LView for which we want a host element node
-     * @returns The host node
-     */
-    function findComponentView(lView) {
-        var rootTNode = lView[HOST_NODE];
-        while (rootTNode && rootTNode.type === 2 /* View */) {
-            ngDevMode && assertDefined(lView[PARENT], 'lView.parent');
-            lView = lView[PARENT];
-            rootTNode = lView[HOST_NODE];
+                }
+            }
+            tNode = nextTNode;
         }
-        return lView;
     }
     /**
      * NOTE: for performance reasons, the possible actions are inlined within the function instead of
@@ -3946,7 +3976,7 @@
             lView[QUERIES].insertView(index);
         }
         // Sets the attached flag
-        lView[FLAGS] |= 8 /* Attached */;
+        lView[FLAGS] |= 16 /* Attached */;
     }
     /**
      * Detaches a view from a container.
@@ -3975,7 +4005,7 @@
         viewToDetach[CONTAINER_INDEX] = -1;
         viewToDetach[PARENT] = null;
         // Unsets the attached flag
-        viewToDetach[FLAGS] &= ~8 /* Attached */;
+        viewToDetach[FLAGS] &= ~16 /* Attached */;
         return viewToDetach;
     }
     /**
@@ -4008,7 +4038,7 @@
         }
         destroyViewTree(view);
         // Sets the destroyed flag
-        view[FLAGS] |= 32 /* Destroyed */;
+        view[FLAGS] |= 64 /* Destroyed */;
     }
     /**
      * Determines which LViewOrLContainer to jump to when traversing back up the
@@ -4408,7 +4438,7 @@
         ngDevMode && assertDefined(selector[0], 'Selector should have a tag name');
         var mode = 4 /* ELEMENT */;
         var nodeAttrs = tNode.attrs;
-        var selectOnlyMarkerIdx = nodeAttrs ? nodeAttrs.indexOf(1 /* SelectOnly */) : -1;
+        var selectOnlyMarkerIdx = nodeAttrs ? nodeAttrs.indexOf(3 /* SelectOnly */) : -1;
         // When processing ":not" selectors, we skip to the next ":not" if the
         // current one doesn't match
         var skipToNextSelector = false;
@@ -4497,7 +4527,7 @@
                 i += 4;
             }
             else {
-                if (maybeAttrName === 1 /* SelectOnly */) {
+                if (maybeAttrName === 3 /* SelectOnly */) {
                     selectOnlyMode = true;
                 }
                 i += selectOnlyMode ? 1 : 2;
@@ -4599,16 +4629,17 @@
      * found in the LICENSE file at https://angular.io/license
      */
     var ANIMATION_PROP_PREFIX = '@';
-    function createEmptyStylingContext(element, sanitizer, initialStylingValues) {
+    function createEmptyStylingContext(element, sanitizer, initialStyles, initialClasses) {
         return [
-            null,
-            sanitizer || null,
-            initialStylingValues || [null],
-            0,
             0,
+            [null, -1, false, sanitizer || null],
+            initialStyles || [null],
+            initialClasses || [null],
+            [0, 0],
             element || null,
             null,
-            null // PreviousMultiStyleValue
+            null,
+            null,
         ];
     }
     /**
@@ -4621,6 +4652,8 @@
         // each instance gets a copy
         var context = templateStyleContext.slice();
         context[5 /* ElementPosition */] = element;
+        // this will prevent any other directives from extending the context
+        context[0 /* MasterFlagPosition */] |= 32 /* BindingAllocationLocked */;
         return context;
     }
     /**
@@ -4658,8 +4691,8 @@
     }
     function isStylingContext(value) {
         // Not an LView or an LContainer
-        return Array.isArray(value) && typeof value[FLAGS] !== 'number' &&
-            typeof value[ACTIVE_INDEX] !== 'number';
+        return Array.isArray(value) && typeof value[0 /* MasterFlagPosition */] === 'number' &&
+            Array.isArray(value[2 /* InitialStyleValuesPosition */]);
     }
     function isAnimationProp(name) {
         return name[0] === ANIMATION_PROP_PREFIX;
@@ -4723,140 +4756,392 @@
         return getPlayerContext(stylingContext) || allocPlayerContext(stylingContext);
     }
     function getPlayerContext(stylingContext) {
-        return stylingContext[0 /* PlayerContext */];
+        return stylingContext[8 /* PlayerContext */];
     }
     function allocPlayerContext(data) {
-        return data[0 /* PlayerContext */] =
+        return data[8 /* PlayerContext */] =
             [5 /* SinglePlayerBuildersStartPosition */, null, null, null, null];
     }
     function throwInvalidRefError() {
         throw new Error('Only elements that exist in an Angular application can be used for animations');
     }
+    function hasStyling(attrs) {
+        for (var i = 0; i < attrs.length; i++) {
+            var attr = attrs[i];
+            if (attr == 1 /* Classes */ || attr == 2 /* Styles */)
+                return true;
+        }
+        return false;
+    }
+    function hasClassInput(tNode) {
+        return tNode.flags & 8 /* hasClassInput */ ? true : false;
+    }
 
-    var EMPTY_ARR = [];
-    var EMPTY_OBJ = {};
     /**
-     * Creates a styling context template where styling information is stored.
-     * Any styles that are later referenced using `updateStyleProp` must be
-     * passed in within this function. Initial values for those styles are to
-     * be declared after all initial style properties are declared (this change in
-     * mode between declarations and initial styles is made possible using a special
-     * enum value found in `definition.ts`).
-     *
-     * @param initialStyleDeclarations a list of style declarations and initial style values
-     *    that are used later within the styling context.
-     *
-     *    -> ['width', 'height', SPECIAL_ENUM_VAL, 'width', '100px']
-     *       This implies that `width` and `height` will be later styled and that the `width`
-     *       property has an initial value of `100px`.
-     *
-     * @param initialClassDeclarations a list of class declarations and initial class values
-     *    that are used later within the styling context.
-     *
-     *    -> ['foo', 'bar', SPECIAL_ENUM_VAL, 'foo', true]
-     *       This implies that `foo` and `bar` will be later styled and that the `foo`
-     *       class will be applied to the element as an initial class since it's true
-     */
-    function createStylingContextTemplate(initialClassDeclarations, initialStyleDeclarations, styleSanitizer, onlyProcessSingleClasses) {
-        var initialStylingValues = [null];
-        var context = createEmptyStylingContext(null, styleSanitizer, initialStylingValues);
-        // we use two maps since a class name might collide with a CSS style prop
-        var stylesLookup = {};
-        var classesLookup = {};
-        var totalStyleDeclarations = 0;
-        if (initialStyleDeclarations) {
-            var hasPassedDeclarations = false;
-            for (var i = 0; i < initialStyleDeclarations.length; i++) {
-                var v = initialStyleDeclarations[i];
-                // this flag value marks where the declarations end the initial values begin
-                if (v === 1 /* VALUES_MODE */) {
-                    hasPassedDeclarations = true;
+     * This file includes the code to power all styling-binding operations in Angular.
+     *
+     * These include:
+     * [style]="myStyleObj"
+     * [class]="myClassObj"
+     * [style.prop]="myPropValue"
+     * [class.name]="myClassValue"
+     *
+     * There are many different ways in which these functions below are called. Please see
+     * `interfaces/styles.ts` to get a better idea of how the styling algorithm works.
+     */
+    /**
+     * Creates a new StylingContext an fills it with the provided static styling attribute values.
+     */
+    function initializeStaticContext(attrs) {
+        var context = createEmptyStylingContext();
+        var initialClasses = context[3 /* InitialClassValuesPosition */] =
+            [null];
+        var initialStyles = context[2 /* InitialStyleValuesPosition */] =
+            [null];
+        // The attributes array has marker values (numbers) indicating what the subsequent
+        // values represent. When we encounter a number, we set the mode to that type of attribute.
+        var mode = -1;
+        for (var i = 0; i < attrs.length; i++) {
+            var attr = attrs[i];
+            if (typeof attr == 'number') {
+                mode = attr;
+            }
+            else if (mode === 2 /* Styles */) {
+                initialStyles.push(attr, attrs[++i]);
+            }
+            else if (mode === 1 /* Classes */) {
+                initialClasses.push(attr, true);
+            }
+            else if (mode === 3 /* SelectOnly */) {
+                break;
+            }
+        }
+        return context;
+    }
+    /**
+     * Designed to update an existing styling context with new static styling
+     * data (classes and styles).
+     *
+     * @param context the existing styling context
+     * @param attrs an array of new static styling attributes that will be
+     *              assigned to the context
+     * @param directive the directive instance with which static data is associated with.
+     */
+    function patchContextWithStaticAttrs(context, attrs, directive) {
+        // If the styling context has already been patched with the given directive's bindings,
+        // then there is no point in doing it again. The reason why this may happen (the directive
+        // styling being patched twice) is because the `stylingBinding` function is called each time
+        // an element is created (both within a template function and within directive host bindings).
+        var directives = context[1 /* DirectiveRegistryPosition */];
+        if (getDirectiveRegistryValuesIndexOf(directives, directive) == -1) {
+            // this is a new directive which we have not seen yet.
+            directives.push(directive, -1, false, null);
+            var initialClasses = null;
+            var initialStyles = null;
+            var mode = -1;
+            for (var i = 0; i < attrs.length; i++) {
+                var attr = attrs[i];
+                if (typeof attr == 'number') {
+                    mode = attr;
+                }
+                else if (mode == 1 /* Classes */) {
+                    initialClasses = initialClasses || context[3 /* InitialClassValuesPosition */];
+                    patchInitialStylingValue(initialClasses, attr, true);
+                }
+                else if (mode == 2 /* Styles */) {
+                    initialStyles = initialStyles || context[2 /* InitialStyleValuesPosition */];
+                    patchInitialStylingValue(initialStyles, attr, attrs[++i]);
+                }
+            }
+        }
+    }
+    /**
+     * Designed to add a style or class value into the existing set of initial styles.
+     *
+     * The function will search and figure out if a style/class value is already present
+     * within the provided initial styling array. If and when a style/class value is not
+     * present (or if it's value is falsy) then it will be inserted/updated in the list
+     * of initial styling values.
+     */
+    function patchInitialStylingValue(initialStyling, prop, value) {
+        // Even values are keys; Odd numbers are values; Search keys only
+        for (var i = 1 /* KeyValueStartPosition */; i < initialStyling.length;) {
+            var key = initialStyling[i];
+            if (key === prop) {
+                var existingValue = initialStyling[i + 1 /* ValueOffset */];
+                // If there is no previous style value (when `null`) or no previous class
+                // applied (when `false`) then we update the the newly given value.
+                if (existingValue == null || existingValue == false) {
+                    initialStyling[i + 1 /* ValueOffset */] = value;
+                }
+                return;
+            }
+            i = i + 2 /* Size */;
+        }
+        // We did not find existing key, add a new one.
+        initialStyling.push(prop, value);
+    }
+    /**
+     * Runs through the initial styling data present in the context and renders
+     * them via the renderer on the element.
+     */
+    function renderInitialStylesAndClasses(element, context, renderer) {
+        var initialClasses = context[3 /* InitialClassValuesPosition */];
+        renderInitialStylingValues(element, renderer, initialClasses, true);
+        var initialStyles = context[2 /* InitialStyleValuesPosition */];
+        renderInitialStylingValues(element, renderer, initialStyles, false);
+    }
+    /**
+     * This is a helper function designed to render each entry present within the
+     * provided list of initialStylingValues.
+     */
+    function renderInitialStylingValues(element, renderer, initialStylingValues, isEntryClassBased) {
+        for (var i = 1 /* KeyValueStartPosition */; i < initialStylingValues.length; i += 2 /* Size */) {
+            var value = initialStylingValues[i + 1 /* ValueOffset */];
+            if (value) {
+                if (isEntryClassBased) {
+                    setClass(element, initialStylingValues[i + 0 /* PropOffset */], true, renderer, null);
                 }
                 else {
-                    var prop = v;
-                    if (hasPassedDeclarations) {
-                        var value = initialStyleDeclarations[++i];
-                        initialStylingValues.push(value);
-                        stylesLookup[prop] = initialStylingValues.length - 1;
-                    }
-                    else {
-                        totalStyleDeclarations++;
-                        stylesLookup[prop] = 0;
-                    }
+                    setStyle(element, initialStylingValues[i + 0 /* PropOffset */], value, renderer, null);
                 }
             }
         }
-        // make where the class offsets begin
-        context[4 /* ClassOffsetPosition */] = totalStyleDeclarations;
-        var initialStaticClasses = onlyProcessSingleClasses ? [] : null;
-        if (initialClassDeclarations) {
-            var hasPassedDeclarations = false;
-            for (var i = 0; i < initialClassDeclarations.length; i++) {
-                var v = initialClassDeclarations[i];
-                // this flag value marks where the declarations end the initial values begin
-                if (v === 1 /* VALUES_MODE */) {
-                    hasPassedDeclarations = true;
+    }
+    /**
+     * Adds in new binding values to a styling context.
+     *
+     * If a directive value is provided then all provided class/style binding names will
+     * reference the provided directive.
+     *
+     * @param context the existing styling context
+     * @param directiveRef the directive that the new bindings will reference
+     * @param classBindingNames an array of class binding names that will be added to the context
+     * @param styleBindingNames an array of style binding names that will be added to the context
+     * @param styleSanitizer an optional sanitizer that handle all sanitization on for each of
+     *    the bindings added to the context. Note that if a directive is provided then the sanitizer
+     *    instance will only be active if and when the directive updates the bindings that it owns.
+     */
+    function updateContextWithBindings(context, directiveRef, classBindingNames, styleBindingNames, styleSanitizer, onlyProcessSingleClasses) {
+        if (context[0 /* MasterFlagPosition */] & 32 /* BindingAllocationLocked */)
+            return;
+        // this means the context has already been patched with the directive's bindings
+        var directiveIndex = findOrPatchDirectiveIntoRegistry(context, directiveRef, styleSanitizer);
+        if (directiveIndex === -1) {
+            // this means the directive has already been patched in ... No point in doing anything
+            return;
+        }
+        // there are alot of variables being used below to track where in the context the new
+        // binding values will be placed. Because the context consists of multiple types of
+        // entries (single classes/styles and multi classes/styles) alot of the index positions
+        // need to be computed ahead of time and the context needs to be extended before the values
+        // are inserted in.
+        var singlePropOffsetValues = context[4 /* SinglePropOffsetPositions */];
+        var totalCurrentClassBindings = singlePropOffsetValues[1 /* ClassesCountPosition */];
+        var totalCurrentStyleBindings = singlePropOffsetValues[0 /* StylesCountPosition */];
+        var classesOffset = totalCurrentClassBindings * 4 /* Size */;
+        var stylesOffset = totalCurrentStyleBindings * 4 /* Size */;
+        var singleStylesStartIndex = 9 /* SingleStylesStartPosition */;
+        var singleClassesStartIndex = singleStylesStartIndex + stylesOffset;
+        var multiStylesStartIndex = singleClassesStartIndex + classesOffset;
+        var multiClassesStartIndex = multiStylesStartIndex + stylesOffset;
+        // because we're inserting more bindings into the context, this means that the
+        // binding values need to be referenced the singlePropOffsetValues array so that
+        // the template/directive can easily find them inside of the `elementStyleProp`
+        // and the `elementClassProp` functions without iterating through the entire context.
+        // The first step to setting up these reference points is to mark how many bindings
+        // are being added. Even if these bindings already exist in the context, the directive
+        // or template code will still call them unknowingly. Therefore the total values need
+        // to be registered so that we know how many bindings are assigned to each directive.
+        var currentSinglePropsLength = singlePropOffsetValues.length;
+        singlePropOffsetValues.push(styleBindingNames ? styleBindingNames.length : 0, classBindingNames ? classBindingNames.length : 0);
+        // the code below will check to see if a new style binding already exists in the context
+        // if so then there is no point in inserting it into the context again. Whether or not it
+        // exists the styling offset code will now know exactly where it is
+        var insertionOffset = 0;
+        var filteredStyleBindingNames = [];
+        if (styleBindingNames && styleBindingNames.length) {
+            for (var i_1 = 0; i_1 < styleBindingNames.length; i_1++) {
+                var name_1 = styleBindingNames[i_1];
+                var singlePropIndex = getMatchingBindingIndex(context, name_1, singleStylesStartIndex, singleClassesStartIndex);
+                if (singlePropIndex == -1) {
+                    singlePropIndex = singleClassesStartIndex + insertionOffset;
+                    insertionOffset += 4 /* Size */;
+                    filteredStyleBindingNames.push(name_1);
+                }
+                singlePropOffsetValues.push(singlePropIndex);
+            }
+        }
+        // just like with the style binding loop above, the new class bindings get the same treatment...
+        var filteredClassBindingNames = [];
+        if (classBindingNames && classBindingNames.length) {
+            for (var i_2 = 0; i_2 < classBindingNames.length; i_2++) {
+                var name_2 = classBindingNames[i_2];
+                var singlePropIndex = getMatchingBindingIndex(context, name_2, singleClassesStartIndex, multiStylesStartIndex);
+                if (singlePropIndex == -1) {
+                    singlePropIndex = multiStylesStartIndex + insertionOffset;
+                    insertionOffset += 4 /* Size */;
+                    filteredClassBindingNames.push(name_2);
                 }
                 else {
-                    var className = v;
-                    if (hasPassedDeclarations) {
-                        var value = initialClassDeclarations[++i];
-                        initialStylingValues.push(value);
-                        classesLookup[className] = initialStylingValues.length - 1;
-                        initialStaticClasses && initialStaticClasses.push(className);
-                    }
-                    else {
-                        classesLookup[className] = 0;
+                    singlePropIndex += filteredStyleBindingNames.length * 4 /* Size */;
+                }
+                singlePropOffsetValues.push(singlePropIndex);
+            }
+        }
+        // because new styles are being inserted, this means the existing collection of style offset
+        // index values are incorrect (they point to the wrong values). The code below will run through
+        // the entire offset array and update the existing set of index values to point to their new
+        // locations while taking the new binding values into consideration.
+        var i = 2 /* ValueStartPosition */;
+        if (filteredStyleBindingNames.length) {
+            while (i < currentSinglePropsLength) {
+                var totalStyles = singlePropOffsetValues[i + 0 /* StylesCountPosition */];
+                var totalClasses = singlePropOffsetValues[i + 1 /* ClassesCountPosition */];
+                if (totalClasses) {
+                    var start = i + 2 /* ValueStartPosition */ + totalStyles;
+                    for (var j = start; j < start + totalClasses; j++) {
+                        singlePropOffsetValues[j] += filteredStyleBindingNames.length * 4 /* Size */;
                     }
                 }
+                var total = totalStyles + totalClasses;
+                i += 2 /* ValueStartPosition */ + total;
             }
         }
-        var styleProps = Object.keys(stylesLookup);
-        var classNames = Object.keys(classesLookup);
-        var classNamesIndexStart = styleProps.length;
-        var totalProps = styleProps.length + classNames.length;
-        // *2 because we are filling for both single and multi style spaces
-        var maxLength = totalProps * 4 /* Size */ * 2 + 8 /* SingleStylesStartPosition */;
-        // we need to fill the array from the start so that we can access
-        // both the multi and the single array positions in the same loop block
-        for (var i = 8 /* SingleStylesStartPosition */; i < maxLength; i++) {
+        var totalNewEntries = filteredClassBindingNames.length + filteredStyleBindingNames.length;
+        // in the event that there are new style values being inserted, all existing class and style
+        // bindings need to have their pointer values offsetted with the new amount of space that is
+        // used for the new style/class bindings.
+        for (var i_3 = singleStylesStartIndex; i_3 < context.length; i_3 += 4 /* Size */) {
+            var isMultiBased = i_3 >= multiStylesStartIndex;
+            var isClassBased = i_3 >= (isMultiBased ? multiClassesStartIndex : singleClassesStartIndex);
+            var flag = getPointers(context, i_3);
+            var staticIndex = getInitialIndex(flag);
+            var singleOrMultiIndex = getMultiOrSingleIndex(flag);
+            if (isMultiBased) {
+                singleOrMultiIndex +=
+                    isClassBased ? (filteredStyleBindingNames.length * 4 /* Size */) : 0;
+            }
+            else {
+                singleOrMultiIndex += (totalNewEntries * 4 /* Size */) +
+                    ((isClassBased ? filteredStyleBindingNames.length : 0) * 4 /* Size */);
+            }
+            setFlag(context, i_3, pointers(flag, staticIndex, singleOrMultiIndex));
+        }
+        // this is where we make space in the context for the new style bindings
+        for (var i_4 = 0; i_4 < filteredStyleBindingNames.length * 4 /* Size */; i_4++) {
+            context.splice(multiClassesStartIndex, 0, null);
+            context.splice(singleClassesStartIndex, 0, null);
+            singleClassesStartIndex++;
+            multiStylesStartIndex++;
+            multiClassesStartIndex += 2; // both single + multi slots were inserted
+        }
+        // this is where we make space in the context for the new class bindings
+        for (var i_5 = 0; i_5 < filteredClassBindingNames.length * 4 /* Size */; i_5++) {
+            context.splice(multiStylesStartIndex, 0, null);
             context.push(null);
-        }
-        var singleStart = 8 /* SingleStylesStartPosition */;
-        var multiStart = totalProps * 4 /* Size */ + 8 /* SingleStylesStartPosition */;
-        // fill single and multi-level styles
-        for (var i = 0; i < totalProps; i++) {
-            var isClassBased_1 = i >= classNamesIndexStart;
-            var prop = isClassBased_1 ? classNames[i - classNamesIndexStart] : styleProps[i];
-            var indexForInitial = isClassBased_1 ? classesLookup[prop] : stylesLookup[prop];
-            var initialValue = initialStylingValues[indexForInitial];
-            var indexForMulti = i * 4 /* Size */ + multiStart;
-            var indexForSingle = i * 4 /* Size */ + singleStart;
-            var initialFlag = prepareInitialFlag(prop, isClassBased_1, styleSanitizer || null);
-            setFlag(context, indexForSingle, pointers(initialFlag, indexForInitial, indexForMulti));
-            setProp(context, indexForSingle, prop);
-            setValue(context, indexForSingle, null);
-            setPlayerBuilderIndex(context, indexForSingle, 0);
-            var flagForMulti = initialFlag | (initialValue !== null ? 1 /* Dirty */ : 0 /* None */);
-            setFlag(context, indexForMulti, pointers(flagForMulti, indexForInitial, indexForSingle));
-            setProp(context, indexForMulti, prop);
-            setValue(context, indexForMulti, null);
-            setPlayerBuilderIndex(context, indexForMulti, 0);
-        }
+            multiStylesStartIndex++;
+            multiClassesStartIndex++;
+        }
+        var initialClasses = context[3 /* InitialClassValuesPosition */];
+        var initialStyles = context[2 /* InitialStyleValuesPosition */];
+        // the code below will insert each new entry into the context and assign the appropriate
+        // flags and index values to them. It's important this runs at the end of this function
+        // because the context, property offset and index values have all been computed just before.
+        for (var i_6 = 0; i_6 < totalNewEntries; i_6++) {
+            var entryIsClassBased = i_6 >= filteredStyleBindingNames.length;
+            var adjustedIndex = entryIsClassBased ? (i_6 - filteredStyleBindingNames.length) : i_6;
+            var propName = entryIsClassBased ? filteredClassBindingNames[adjustedIndex] :
+                filteredStyleBindingNames[adjustedIndex];
+            var multiIndex = void 0, singleIndex = void 0;
+            if (entryIsClassBased) {
+                multiIndex = multiClassesStartIndex +
+                    ((totalCurrentClassBindings + adjustedIndex) * 4 /* Size */);
+                singleIndex = singleClassesStartIndex +
+                    ((totalCurrentClassBindings + adjustedIndex) * 4 /* Size */);
+            }
+            else {
+                multiIndex =
+                    multiStylesStartIndex + ((totalCurrentStyleBindings + adjustedIndex) * 4 /* Size */);
+                singleIndex = singleStylesStartIndex +
+                    ((totalCurrentStyleBindings + adjustedIndex) * 4 /* Size */);
+            }
+            // if a property is not found in the initial style values list then it
+            // is ALWAYS added incase a follow-up directive introduces the same initial
+            // style/class value later on.
+            var initialValuesToLookup = entryIsClassBased ? initialClasses : initialStyles;
+            var indexForInitial = getInitialStylingValuesIndexOf(initialValuesToLookup, propName);
+            if (indexForInitial === -1) {
+                indexForInitial = initialValuesToLookup.length + 1 /* ValueOffset */;
+                initialValuesToLookup.push(propName, entryIsClassBased ? false : null);
+            }
+            else {
+                indexForInitial += 1 /* ValueOffset */;
+            }
+            var initialFlag = prepareInitialFlag(context, propName, entryIsClassBased, styleSanitizer || null);
+            setFlag(context, singleIndex, pointers(initialFlag, indexForInitial, multiIndex));
+            setProp(context, singleIndex, propName);
+            setValue(context, singleIndex, null);
+            setPlayerBuilderIndex(context, singleIndex, 0, directiveIndex);
+            setFlag(context, multiIndex, pointers(initialFlag, indexForInitial, singleIndex));
+            setProp(context, multiIndex, propName);
+            setValue(context, multiIndex, null);
+            setPlayerBuilderIndex(context, multiIndex, 0, directiveIndex);
+        }
+        // the total classes/style values are updated so the next time the context is patched
+        // additional style/class bindings from another directive then it knows exactly where
+        // to insert them in the context
+        singlePropOffsetValues[1 /* ClassesCountPosition */] =
+            totalCurrentClassBindings + filteredClassBindingNames.length;
+        singlePropOffsetValues[0 /* StylesCountPosition */] =
+            totalCurrentStyleBindings + filteredStyleBindingNames.length;
         // there is no initial value flag for the master index since it doesn't
         // reference an initial style value
-        var masterFlag = pointers(0, 0, multiStart) |
+        var masterFlag = pointers(0, 0, multiStylesStartIndex) |
             (onlyProcessSingleClasses ? 16 /* OnlyProcessSingleClasses */ : 0);
-        setFlag(context, 3 /* MasterFlagPosition */, masterFlag);
-        setContextDirty(context, initialStylingValues.length > 1);
-        if (initialStaticClasses) {
-            context[6 /* PreviousOrCachedMultiClassValue */] = initialStaticClasses.join(' ');
+        setFlag(context, 0 /* MasterFlagPosition */, masterFlag);
+    }
+    /**
+     * Searches through the existing registry of directives
+     */
+    function findOrPatchDirectiveIntoRegistry(context, directiveRef, styleSanitizer) {
+        var directiveRefs = context[1 /* DirectiveRegistryPosition */];
+        var nextOffsetInsertionIndex = context[4 /* SinglePropOffsetPositions */].length;
+        var directiveIndex;
+        var detectedIndex = getDirectiveRegistryValuesIndexOf(directiveRefs, directiveRef);
+        if (detectedIndex === -1) {
+            directiveIndex = directiveRefs.length / 4 /* Size */;
+            directiveRefs.push(directiveRef, nextOffsetInsertionIndex, false, styleSanitizer || null);
         }
-        return context;
+        else {
+            var singlePropStartPosition = detectedIndex + 1 /* SinglePropValuesIndexOffset */;
+            if (directiveRefs[singlePropStartPosition] >= 0) {
+                // the directive has already been patched into the context
+                return -1;
+            }
+            directiveIndex = detectedIndex / 4 /* Size */;
+            // because the directive already existed this means that it was set during elementHostAttrs or
+            // elementStart which means that the binding values were not here. Therefore, the values below
+            // need to be applied so that single class and style properties can be assigned later.
+            var singlePropPositionIndex = detectedIndex + 1 /* SinglePropValuesIndexOffset */;
+            directiveRefs[singlePropPositionIndex] = nextOffsetInsertionIndex;
+            // the sanitizer is also apart of the binding process and will be used when bindings are
+            // applied.
+            var styleSanitizerIndex = detectedIndex + 3 /* StyleSanitizerOffset */;
+            directiveRefs[styleSanitizerIndex] = styleSanitizer || null;
+        }
+        return directiveIndex;
+    }
+    function getMatchingBindingIndex(context, bindingName, start, end) {
+        for (var j = start; j < end; j += 4 /* Size */) {
+            if (getProp(context, j) === bindingName)
+                return j;
+        }
+        return -1;
     }
     /**
      * Sets and resolves all `multi` styling on an `StylingContext` so that they can be
-     * applied to the element once `renderStyleAndClassBindings` is called.
+     * applied to the element once `renderStyling` is called.
      *
      * All missing styles/class (any values that are not provided in the new `styles`
      * or `classes` params) will resolve to `null` within their respective positions
@@ -4867,8 +5152,9 @@
      * @param classesInput The key/value map of CSS class names that will be used for the update.
      * @param stylesInput The key/value map of CSS styles that will be used for the update.
      */
-    function updateStylingMap(context, classesInput, stylesInput) {
+    function updateStylingMap(context, classesInput, stylesInput, directiveRef) {
         stylesInput = stylesInput || null;
+        var directiveIndex = getDirectiveIndexFromRegistry(context, directiveRef || null);
         var element = context[5 /* ElementPosition */];
         var classesPlayerBuilder = classesInput instanceof BoundPlayerFactory ?
             new ClassAndStylePlayerBuilder(classesInput, element, 1 /* Class */) :
@@ -4882,13 +5168,13 @@
         var stylesValue = stylesPlayerBuilder ? stylesInput.value : stylesInput;
         // early exit (this is what's done to avoid using ctx.bind() to cache the value)
         var ignoreAllClassUpdates = limitToSingleClasses(context) || classesValue === NO_CHANGE ||
-            classesValue === context[6 /* PreviousOrCachedMultiClassValue */];
-        var ignoreAllStyleUpdates = stylesValue === NO_CHANGE || stylesValue === context[7 /* PreviousMultiStyleValue */];
+            classesValue === context[6 /* CachedClassValueOrInitialClassString */];
+        var ignoreAllStyleUpdates = stylesValue === NO_CHANGE || stylesValue === context[7 /* CachedStyleValue */];
         if (ignoreAllClassUpdates && ignoreAllStyleUpdates)
             return;
-        context[6 /* PreviousOrCachedMultiClassValue */] = classesValue;
-        context[7 /* PreviousMultiStyleValue */] = stylesValue;
-        var classNames = EMPTY_ARR;
+        context[6 /* CachedClassValueOrInitialClassString */] = classesValue;
+        context[7 /* CachedStyleValue */] = stylesValue;
+        var classNames = EMPTY_ARRAY;
         var applyAllClasses = false;
         var playerBuildersAreDirty = false;
         var classesPlayerBuilderIndex = classesPlayerBuilder ? 1 /* ClassMapPlayerBuilderPosition */ : 0;
@@ -4911,11 +5197,11 @@
                 applyAllClasses = true;
             }
             else {
-                classNames = classesValue ? Object.keys(classesValue) : EMPTY_ARR;
+                classNames = classesValue ? Object.keys(classesValue) : EMPTY_ARRAY;
             }
         }
         var classes = (classesValue || EMPTY_OBJ);
-        var styleProps = stylesValue ? Object.keys(stylesValue) : EMPTY_ARR;
+        var styleProps = stylesValue ? Object.keys(stylesValue) : EMPTY_ARRAY;
         var styles = stylesValue || EMPTY_OBJ;
         var classesStartIndex = styleProps.length;
         var multiStartIndex = getMultiStartIndex(context);
@@ -4927,27 +5213,31 @@
         // styles differ with respect to the context. Later if the context/styles/classes
         // are off-balance then they will be dealt in another loop after this one
         while (ctxIndex < context.length && propIndex < propLimit) {
-            var isClassBased_2 = propIndex >= classesStartIndex;
-            var processValue = (!isClassBased_2 && !ignoreAllStyleUpdates) || (isClassBased_2 && !ignoreAllClassUpdates);
+            var isClassBased = propIndex >= classesStartIndex;
+            var processValue = (!isClassBased && !ignoreAllStyleUpdates) || (isClassBased && !ignoreAllClassUpdates);
             // when there is a cache-hit for a string-based class then we should
             // avoid doing any work diffing any of the changes
             if (processValue) {
-                var adjustedPropIndex = isClassBased_2 ? propIndex - classesStartIndex : propIndex;
-                var newProp = isClassBased_2 ? classNames[adjustedPropIndex] : styleProps[adjustedPropIndex];
-                var newValue = isClassBased_2 ? (applyAllClasses ? true : classes[newProp]) : styles[newProp];
-                var playerBuilderIndex = isClassBased_2 ? classesPlayerBuilderIndex : stylesPlayerBuilderIndex;
+                var adjustedPropIndex = isClassBased ? propIndex - classesStartIndex : propIndex;
+                var newProp = isClassBased ? classNames[adjustedPropIndex] : styleProps[adjustedPropIndex];
+                var newValue = isClassBased ? (applyAllClasses ? true : classes[newProp]) : styles[newProp];
+                var playerBuilderIndex = isClassBased ? classesPlayerBuilderIndex : stylesPlayerBuilderIndex;
                 var prop = getProp(context, ctxIndex);
                 if (prop === newProp) {
                     var value = getValue(context, ctxIndex);
                     var flag = getPointers(context, ctxIndex);
-                    setPlayerBuilderIndex(context, ctxIndex, playerBuilderIndex);
+                    setPlayerBuilderIndex(context, ctxIndex, playerBuilderIndex, directiveIndex);
                     if (hasValueChanged(flag, value, newValue)) {
                         setValue(context, ctxIndex, newValue);
                         playerBuildersAreDirty = playerBuildersAreDirty || !!playerBuilderIndex;
                         var initialValue = getInitialValue(context, flag);
-                        // there is no point in setting this to dirty if the previously
-                        // rendered value was being referenced by the initial style (or null)
-                        if (hasValueChanged(flag, initialValue, newValue)) {
+                        // SKIP IF INITIAL CHECK
+                        // If the former `value` is `null` then it means that an initial value
+                        // could be being rendered on screen. If that is the case then there is
+                        // no point in updating the value incase it matches. In other words if the
+                        // new value is the exact same as the previously rendered value (which
+                        // happens to be the initial value) then do nothing.
+                        if (value != null || hasValueChanged(flag, initialValue, newValue)) {
                             setDirty(context, ctxIndex, true);
                             dirty = true;
                         }
@@ -4963,7 +5253,8 @@
                         if (hasValueChanged(flagToCompare, valueToCompare, newValue)) {
                             var initialValue = getInitialValue(context, flagToCompare);
                             setValue(context, ctxIndex, newValue);
-                            if (hasValueChanged(flagToCompare, initialValue, newValue)) {
+                            // same if statement logic as above (look for SKIP IF INITIAL CHECK).
+                            if (valueToCompare != null || hasValueChanged(flagToCompare, initialValue, newValue)) {
                                 setDirty(context, ctxIndex, true);
                                 playerBuildersAreDirty = playerBuildersAreDirty || !!playerBuilderIndex;
                                 dirty = true;
@@ -4972,9 +5263,9 @@
                     }
                     else {
                         // we only care to do this if the insertion is in the middle
-                        var newFlag = prepareInitialFlag(newProp, isClassBased_2, getStyleSanitizer(context));
+                        var newFlag = prepareInitialFlag(context, newProp, isClassBased, getStyleSanitizer(context, directiveIndex));
                         playerBuildersAreDirty = playerBuildersAreDirty || !!playerBuilderIndex;
-                        insertNewMultiProperty(context, ctxIndex, isClassBased_2, newProp, newFlag, newValue, playerBuilderIndex);
+                        insertNewMultiProperty(context, ctxIndex, isClassBased, newProp, newFlag, newValue, directiveIndex, playerBuilderIndex);
                         dirty = true;
                     }
                 }
@@ -4987,19 +5278,19 @@
         // case the  goal is to "remove" them from the context (by nullifying)
         while (ctxIndex < context.length) {
             var flag = getPointers(context, ctxIndex);
-            var isClassBased_3 = (flag & 2 /* Class */) === 2 /* Class */;
-            var processValue = (!isClassBased_3 && !ignoreAllStyleUpdates) || (isClassBased_3 && !ignoreAllClassUpdates);
+            var isClassBased = (flag & 2 /* Class */) === 2 /* Class */;
+            var processValue = (!isClassBased && !ignoreAllStyleUpdates) || (isClassBased && !ignoreAllClassUpdates);
             if (processValue) {
                 var value = getValue(context, ctxIndex);
-                var doRemoveValue = valueExists(value, isClassBased_3);
+                var doRemoveValue = valueExists(value, isClassBased);
                 if (doRemoveValue) {
                     setDirty(context, ctxIndex, true);
                     setValue(context, ctxIndex, null);
                     // we keep the player factory the same so that the `nulled` value can
                     // be instructed into the player because removing a style and/or a class
                     // is a valid animation player instruction.
-                    var playerBuilderIndex = isClassBased_3 ? classesPlayerBuilderIndex : stylesPlayerBuilderIndex;
-                    setPlayerBuilderIndex(context, ctxIndex, playerBuilderIndex);
+                    var playerBuilderIndex = isClassBased ? classesPlayerBuilderIndex : stylesPlayerBuilderIndex;
+                    setPlayerBuilderIndex(context, ctxIndex, playerBuilderIndex, directiveIndex);
                     dirty = true;
                 }
             }
@@ -5008,31 +5299,46 @@
         // this means that there are left-over properties in the context that
         // were not detected in the context during the loop above. In that
         // case we want to add the new entries into the list
-        var sanitizer = getStyleSanitizer(context);
+        var sanitizer = getStyleSanitizer(context, directiveIndex);
         while (propIndex < propLimit) {
-            var isClassBased_4 = propIndex >= classesStartIndex;
-            var processValue = (!isClassBased_4 && !ignoreAllStyleUpdates) || (isClassBased_4 && !ignoreAllClassUpdates);
+            var isClassBased = propIndex >= classesStartIndex;
+            var processValue = (!isClassBased && !ignoreAllStyleUpdates) || (isClassBased && !ignoreAllClassUpdates);
             if (processValue) {
-                var adjustedPropIndex = isClassBased_4 ? propIndex - classesStartIndex : propIndex;
-                var prop = isClassBased_4 ? classNames[adjustedPropIndex] : styleProps[adjustedPropIndex];
-                var value = isClassBased_4 ? (applyAllClasses ? true : classes[prop]) : styles[prop];
-                var flag = prepareInitialFlag(prop, isClassBased_4, sanitizer) | 1 /* Dirty */;
-                var playerBuilderIndex = isClassBased_4 ? classesPlayerBuilderIndex : stylesPlayerBuilderIndex;
-                context.push(flag, prop, value, playerBuilderIndex);
+                var adjustedPropIndex = isClassBased ? propIndex - classesStartIndex : propIndex;
+                var prop = isClassBased ? classNames[adjustedPropIndex] : styleProps[adjustedPropIndex];
+                var value = isClassBased ? (applyAllClasses ? true : classes[prop]) : styles[prop];
+                var flag = prepareInitialFlag(context, prop, isClassBased, sanitizer) | 1 /* Dirty */;
+                var playerBuilderIndex = isClassBased ? classesPlayerBuilderIndex : stylesPlayerBuilderIndex;
+                var ctxIndex_1 = context.length;
+                context.push(flag, prop, value, 0);
+                setPlayerBuilderIndex(context, ctxIndex_1, playerBuilderIndex, directiveIndex);
                 dirty = true;
             }
             propIndex++;
         }
         if (dirty) {
             setContextDirty(context, true);
+            setDirectiveDirty(context, directiveIndex, true);
         }
         if (playerBuildersAreDirty) {
             setContextPlayersDirty(context, true);
         }
     }
     /**
-     * Sets and resolves a single styling property/value on the provided `StylingContext` so
-     * that they can be applied to the element once `renderStyleAndClassBindings` is called.
+     * This method will toggle the referenced CSS class (by the provided index)
+     * within the given context.
+     *
+     * @param context The styling context that will be updated with the
+     *    newly provided class value.
+     * @param offset The index of the CSS class which is being updated.
+     * @param addOrRemove Whether or not to add or remove the CSS class
+     */
+    function updateClassProp(context, offset, addOrRemove, directiveRef) {
+        _updateSingleStylingValue(context, offset, addOrRemove, true, directiveRef);
+    }
+    /**
+     * Sets and resolves a single style value on the provided `StylingContext` so
+     * that they can be applied to the element once `renderStyling` is called.
      *
      * Note that prop-level styling values are considered higher priority than any styling that
      * has been applied using `updateStylingMap`, therefore, when styling values are rendered
@@ -5041,20 +5347,29 @@
      *
      * @param context The styling context that will be updated with the
      *    newly provided style value.
-     * @param index The index of the property which is being updated.
+     * @param offset The index of the property which is being updated.
      * @param value The CSS style value that will be assigned
+     * @param directiveRef an optional reference to the directive responsible
+     *    for this binding change. If present then style binding will only
+     *    actualize if the directive has ownership over this binding
+     *    (see styling.ts#directives for more information about the algorithm).
      */
-    function updateStyleProp(context, index, input) {
-        var singleIndex = 8 /* SingleStylesStartPosition */ + index * 4 /* Size */;
+    function updateStyleProp(context, offset, input, directiveRef) {
+        _updateSingleStylingValue(context, offset, input, false, directiveRef);
+    }
+    function _updateSingleStylingValue(context, offset, input, isClassBased, directiveRef) {
+        var directiveIndex = getDirectiveIndexFromRegistry(context, directiveRef || null);
+        var singleIndex = getSinglePropIndexValue(context, directiveIndex, offset, isClassBased);
         var currValue = getValue(context, singleIndex);
         var currFlag = getPointers(context, singleIndex);
+        var currDirective = getDirectiveIndexFromEntry(context, singleIndex);
         var value = (input instanceof BoundPlayerFactory) ? input.value : input;
-        // didn't change ... nothing to make a note of
-        if (hasValueChanged(currFlag, currValue, value)) {
-            var isClassBased_5 = (currFlag & 2 /* Class */) === 2 /* Class */;
+        if (hasValueChanged(currFlag, currValue, value) &&
+            allowValueChange(currValue, value, currDirective, directiveIndex)) {
+            var isClassBased_1 = (currFlag & 2 /* Class */) === 2 /* Class */;
             var element = context[5 /* ElementPosition */];
             var playerBuilder = input instanceof BoundPlayerFactory ?
-                new ClassAndStylePlayerBuilder(input, element, isClassBased_5 ? 1 /* Class */ : 2 /* Style */) :
+                new ClassAndStylePlayerBuilder(input, element, isClassBased_1 ? 1 /* Class */ : 2 /* Style */) :
                 null;
             var value_1 = (playerBuilder ? input.value : input);
             var currPlayerIndex = getPlayerBuilderIndex(context, singleIndex);
@@ -5063,9 +5378,16 @@
             if (hasPlayerBuilderChanged(context, playerBuilder, currPlayerIndex)) {
                 var newIndex = setPlayerBuilder(context, playerBuilder, currPlayerIndex);
                 playerBuilderIndex = playerBuilder ? newIndex : 0;
-                setPlayerBuilderIndex(context, singleIndex, playerBuilderIndex);
                 playerBuildersAreDirty = true;
             }
+            if (playerBuildersAreDirty || currDirective !== directiveIndex) {
+                setPlayerBuilderIndex(context, singleIndex, playerBuilderIndex, directiveIndex);
+            }
+            if (currDirective !== directiveIndex) {
+                var prop = getProp(context, singleIndex);
+                var sanitizer = getStyleSanitizer(context, directiveIndex);
+                setSanitizeFlag(context, singleIndex, (sanitizer && sanitizer(prop)) ? true : false);
+            }
             // the value will always get updated (even if the dirty flag is skipped)
             setValue(context, singleIndex, value_1);
             var indexForMulti = getMultiOrSingleIndex(currFlag);
@@ -5075,12 +5397,13 @@
                 var multiDirty = false;
                 var singleDirty = true;
                 // only when the value is set to `null` should the multi-value get flagged
-                if (!valueExists(value_1, isClassBased_5) && valueExists(valueForMulti, isClassBased_5)) {
+                if (!valueExists(value_1, isClassBased_1) && valueExists(valueForMulti, isClassBased_1)) {
                     multiDirty = true;
                     singleDirty = false;
                 }
                 setDirty(context, indexForMulti, multiDirty);
                 setDirty(context, singleIndex, singleDirty);
+                setDirectiveDirty(context, directiveIndex, true);
                 setContextDirty(context, true);
             }
             if (playerBuildersAreDirty) {
@@ -5088,19 +5411,6 @@
             }
         }
     }
-    /**
-     * This method will toggle the referenced CSS class (by the provided index)
-     * within the given context.
-     *
-     * @param context The styling context that will be updated with the
-     *    newly provided class value.
-     * @param index The index of the CSS class which is being updated.
-     * @param addOrRemove Whether or not to add or remove the CSS class
-     */
-    function updateClassProp(context, index, addOrRemove) {
-        var adjustedIndex = index + context[4 /* ClassOffsetPosition */];
-        updateStyleProp(context, adjustedIndex, addOrRemove);
-    }
     /**
      * Renders all queued styling using a renderer onto the given element.
      *
@@ -5118,31 +5428,41 @@
      *    to this key/value map instead of being renderered via the renderer.
      * @param stylesStore if provided, the updated style values will be applied
      *    to this key/value map instead of being renderered via the renderer.
+     * @param directiveRef an optional directive that will be used to target which
+     *    styling values are rendered. If left empty, only the bindings that are
+     *    registered on the template will be rendered.
      * @returns number the total amount of players that got queued for animation (if any)
      */
-    function renderStyleAndClassBindings(context, renderer, rootOrView, isFirstRender, classesStore, stylesStore) {
+    function renderStyling(context, renderer, rootOrView, isFirstRender, classesStore, stylesStore, directiveRef) {
         var totalPlayersQueued = 0;
-        if (isContextDirty(context)) {
-            var flushPlayerBuilders = context[3 /* MasterFlagPosition */] & 8 /* PlayerBuildersDirty */;
+        var targetDirectiveIndex = getDirectiveIndexFromRegistry(context, directiveRef || null);
+        if (isContextDirty(context) && isDirectiveDirty(context, targetDirectiveIndex)) {
+            var flushPlayerBuilders = context[0 /* MasterFlagPosition */] & 8 /* PlayerBuildersDirty */;
             var native = context[5 /* ElementPosition */];
             var multiStartIndex = getMultiStartIndex(context);
-            var styleSanitizer = getStyleSanitizer(context);
             var onlySingleClasses = limitToSingleClasses(context);
-            for (var i = 8 /* SingleStylesStartPosition */; i < context.length; i += 4 /* Size */) {
+            var stillDirty = false;
+            for (var i = 9 /* SingleStylesStartPosition */; i < context.length; i += 4 /* Size */) {
                 // there is no point in rendering styles that have not changed on screen
                 if (isDirty(context, i)) {
+                    var flag = getPointers(context, i);
+                    var directiveIndex = getDirectiveIndexFromEntry(context, i);
+                    if (targetDirectiveIndex !== directiveIndex) {
+                        stillDirty = true;
+                        continue;
+                    }
                     var prop = getProp(context, i);
                     var value = getValue(context, i);
-                    var flag = getPointers(context, i);
+                    var styleSanitizer = (flag & 4 /* Sanitize */) ? getStyleSanitizer(context, directiveIndex) : null;
                     var playerBuilder = getPlayerBuilder(context, i);
-                    var isClassBased_6 = flag & 2 /* Class */ ? true : false;
+                    var isClassBased = flag & 2 /* Class */ ? true : false;
                     var isInSingleRegion = i < multiStartIndex;
-                    var readInitialValue = !isClassBased_6 || !onlySingleClasses;
+                    var readInitialValue = !isClassBased || !onlySingleClasses;
                     var valueToApply = value;
                     // VALUE DEFER CASE 1: Use a multi value instead of a null single value
                     // this check implies that a single value was removed and we
                     // should now defer to a multi value and use that (if set).
-                    if (isInSingleRegion && !valueExists(valueToApply, isClassBased_6)) {
+                    if (isInSingleRegion && !valueExists(valueToApply, isClassBased)) {
                         // single values ALWAYS have a reference to a multi index
                         var multiIndex = getMultiOrSingleIndex(flag);
                         valueToApply = getValue(context, multiIndex);
@@ -5153,7 +5473,9 @@
                     // note that this should always be a falsy check since `false` is used
                     // for both class and style comparisons (styles can't be false and false
                     // classes are turned off and should therefore defer to their initial values)
-                    if (!valueExists(valueToApply, isClassBased_6) && readInitialValue) {
+                    // Note that we ignore class-based deferals because otherwise a class can never
+                    // be removed in the case that it exists as true in the initial classes list...
+                    if (!isClassBased && !valueExists(valueToApply, isClassBased) && readInitialValue) {
                         valueToApply = getInitialValue(context, flag);
                     }
                     // if the first render is true then we do not want to start applying falsy
@@ -5162,12 +5484,11 @@
                     // was truthy before.
                     var doApplyValue = isFirstRender ? valueToApply : true;
                     if (doApplyValue) {
-                        if (isClassBased_6) {
+                        if (isClassBased) {
                             setClass(native, prop, valueToApply ? true : false, renderer, classesStore, playerBuilder);
                         }
                         else {
-                            var sanitizer = (flag & 4 /* Sanitize */) ? styleSanitizer : null;
-                            setStyle(native, prop, valueToApply, renderer, sanitizer, stylesStore, playerBuilder);
+                            setStyle(native, prop, valueToApply, renderer, styleSanitizer, stylesStore, playerBuilder);
                         }
                     }
                     setDirty(context, i, false);
@@ -5201,7 +5522,8 @@
                 }
                 setContextPlayersDirty(context, false);
             }
-            setContextDirty(context, false);
+            setDirectiveDirty(context, targetDirectiveIndex, false);
+            setContextDirty(context, stillDirty);
         }
         return totalPlayersQueued;
     }
@@ -5228,6 +5550,8 @@
             }
         }
         else if (value) {
+            value = value.toString(); // opacity, z-index and flexbox all have number values which may not
+            // assign as numbers
             ngDevMode && ngDevMode.rendererSetStyle++;
             isProceduralRenderer(renderer) ?
                 renderer.setStyle(native, prop, value, RendererStyleFlags3.DashCase) :
@@ -5272,8 +5596,16 @@
                 native['classList'].remove(className);
         }
     }
+    function setSanitizeFlag(context, index, sanitizeYes) {
+        if (sanitizeYes) {
+            context[index] |= 4 /* Sanitize */;
+        }
+        else {
+            context[index] &= ~4 /* Sanitize */;
+        }
+    }
     function setDirty(context, index, isDirtyYes) {
-        var adjustedIndex = index >= 8 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
+        var adjustedIndex = index >= 9 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
         if (isDirtyYes) {
             context[adjustedIndex] |= 1 /* Dirty */;
         }
@@ -5282,37 +5614,37 @@
         }
     }
     function isDirty(context, index) {
-        var adjustedIndex = index >= 8 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
+        var adjustedIndex = index >= 9 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
         return (context[adjustedIndex] & 1 /* Dirty */) == 1 /* Dirty */;
     }
-    function isClassBased(context, index) {
-        var adjustedIndex = index >= 8 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
+    function isClassBasedValue(context, index) {
+        var adjustedIndex = index >= 9 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
         return (context[adjustedIndex] & 2 /* Class */) == 2 /* Class */;
     }
     function isSanitizable(context, index) {
-        var adjustedIndex = index >= 8 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
+        var adjustedIndex = index >= 9 /* SingleStylesStartPosition */ ? (index + 0 /* FlagsOffset */) : index;
         return (context[adjustedIndex] & 4 /* Sanitize */) == 4 /* Sanitize */;
     }
     function pointers(configFlag, staticIndex, dynamicIndex) {
-        return (configFlag & 31 /* BitMask */) | (staticIndex << 5 /* BitCountSize */) |
-            (dynamicIndex << (14 /* BitCountSize */ + 5 /* BitCountSize */));
+        return (configFlag & 63 /* BitMask */) | (staticIndex << 6 /* BitCountSize */) |
+            (dynamicIndex << (14 /* BitCountSize */ + 6 /* BitCountSize */));
     }
     function getInitialValue(context, flag) {
         var index = getInitialIndex(flag);
-        return context[2 /* InitialStylesPosition */][index];
+        var entryIsClassBased = flag & 2 /* Class */;
+        var initialValues = entryIsClassBased ? context[3 /* InitialClassValuesPosition */] :
+            context[2 /* InitialStyleValuesPosition */];
+        return initialValues[index];
     }
     function getInitialIndex(flag) {
-        return (flag >> 5 /* BitCountSize */) & 16383 /* BitMask */;
+        return (flag >> 6 /* BitCountSize */) & 16383 /* BitMask */;
     }
     function getMultiOrSingleIndex(flag) {
-        var index = (flag >> (14 /* BitCountSize */ + 5 /* BitCountSize */)) & 16383 /* BitMask */;
-        return index >= 8 /* SingleStylesStartPosition */ ? index : -1;
+        var index = (flag >> (14 /* BitCountSize */ + 6 /* BitCountSize */)) & 16383 /* BitMask */;
+        return index >= 9 /* SingleStylesStartPosition */ ? index : -1;
     }
     function getMultiStartIndex(context) {
-        return getMultiOrSingleIndex(context[3 /* MasterFlagPosition */]);
-    }
-    function getStyleSanitizer(context) {
-        return context[1 /* StyleSanitizerPosition */];
+        return getMultiOrSingleIndex(context[0 /* MasterFlagPosition */]);
     }
     function setProp(context, index, prop) {
         context[index + 1 /* PropertyOffset */] = prop;
@@ -5321,7 +5653,7 @@
         context[index + 2 /* ValueOffset */] = value;
     }
     function hasPlayerBuilderChanged(context, builder, index) {
-        var playerContext = context[0 /* PlayerContext */];
+        var playerContext = context[8 /* PlayerContext */];
         if (builder) {
             if (!playerContext || index === 0) {
                 return true;
@@ -5333,7 +5665,7 @@
         return playerContext[index] !== builder;
     }
     function setPlayerBuilder(context, builder, insertionIndex) {
-        var playerContext = context[0 /* PlayerContext */] || allocPlayerContext(context);
+        var playerContext = context[8 /* PlayerContext */] || allocPlayerContext(context);
         if (insertionIndex > 0) {
             playerContext[insertionIndex] = builder;
         }
@@ -5345,16 +5677,23 @@
         }
         return insertionIndex;
     }
-    function setPlayerBuilderIndex(context, index, playerBuilderIndex) {
-        context[index + 3 /* PlayerBuilderIndexOffset */] = playerBuilderIndex;
+    function directiveOwnerPointers(directiveIndex, playerIndex) {
+        return (playerIndex << 16 /* BitCountSize */) | directiveIndex;
+    }
+    function setPlayerBuilderIndex(context, index, playerBuilderIndex, directiveIndex) {
+        var value = directiveOwnerPointers(directiveIndex, playerBuilderIndex);
+        context[index + 3 /* PlayerBuilderIndexOffset */] = value;
     }
     function getPlayerBuilderIndex(context, index) {
-        return context[index + 3 /* PlayerBuilderIndexOffset */] || 0;
+        var flag = context[index + 3 /* PlayerBuilderIndexOffset */];
+        var playerBuilderIndex = (flag >> 16 /* BitCountSize */) &
+            65535 /* BitMask */;
+        return playerBuilderIndex;
     }
     function getPlayerBuilder(context, index) {
         var playerBuilderIndex = getPlayerBuilderIndex(context, index);
         if (playerBuilderIndex) {
-            var playerContext = context[0 /* PlayerContext */];
+            var playerContext = context[8 /* PlayerContext */];
             if (playerContext) {
                 return playerContext[playerBuilderIndex];
             }
@@ -5362,11 +5701,11 @@
         return null;
     }
     function setFlag(context, index, flag) {
-        var adjustedIndex = index === 3 /* MasterFlagPosition */ ? index : (index + 0 /* FlagsOffset */);
+        var adjustedIndex = index === 0 /* MasterFlagPosition */ ? index : (index + 0 /* FlagsOffset */);
         context[adjustedIndex] = flag;
     }
     function getPointers(context, index) {
-        var adjustedIndex = index === 3 /* MasterFlagPosition */ ? index : (index + 0 /* FlagsOffset */);
+        var adjustedIndex = index === 0 /* MasterFlagPosition */ ? index : (index + 0 /* FlagsOffset */);
         return context[adjustedIndex];
     }
     function getValue(context, index) {
@@ -5376,20 +5715,20 @@
         return context[index + 1 /* PropertyOffset */];
     }
     function isContextDirty(context) {
-        return isDirty(context, 3 /* MasterFlagPosition */);
+        return isDirty(context, 0 /* MasterFlagPosition */);
     }
     function limitToSingleClasses(context) {
-        return context[3 /* MasterFlagPosition */] & 16 /* OnlyProcessSingleClasses */;
+        return context[0 /* MasterFlagPosition */] & 16 /* OnlyProcessSingleClasses */;
     }
     function setContextDirty(context, isDirtyYes) {
-        setDirty(context, 3 /* MasterFlagPosition */, isDirtyYes);
+        setDirty(context, 0 /* MasterFlagPosition */, isDirtyYes);
     }
     function setContextPlayersDirty(context, isDirtyYes) {
         if (isDirtyYes) {
-            context[3 /* MasterFlagPosition */] |= 8 /* PlayerBuildersDirty */;
+            context[0 /* MasterFlagPosition */] |= 8 /* PlayerBuildersDirty */;
         }
         else {
-            context[3 /* MasterFlagPosition */] &= ~8 /* PlayerBuildersDirty */;
+            context[0 /* MasterFlagPosition */] &= ~8 /* PlayerBuildersDirty */;
         }
     }
     function findEntryPositionByProp(context, prop, startIndex) {
@@ -5423,11 +5762,13 @@
         setValue(context, indexA, getValue(context, indexB));
         setProp(context, indexA, getProp(context, indexB));
         setFlag(context, indexA, getPointers(context, indexB));
-        setPlayerBuilderIndex(context, indexA, getPlayerBuilderIndex(context, indexB));
+        var playerIndexA = getPlayerBuilderIndex(context, indexB);
+        var directiveIndexA = 0;
+        setPlayerBuilderIndex(context, indexA, playerIndexA, directiveIndexA);
         setValue(context, indexB, tmpValue);
         setProp(context, indexB, tmpProp);
         setFlag(context, indexB, tmpFlag);
-        setPlayerBuilderIndex(context, indexB, tmpPlayerBuilderIndex);
+        setPlayerBuilderIndex(context, indexB, tmpPlayerBuilderIndex, directiveIndexA);
     }
     function updateSinglePointerValues(context, indexStartPosition) {
         for (var i = indexStartPosition; i < context.length; i += 4 /* Size */) {
@@ -5437,17 +5778,18 @@
                 var singleFlag = getPointers(context, singleIndex);
                 var initialIndexForSingle = getInitialIndex(singleFlag);
                 var flagValue = (isDirty(context, singleIndex) ? 1 /* Dirty */ : 0 /* None */) |
-                    (isClassBased(context, singleIndex) ? 2 /* Class */ : 0 /* None */) |
+                    (isClassBasedValue(context, singleIndex) ? 2 /* Class */ : 0 /* None */) |
                     (isSanitizable(context, singleIndex) ? 4 /* Sanitize */ : 0 /* None */);
                 var updatedFlag = pointers(flagValue, initialIndexForSingle, i);
                 setFlag(context, singleIndex, updatedFlag);
             }
         }
     }
-    function insertNewMultiProperty(context, index, classBased, name, flag, value, playerIndex) {
+    function insertNewMultiProperty(context, index, classBased, name, flag, value, directiveIndex, playerIndex) {
         var doShift = index < context.length;
         // prop does not exist in the list, add it in
-        context.splice(index, 0, flag | 1 /* Dirty */ | (classBased ? 2 /* Class */ : 0 /* None */), name, value, playerIndex);
+        context.splice(index, 0, flag | 1 /* Dirty */ | (classBased ? 2 /* Class */ : 0 /* None */), name, value, 0);
+        setPlayerBuilderIndex(context, index, playerIndex, directiveIndex);
         if (doShift) {
             // because the value was inserted midway into the array then we
             // need to update all the shifted multi values' single value
@@ -5461,14 +5803,20 @@
         }
         return value !== null;
     }
-    function prepareInitialFlag(name, isClassBased, sanitizer) {
-        if (isClassBased) {
-            return 2 /* Class */;
+    function prepareInitialFlag(context, prop, entryIsClassBased, sanitizer) {
+        var flag = (sanitizer && sanitizer(prop)) ? 4 /* Sanitize */ : 0 /* None */;
+        var initialIndex;
+        if (entryIsClassBased) {
+            flag |= 2 /* Class */;
+            initialIndex =
+                getInitialStylingValuesIndexOf(context[3 /* InitialClassValuesPosition */], prop);
         }
-        else if (sanitizer && sanitizer(name)) {
-            return 4 /* Sanitize */;
+        else {
+            initialIndex =
+                getInitialStylingValuesIndexOf(context[2 /* InitialStyleValuesPosition */], prop);
         }
-        return 0 /* None */;
+        initialIndex = initialIndex > 0 ? (initialIndex + 1 /* ValueOffset */) : 0;
+        return pointers(flag, initialIndex, 0);
     }
     function hasValueChanged(flag, a, b) {
         var isClassBased = flag & 2 /* Class */;
@@ -5512,6 +5860,108 @@
         };
         return ClassAndStylePlayerBuilder;
     }());
+    function getDirectiveIndexFromEntry(context, index) {
+        var value = context[index + 3 /* PlayerBuilderIndexOffset */];
+        return value & 65535 /* BitMask */;
+    }
+    function getDirectiveIndexFromRegistry(context, directive) {
+        var index = getDirectiveRegistryValuesIndexOf(context[1 /* DirectiveRegistryPosition */], directive);
+        ngDevMode &&
+            assertNotEqual(index, -1, "The provided directive " + directive + " has not been allocated to the element's style/class bindings");
+        return index > 0 ? index / 4 /* Size */ : 0;
+        // return index / DirectiveRegistryValuesIndex.Size;
+    }
+    function getDirectiveRegistryValuesIndexOf(directives, directive) {
+        for (var i = 0; i < directives.length; i += 4 /* Size */) {
+            if (directives[i] === directive) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    function getInitialStylingValuesIndexOf(keyValues, key) {
+        for (var i = 1 /* KeyValueStartPosition */; i < keyValues.length; i += 2 /* Size */) {
+            if (keyValues[i] === key)
+                return i;
+        }
+        return -1;
+    }
+    function getSinglePropIndexValue(context, directiveIndex, offset, isClassBased) {
+        var singlePropOffsetRegistryIndex = context[1 /* DirectiveRegistryPosition */][(directiveIndex * 4 /* Size */) +
+            1 /* SinglePropValuesIndexOffset */];
+        var offsets = context[4 /* SinglePropOffsetPositions */];
+        var indexForOffset = singlePropOffsetRegistryIndex +
+            2 /* ValueStartPosition */ +
+            (isClassBased ?
+                offsets[singlePropOffsetRegistryIndex + 0 /* StylesCountPosition */] :
+                0) +
+            offset;
+        return offsets[indexForOffset];
+    }
+    function getStyleSanitizer(context, directiveIndex) {
+        var dirs = context[1 /* DirectiveRegistryPosition */];
+        var value = dirs[directiveIndex * 4 /* Size */ +
+            3 /* StyleSanitizerOffset */] ||
+            dirs[3 /* StyleSanitizerOffset */] || null;
+        return value;
+    }
+    function isDirectiveDirty(context, directiveIndex) {
+        var dirs = context[1 /* DirectiveRegistryPosition */];
+        return dirs[directiveIndex * 4 /* Size */ +
+            2 /* DirtyFlagOffset */];
+    }
+    function setDirectiveDirty(context, directiveIndex, dirtyYes) {
+        var dirs = context[1 /* DirectiveRegistryPosition */];
+        dirs[directiveIndex * 4 /* Size */ +
+            2 /* DirtyFlagOffset */] = dirtyYes;
+    }
+    function allowValueChange(currentValue, newValue, currentDirectiveOwner, newDirectiveOwner) {
+        // the code below relies the importance of directive's being tied to their
+        // index value. The index values for each directive are derived from being
+        // registered into the styling context directive registry. The most important
+        // directive is the parent component directive (the template) and each directive
+        // that is added after is considered less important than the previous entry. This
+        // prioritization of directives enables the styling algorithm to decide if a style
+        // or class should be allowed to be updated/replaced incase an earlier directive
+        // already wrote to the exact same style-property or className value. In other words
+        // ... this decides what to do if and when there is a collision.
+        if (currentValue) {
+            if (newValue) {
+                // if a directive index is lower than it always has priority over the
+                // previous directive's value...
+                return newDirectiveOwner <= currentDirectiveOwner;
+            }
+            else {
+                // only write a null value incase it's the same owner writing it.
+                // this avoids having a higher-priority directive write to null
+                // only to have a lesser-priority directive change right to a
+                // non-null value immediately afterwards.
+                return currentDirectiveOwner === newDirectiveOwner;
+            }
+        }
+        return true;
+    }
+    /**
+     * This function is only designed to be called for `[class]` bindings when
+     * `[ngClass]` (or something that uses `class` as an input) is present. Once
+     * directive host bindings fully work for `[class]` and `[style]` inputs
+     * then this can be deleted.
+     */
+    function getInitialClassNameValue(context) {
+        var className = context[6 /* CachedClassValueOrInitialClassString */];
+        if (className == null) {
+            className = '';
+            var initialClassValues = context[3 /* InitialClassValuesPosition */];
+            for (var i = 1 /* KeyValueStartPosition */; i < initialClassValues.length; i += 2 /* Size */) {
+                var isPresent = initialClassValues[i + 1];
+                if (isPresent) {
+                    className += (className.length ? ' ' : '') + initialClassValues[i];
+                }
+            }
+            context[6 /* CachedClassValueOrInitialClassString */] = className;
+        }
+        return className;
+    }
 
     /**
      * @license
@@ -5531,29 +5981,23 @@
      * bindings, refreshes child components.
      * Note: view hooks are triggered later when leaving the view.
      */
-    function refreshDescendantViews(lView, rf) {
+    function refreshDescendantViews(lView) {
         var tView = lView[TVIEW];
         // This needs to be set before children are processed to support recursive components
         tView.firstTemplatePass = false;
         setFirstTemplatePass(false);
-        // Dynamically created views must run first only in creation mode. If this is a
-        // creation-only pass, we should not call lifecycle hooks or evaluate bindings.
-        // This will be done in the update-only pass.
-        if (rf !== 1 /* Create */) {
-            var creationMode = getCreationMode();
+        // If this is a creation pass, we should not call lifecycle hooks or evaluate bindings.
+        // This will be done in the update pass.
+        if (!isCreationMode(lView)) {
             var checkNoChangesMode = getCheckNoChangesMode();
-            if (!checkNoChangesMode) {
-                executeInitHooks(lView, tView, creationMode);
-            }
+            executeInitHooks(lView, tView, checkNoChangesMode);
             refreshDynamicEmbeddedViews(lView);
             // Content query results must be refreshed before content hooks are called.
             refreshContentQueries(tView);
-            if (!checkNoChangesMode) {
-                executeHooks(lView, tView.contentHooks, tView.contentCheckHooks, creationMode);
-            }
+            executeHooks(lView, tView.contentHooks, tView.contentCheckHooks, checkNoChangesMode);
             setHostBindings(tView, lView);
         }
-        refreshChildComponents(tView.components, rf);
+        refreshChildComponents(tView.components);
     }
     /** Sets the host bindings for the current view. */
     function setHostBindings(tView, viewData) {
@@ -5604,16 +6048,17 @@
         }
     }
     /** Refreshes child components in the current view. */
-    function refreshChildComponents(components, rf) {
+    function refreshChildComponents(components) {
         if (components != null) {
             for (var i = 0; i < components.length; i++) {
-                componentRefresh(components[i], rf);
+                componentRefresh(components[i]);
             }
         }
     }
     function createLView(parentLView, tView, context, flags, rendererFactory, renderer, sanitizer, injector) {
         var lView = tView.blueprint.slice();
-        lView[FLAGS] = flags | 1 /* CreationMode */ | 8 /* Attached */ | 16 /* RunInit */;
+        lView[FLAGS] = flags | 1 /* CreationMode */ | 16 /* Attached */ | 32 /* RunInit */ |
+            2 /* FirstLViewPass */;
         lView[PARENT] = lView[DECLARATION_VIEW] = parentLView;
         lView[CONTEXT] = context;
         lView[RENDERER_FACTORY] = (rendererFactory || parentLView && parentLView[RENDERER_FACTORY]);
@@ -5690,7 +6135,7 @@
         var _previousOrParentTNode = getPreviousOrParentTNode();
         setIsParent(true);
         setPreviousOrParentTNode(null);
-        var lView = createLView(declarationView, tView, context, 2 /* CheckAlways */);
+        var lView = createLView(declarationView, tView, context, 4 /* CheckAlways */);
         lView[DECLARATION_VIEW] = declarationView;
         if (queries) {
             lView[QUERIES] = queries.createView();
@@ -5713,13 +6158,13 @@
      * can't store TViews in the template function itself (as we do for comps). Instead, we store the
      * TView for dynamically created views on their host TNode, which only has one instance.
      */
-    function renderEmbeddedTemplate(viewToRender, tView, context, rf) {
+    function renderEmbeddedTemplate(viewToRender, tView, context) {
         var _isParent = getIsParent();
         var _previousOrParentTNode = getPreviousOrParentTNode();
         setIsParent(true);
         setPreviousOrParentTNode(null);
         var oldView;
-        if (viewToRender[FLAGS] & 64 /* IsRoot */) {
+        if (viewToRender[FLAGS] & 128 /* IsRoot */) {
             // This is a root view inside the view tree
             tickRootContext(getRootContext(viewToRender));
         }
@@ -5729,24 +6174,17 @@
                 setPreviousOrParentTNode(null);
                 oldView = enterView(viewToRender, viewToRender[HOST_NODE]);
                 namespaceHTML();
-                tView.template(rf, context);
-                if (rf & 2 /* Update */) {
-                    refreshDescendantViews(viewToRender, null);
-                }
-                else {
-                    // This must be set to false immediately after the first creation run because in an
-                    // ngFor loop, all the views will be created together before update mode runs and turns
-                    // off firstTemplatePass. If we don't set it here, instances will perform directive
-                    // matching, etc again and again.
-                    viewToRender[TVIEW].firstTemplatePass = false;
-                    setFirstTemplatePass(false);
-                }
+                tView.template(getRenderFlags(viewToRender), context);
+                // This must be set to false immediately after the first creation run because in an
+                // ngFor loop, all the views will be created together before update mode runs and turns
+                // off firstTemplatePass. If we don't set it here, instances will perform directive
+                // matching, etc again and again.
+                viewToRender[TVIEW].firstTemplatePass = false;
+                setFirstTemplatePass(false);
+                refreshDescendantViews(viewToRender);
             }
             finally {
-                // renderEmbeddedTemplate() is called twice, once for creation only and then once for
-                // update. When for creation only, leaveView() must not trigger view hooks, nor clean flags.
-                var isCreationOnly = (rf & 1 /* Create */) === 1 /* Create */;
-                leaveView(oldView, isCreationOnly);
+                leaveView(oldView);
                 setIsParent(_isParent);
                 setPreviousOrParentTNode(_previousOrParentTNode);
             }
@@ -5766,21 +6204,29 @@
         if (level === void 0) { level = 1; }
         return nextContextImpl(level);
     }
-    function renderComponentOrTemplate(hostView, componentOrContext, rf, templateFn) {
+    function renderComponentOrTemplate(hostView, context, templateFn) {
         var rendererFactory = hostView[RENDERER_FACTORY];
         var oldView = enterView(hostView, hostView[HOST_NODE]);
+        var normalExecutionPath = !getCheckNoChangesMode();
         try {
-            if (rendererFactory.begin) {
+            if (normalExecutionPath && rendererFactory.begin) {
                 rendererFactory.begin();
             }
-            if (templateFn) {
-                namespaceHTML();
-                templateFn(rf || getRenderFlags(hostView), componentOrContext);
+            if (isCreationMode(hostView)) {
+                // creation mode pass
+                if (templateFn) {
+                    namespaceHTML();
+                    templateFn(1 /* Create */, context);
+                }
+                refreshDescendantViews(hostView);
+                hostView[FLAGS] &= ~1 /* CreationMode */;
             }
-            refreshDescendantViews(hostView, rf);
+            // update mode pass
+            templateFn && templateFn(2 /* Update */, context);
+            refreshDescendantViews(hostView);
         }
         finally {
-            if (rendererFactory.end) {
+            if (normalExecutionPath && rendererFactory.end) {
                 rendererFactory.end();
             }
             leaveView(oldView);
@@ -5788,16 +6234,11 @@
     }
     /**
      * This function returns the default configuration of rendering flags depending on when the
-     * template is in creation mode or update mode. By default, the update block is run with the
-     * creation block when the view is in creation mode. Otherwise, the update block is run
-     * alone.
-     *
-     * Dynamically created views do NOT use this configuration (update block and create block are
-     * always run separately).
+     * template is in creation mode or update mode. Update block and create block are
+     * always run separately.
      */
     function getRenderFlags(view) {
-        return view[FLAGS] & 1 /* CreationMode */ ? 1 /* Create */ | 2 /* Update */ :
-            2 /* Update */;
+        return isCreationMode(view) ? 1 /* Create */ : 2 /* Update */;
     }
     //////////////////////////
     //// Namespace
@@ -5820,7 +6261,8 @@
      *
      * @param index Index of the element in the data array
      * @param name Name of the DOM Node
-     * @param attrs Statically bound set of attributes to be written into the DOM element on creation.
+     * @param attrs Statically bound set of attributes, classes, and styles to be written into the DOM
+     *              element on creation. Use [AttributeMarker] to denote the meaning of this array.
      * @param localRefs A set of local reference bindings on the element.
      */
     function element(index, name, attrs, localRefs) {
@@ -5878,7 +6320,8 @@
      *
      * @param index Index of the element in the LView array
      * @param name Name of the DOM Node
-     * @param attrs Statically bound set of attributes to be written into the DOM element on creation.
+     * @param attrs Statically bound set of attributes, classes, and styles to be written into the DOM
+     *              element on creation. Use [AttributeMarker] to denote the meaning of this array.
      * @param localRefs A set of local reference bindings on the element.
      *
      * Attributes and localRefs are passed as an array of strings where elements with an even index
@@ -5894,6 +6337,14 @@
         ngDevMode && assertDataInRange(lView, index - 1);
         var tNode = createNodeAtIndex(index, 3 /* Element */, native, name, attrs || null);
         if (attrs) {
+            // it's important to only prepare styling-related datastructures once for a given
+            // tNode and not each time an element is created. Also, the styling code is designed
+            // to be patched and constructed at various points, but only up until the first element
+            // is created. Then the styling context is locked and can only be instantiated for each
+            // successive element that is created.
+            if (tView.firstTemplatePass && !tNode.stylingTemplate && hasStyling(attrs)) {
+                tNode.stylingTemplate = initializeStaticContext(attrs);
+            }
             setUpAttributes(native, attrs);
         }
         appendChild(native, tNode, lView);
@@ -5905,6 +6356,21 @@
             attachPatchData(native, lView);
         }
         increaseElementDepthCount();
+        // if a directive contains a host binding for "class" then all class-based data will
+        // flow through that (except for `[class.prop]` bindings). This also includes initial
+        // static class values as well. (Note that this will be fixed once map-based `[style]`
+        // and `[class]` bindings work for multiple directives.)
+        if (tView.firstTemplatePass) {
+            var inputData = initializeTNodeInputs(tNode);
+            if (inputData && inputData.hasOwnProperty('class')) {
+                tNode.flags |= 8 /* hasClassInput */;
+            }
+        }
+        // There is no point in rendering styles when a class directive is present since
+        // it will take that over for us (this will be removed once #FW-882 is in).
+        if (tNode.stylingTemplate && (tNode.flags & 8 /* hasClassInput */) === 0) {
+            renderInitialStylesAndClasses(native, tNode.stylingTemplate, lView[RENDERER]);
+        }
     }
     /**
      * Creates a native element from a tag name, using a renderer.
@@ -6044,28 +6510,30 @@
         var isProc = isProceduralRenderer(renderer);
         var i = 0;
         while (i < attrs.length) {
-            var attrName = attrs[i];
-            if (attrName === 1 /* SelectOnly */)
-                break;
-            if (attrName === NG_PROJECT_AS_ATTR_NAME) {
-                i += 2;
-            }
-            else {
-                ngDevMode && ngDevMode.rendererSetAttribute++;
+            var attrName = attrs[i++];
+            if (typeof attrName == 'number') {
                 if (attrName === 0 /* NamespaceURI */) {
                     // Namespaced attributes
-                    var namespaceURI = attrs[i + 1];
-                    var attrName_1 = attrs[i + 2];
-                    var attrVal = attrs[i + 3];
+                    var namespaceURI = attrs[i++];
+                    var attrName_1 = attrs[i++];
+                    var attrVal = attrs[i++];
+                    ngDevMode && ngDevMode.rendererSetAttribute++;
                     isProc ?
                         renderer
                             .setAttribute(native, attrName_1, attrVal, namespaceURI) :
                         native.setAttributeNS(namespaceURI, attrName_1, attrVal);
-                    i += 4;
                 }
                 else {
+                    // All other `AttributeMarker`s are ignored here.
+                    break;
+                }
+            }
+            else {
+                /// attrName is string;
+                var attrVal = attrs[i++];
+                if (attrName !== NG_PROJECT_AS_ATTR_NAME) {
                     // Standard attributes
-                    var attrVal = attrs[i + 1];
+                    ngDevMode && ngDevMode.rendererSetAttribute++;
                     if (isAnimationProp(attrName)) {
                         if (isProc) {
                             renderer.setProperty(native, attrName, attrVal);
@@ -6077,7 +6545,6 @@
                                 .setAttribute(native, attrName, attrVal) :
                             native.setAttribute(attrName, attrVal);
                     }
-                    i += 2;
                 }
             }
         }
@@ -6216,6 +6683,13 @@
         }
         queueLifecycleHooks(getLView()[TVIEW], previousOrParentTNode);
         decreaseElementDepthCount();
+        // this is fired at the end of elementEnd because ALL of the stylingBindings code
+        // (for directives and the template) have now executed which means the styling
+        // context can be instantiated properly.
+        if (hasClassInput(previousOrParentTNode)) {
+            var stylingContext = getStylingContext(previousOrParentTNode.index, lView);
+            setInputsForProperty(lView, previousOrParentTNode.inputs['class'], getInitialClassNameValue(stylingContext));
+        }
     }
     /**
      * Updates the value of removes an attribute on an Element.
@@ -6260,6 +6734,37 @@
      * (this is necessary for host property bindings)
      */
     function elementProperty(index, propName, value, sanitizer, nativeOnly) {
+        elementPropertyInternal(index, propName, value, sanitizer, nativeOnly);
+    }
+    /**
+     * Updates a synthetic host binding (e.g. `[@foo]`) on a component.
+     *
+     * This instruction is for compatibility purposes and is designed to ensure that a
+     * synthetic host binding (e.g. `@HostBinding('@foo')`) properly gets rendered in
+     * the component's renderer. Normally all host bindings are evaluated with the parent
+     * component's renderer, but, in the case of animation @triggers, they need to be
+     * evaluated with the sub components renderer (because that's where the animation
+     * triggers are defined).
+     *
+     * Do not use this instruction as a replacement for `elementProperty`. This instruction
+     * only exists to ensure compatibility with the ViewEngine's host binding behavior.
+     *
+     * @param index The index of the element to update in the data array
+     * @param propName Name of property. Because it is going to DOM, this is not subject to
+     *        renaming as part of minification.
+     * @param value New value to write.
+     * @param sanitizer An optional function used to sanitize the value.
+     * @param nativeOnly Whether or not we should only set native properties and skip input check
+     * (this is necessary for host property bindings)
+     */
+    function componentHostSyntheticProperty(index, propName, value, sanitizer, nativeOnly) {
+        elementPropertyInternal(index, propName, value, sanitizer, nativeOnly, loadComponentRenderer);
+    }
+    function loadComponentRenderer(tNode, lView) {
+        var componentLView = lView[tNode.index];
+        return componentLView[RENDERER];
+    }
+    function elementPropertyInternal(index, propName, value, sanitizer, nativeOnly, loadRendererFn) {
         if (value === NO_CHANGE)
             return;
         var lView = getLView();
@@ -6279,7 +6784,7 @@
             }
         }
         else if (tNode.type === 3 /* Element */) {
-            var renderer = lView[RENDERER];
+            var renderer = loadRendererFn ? loadRendererFn(tNode, lView) : lView[RENDERER];
             // It is assumed that the sanitizer is only added when the compiler determines that the property
             // is risky, so sanitization can be done without further checks.
             value = sanitizer != null ? sanitizer(value) : value;
@@ -6398,127 +6903,105 @@
         return propStore;
     }
     /**
-     * Add or remove a class in a `classList` on a DOM element.
+     * Assign any inline style values to the element during creation mode.
      *
-     * This instruction is meant to handle the [class.foo]="exp" case
+     * This instruction is meant to be called during creation mode to register all
+     * dynamic style and class bindings on the element. Note for static values (no binding)
+     * see `elementStart` and `elementHostAttrs`.
+     *
+     * @param classBindingNames An array containing bindable class names.
+     *        The `elementClassProp` refers to the class name by index in this array.
+     *        (i.e. `['foo', 'bar']` means `foo=0` and `bar=1`).
+     * @param styleBindingNames An array containing bindable style properties.
+     *        The `elementStyleProp` refers to the class name by index in this array.
+     *        (i.e. `['width', 'height']` means `width=0` and `height=1`).
+     * @param styleSanitizer An optional sanitizer function that will be used to sanitize any CSS
+     *        property values that are applied to the element (during rendering).
+     *        Note that the sanitizer instance itself is tied to the `directive` (if  provided).
+     * @param directive A directive instance the styling is associated with. If not provided
+     *        current view's controller instance is assumed.
      *
-     * @param index The index of the element to update in the data array
-     * @param classIndex Index of class to toggle. Because it is going to DOM, this is not subject to
-     *        renaming as part of minification.
-     * @param value A value indicating if a given class should be added or removed.
-     * @param directive the ref to the directive that is attempting to change styling.
+     * @publicApi
      */
-    function elementClassProp(index, classIndex, value, directive) {
-        if (directive != undefined) {
-            return hackImplementationOfElementClassProp(index, classIndex, value, directive); // proper supported in next PR
+    function elementStyling(classBindingNames, styleBindingNames, styleSanitizer, directive) {
+        var tNode = getPreviousOrParentTNode();
+        if (!tNode.stylingTemplate) {
+            tNode.stylingTemplate = createEmptyStylingContext();
         }
-        var val = (value instanceof BoundPlayerFactory) ? value : (!!value);
-        updateClassProp(getStylingContext(index + HEADER_OFFSET, getLView()), classIndex, val);
+        updateContextWithBindings(tNode.stylingTemplate, directive || null, classBindingNames, styleBindingNames, styleSanitizer, hasClassInput(tNode));
     }
     /**
-     * Assign any inline style values to the element during creation mode.
+     * Assign static styling values to a host element.
      *
-     * This instruction is meant to be called during creation mode to apply all styling
-     * (e.g. `style="..."`) values to the element. This is also where the provided index
-     * value is allocated for the styling details for its corresponding element (the element
-     * index is the previous index value from this one).
-     *
-     * (Note this function calls `elementStylingApply` immediately when called.)
-     *
-     *
-     * @param index Index value which will be allocated to store styling data for the element.
-     *        (Note that this is not the element index, but rather an index value allocated
-     *        specifically for element styling--the index must be the next index after the element
-     *        index.)
-     * @param classDeclarations A key/value array of CSS classes that will be registered on the element.
-     *   Each individual style will be used on the element as long as it is not overridden
-     *   by any classes placed on the element by multiple (`[class]`) or singular (`[class.named]`)
-     *   bindings. If a class binding changes its value to a falsy value then the matching initial
-     *   class value that are passed in here will be applied to the element (if matched).
-     * @param styleDeclarations A key/value array of CSS styles that will be registered on the element.
-     *   Each individual style will be used on the element as long as it is not overridden
-     *   by any styles placed on the element by multiple (`[style]`) or singular (`[style.prop]`)
-     *   bindings. If a style binding changes its value to null then the initial styling
-     *   values that are passed in here will be applied to the element (if matched).
-     * @param styleSanitizer An optional sanitizer function that will be used (if provided)
-     *   to sanitize the any CSS property values that are applied to the element (during rendering).
-     * @param directive the ref to the directive that is attempting to change styling.
-     */
-    function elementStyling(classDeclarations, styleDeclarations, styleSanitizer, directive) {
-        if (directive != undefined) {
-            getCreationMode() &&
-                hackImplementationOfElementStyling(classDeclarations || null, styleDeclarations || null, styleSanitizer || null, directive); // supported in next PR
-            return;
-        }
+     * NOTE: This instruction is meant to used from `hostBindings` function only.
+     *
+     * @param directive A directive instance the styling is associated with.
+     * @param attrs An array containing class and styling information. The values must be marked with
+     *              `AttributeMarker`.
+     *
+     *        ```
+     *        var attrs = [AttributeMarker.Classes, 'foo', 'bar',
+     *                     AttributeMarker.Styles, 'width', '100px', 'height, '200px']
+     *        elementHostAttrs(directive, attrs);
+     *        ```
+     *
+     * @publicApi
+     */
+    function elementHostAttrs(directive, attrs) {
         var tNode = getPreviousOrParentTNode();
-        var inputData = initializeTNodeInputs(tNode);
         if (!tNode.stylingTemplate) {
-            var hasClassInput = inputData && inputData.hasOwnProperty('class') ? true : false;
-            if (hasClassInput) {
-                tNode.flags |= 8 /* hasClassInput */;
-            }
-            // initialize the styling template.
-            tNode.stylingTemplate = createStylingContextTemplate(classDeclarations, styleDeclarations, styleSanitizer, hasClassInput);
-        }
-        if (styleDeclarations && styleDeclarations.length ||
-            classDeclarations && classDeclarations.length) {
-            var index = tNode.index;
-            if (delegateToClassInput(tNode)) {
-                var lView = getLView();
-                var stylingContext = getStylingContext(index, lView);
-                var initialClasses = stylingContext[6 /* PreviousOrCachedMultiClassValue */];
-                setInputsForProperty(lView, tNode.inputs['class'], initialClasses);
-            }
-            elementStylingApply(index - HEADER_OFFSET);
+            tNode.stylingTemplate = initializeStaticContext(attrs);
         }
+        patchContextWithStaticAttrs(tNode.stylingTemplate, attrs, directive);
     }
     /**
-     * Apply all styling values to the element which have been queued by any styling instructions.
+     * Apply styling binding to the element.
      *
-     * This instruction is meant to be run once one or more `elementStyle` and/or `elementStyleProp`
-     * have been issued against the element. This function will also determine if any styles have
-     * changed and will then skip the operation if there is nothing new to render.
+     * This instruction is meant to be run after `elementStyle` and/or `elementStyleProp`.
+     * if any styling bindings have changed then the changes are flushed to the element.
      *
-     * Once called then all queued styles will be flushed.
      *
-     * @param index Index of the element's styling storage that will be rendered.
-     *        (Note that this is not the element index, but rather an index value allocated
-     *        specifically for element styling--the index must be the next index after the element
-     *        index.)
-     * @param directive the ref to the directive that is attempting to change styling.
+     * @param index Index of the element's with which styling is associated.
+     * @param directive Directive instance that is attempting to change styling. (Defaults to the
+     *        component of the current view).
+    components
+     *
+     * @publicApi
      */
     function elementStylingApply(index, directive) {
-        if (directive != undefined) {
-            return hackImplementationOfElementStylingApply(index, directive); // supported in next PR
-        }
         var lView = getLView();
-        var isFirstRender = (lView[FLAGS] & 1 /* CreationMode */) !== 0;
-        var totalPlayersQueued = renderStyleAndClassBindings(getStylingContext(index + HEADER_OFFSET, lView), lView[RENDERER], lView, isFirstRender);
+        var isFirstRender = (lView[FLAGS] & 2 /* FirstLViewPass */) !== 0;
+        var totalPlayersQueued = renderStyling(getStylingContext(index + HEADER_OFFSET, lView), lView[RENDERER], lView, isFirstRender, null, null, directive);
         if (totalPlayersQueued > 0) {
             var rootContext = getRootContext(lView);
             scheduleTick(rootContext, 2 /* FlushPlayers */);
         }
     }
     /**
-     * Queue a given style to be rendered on an Element.
+     * Update a style bindings value on an element.
      *
      * If the style value is `null` then it will be removed from the element
      * (or assigned a different value depending if there are any styles placed
      * on the element with `elementStyle` or any styles that are present
      * from when the element was created (with `elementStyling`).
      *
-     * (Note that the styling instruction will not be applied until `elementStylingApply` is called.)
+     * (Note that the styling element is updated as part of `elementStylingApply`.)
      *
-     * @param index Index of the element's styling storage to change in the data array.
-     *        (Note that this is not the element index, but rather an index value allocated
-     *        specifically for element styling--the index must be the next index after the element
-     *        index.)
-     * @param styleIndex Index of the style property on this element. (Monotonically increasing.)
-     * @param value New value to write (null to remove).
+     * @param index Index of the element's with which styling is associated.
+     * @param styleIndex Index of style to update. This index value refers to the
+     *        index of the style in the style bindings array that was passed into
+     *        `elementStlyingBindings`.
+     * @param value New value to write (null to remove). Note that if a directive also
+     *        attempts to write to the same binding value then it will only be able to
+     *        do so if the template binding value is `null` (or doesn't exist at all).
      * @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
      *        Note that when a suffix is provided then the underlying sanitizer will
      *        be ignored.
-     * @param directive the ref to the directive that is attempting to change styling.
+     * @param directive Directive instance that is attempting to change styling. (Defaults to the
+     *        component of the current view).
+    components
+     *
+     * @publicApi
      */
     function elementStyleProp(index, styleIndex, value, suffix, directive) {
         var valueToAdd = null;
@@ -6536,34 +7019,52 @@
                 valueToAdd = value;
             }
         }
-        if (directive != undefined) {
-            hackImplementationOfElementStyleProp(index, styleIndex, valueToAdd, suffix, directive);
-        }
-        else {
-            updateStyleProp(getStylingContext(index + HEADER_OFFSET, getLView()), styleIndex, valueToAdd);
-        }
+        updateStyleProp(getStylingContext(index + HEADER_OFFSET, getLView()), styleIndex, valueToAdd, directive);
+    }
+    /**
+     * Add or remove a class via a class binding on a DOM element.
+     *
+     * This instruction is meant to handle the [class.foo]="exp" case and, therefore,
+     * the class itself must already be applied using `elementStyling` within
+     * the creation block.
+     *
+     * @param index Index of the element's with which styling is associated.
+     * @param classIndex Index of class to toggle. This index value refers to the
+     *        index of the class in the class bindings array that was passed into
+     *        `elementStlyingBindings` (which is meant to be called before this
+     *        function is).
+     * @param value A true/false value which will turn the class on or off.
+     * @param directive Directive instance that is attempting to change styling. (Defaults to the
+     *        component of the current view).
+    components
+     *
+     * @publicApi
+     */
+    function elementClassProp(index, classIndex, value, directive) {
+        var onOrOffClassValue = (value instanceof BoundPlayerFactory) ? value : (!!value);
+        updateClassProp(getStylingContext(index + HEADER_OFFSET, getLView()), classIndex, onOrOffClassValue, directive);
     }
     /**
-     * Queue a key/value map of styles to be rendered on an Element.
+     * Update style and/or class bindings using object literal.
      *
-     * This instruction is meant to handle the `[style]="exp"` usage. When styles are applied to
-     * the Element they will then be placed with respect to any styles set with `elementStyleProp`.
-     * If any styles are set to `null` then they will be removed from the element (unless the same
-     * style properties have been assigned to the element during creation using `elementStyling`).
+     * This instruction is meant apply styling via the `[style]="exp"` and `[class]="exp"` template
+     * bindings. When styles are applied to the Element they will then be placed with respect to
+     * any styles set with `elementStyleProp`. If any styles are set to `null` then they will be
+     * removed from the element.
      *
      * (Note that the styling instruction will not be applied until `elementStylingApply` is called.)
      *
-     * @param index Index of the element's styling storage to change in the data array.
-     *        (Note that this is not the element index, but rather an index value allocated
-     *        specifically for element styling--the index must be the next index after the element
-     *        index.)
+     * @param index Index of the element's with which styling is associated.
      * @param classes A key/value style map of CSS classes that will be added to the given element.
      *        Any missing classes (that have already been applied to the element beforehand) will be
      *        removed (unset) from the element's list of CSS classes.
      * @param styles A key/value style map of the styles that will be applied to the given element.
      *        Any missing styles (that have already been applied to the element beforehand) will be
      *        removed (unset) from the element's styling.
-     * @param directive the ref to the directive that is attempting to change styling.
+     * @param directive Directive instance that is attempting to change styling. (Defaults to the
+     *        component of the current view).
+     *
+     * @publicApi
      */
     function elementStylingMap(index, classes, styles, directive) {
         if (directive != undefined)
@@ -6571,77 +7072,16 @@
         var lView = getLView();
         var tNode = getTNode(index, lView);
         var stylingContext = getStylingContext(index + HEADER_OFFSET, lView);
-        if (delegateToClassInput(tNode) && classes !== NO_CHANGE) {
-            var initialClasses = stylingContext[6 /* PreviousOrCachedMultiClassValue */];
+        if (hasClassInput(tNode) && classes !== NO_CHANGE) {
+            var initialClasses = getInitialClassNameValue(stylingContext);
             var classInputVal = (initialClasses.length ? (initialClasses + ' ') : '') + classes;
             setInputsForProperty(lView, tNode.inputs['class'], classInputVal);
         }
-        updateStylingMap(stylingContext, classes, styles);
-    }
-    function hackImplementationOfElementStyling(classDeclarations, styleDeclarations, styleSanitizer, directive) {
-        var node = getNativeByTNode(getPreviousOrParentTNode(), getLView());
-        ngDevMode && assertDefined(node, 'expecting parent DOM node');
-        var hostStylingHackMap = (node.hostStylingHack || (node.hostStylingHack = new Map()));
-        var squashedClassDeclarations = hackSquashDeclaration(classDeclarations);
-        hostStylingHackMap.set(directive, {
-            classDeclarations: squashedClassDeclarations,
-            styleDeclarations: hackSquashDeclaration(styleDeclarations), styleSanitizer: styleSanitizer
-        });
-        hackSetStaticClasses(node, squashedClassDeclarations);
-    }
-    function hackSetStaticClasses(node, classDeclarations) {
-        // Static classes need to be set here because static classes don't generate
-        // elementClassProp instructions.
-        var lView = getLView();
-        var staticClassStartIndex = classDeclarations.indexOf(1 /* VALUES_MODE */) + 1;
-        var renderer = lView[RENDERER];
-        for (var i = staticClassStartIndex; i < classDeclarations.length; i += 2) {
-            var className = classDeclarations[i];
-            var value = classDeclarations[i + 1];
-            // if value is true, then this is a static class and we should set it now.
-            // class bindings are set separately in elementClassProp.
-            if (value === true) {
-                if (isProceduralRenderer(renderer)) {
-                    renderer.addClass(node, className);
-                }
-                else {
-                    var classList = node.classList;
-                    classList.add(className);
-                }
-            }
-        }
-    }
-    function hackSquashDeclaration(declarations) {
-        // assume the array is correct. This should be fine for View Engine compatibility.
-        return declarations || [];
-    }
-    function hackImplementationOfElementClassProp(index, classIndex, value, directive) {
-        var lView = getLView();
-        var node = getNativeByIndex(index, lView);
-        ngDevMode && assertDefined(node, 'could not locate node');
-        var hostStylingHack = node.hostStylingHack.get(directive);
-        var className = hostStylingHack.classDeclarations[classIndex];
-        var renderer = lView[RENDERER];
-        if (isProceduralRenderer(renderer)) {
-            value ? renderer.addClass(node, className) : renderer.removeClass(node, className);
-        }
         else {
-            var classList = node.classList;
-            value ? classList.add(className) : classList.remove(className);
+            updateStylingMap(stylingContext, classes, styles);
         }
     }
-    function hackImplementationOfElementStylingApply(index, directive) {
-        // Do nothing because the hack implementation is eager.
-    }
-    function hackImplementationOfElementStyleProp(index, styleIndex, value, suffix, directive) {
-        var lView = getLView();
-        var node = getNativeByIndex(index, lView);
-        ngDevMode && assertDefined(node, 'could not locate node');
-        var hostStylingHack = node.hostStylingHack.get(directive);
-        var styleName = hostStylingHack.styleDeclarations[styleIndex];
-        var renderer = lView[RENDERER];
-        setStyle(node, styleName, value, renderer, null);
-    }
+    /* START OF HACK BLOCK */
     function hackImplementationOfElementStylingMap(index, classes, styles, directive) {
         throw new Error('unimplemented. Should not be needed by ViewEngine compatibility');
     }
@@ -6953,7 +7393,7 @@
         // Only component views should be added to the view tree directly. Embedded views are
         // accessed through their containers because they may be removed / re-added later.
         var rendererFactory = lView[RENDERER_FACTORY];
-        var componentView = addToViewTree(lView, previousOrParentTNode.index, createLView(lView, tView, null, def.onPush ? 4 /* Dirty */ : 2 /* CheckAlways */, rendererFactory, lView[RENDERER_FACTORY].createRenderer(native, def)));
+        var componentView = addToViewTree(lView, previousOrParentTNode.index, createLView(lView, tView, null, def.onPush ? 8 /* Dirty */ : 4 /* CheckAlways */, rendererFactory, lView[RENDERER_FACTORY].createRenderer(native, def)));
         componentView[HOST_NODE] = previousOrParentTNode;
         // Component view will always be created before any injected LContainers,
         // so this is a regular element, wrap it with the component view
@@ -7005,7 +7445,7 @@
         var i = 0;
         while (i < attrs.length) {
             var attrName = attrs[i];
-            if (attrName === 1 /* SelectOnly */)
+            if (attrName === 3 /* SelectOnly */)
                 break;
             if (attrName === 0 /* NamespaceURI */) {
                 // We do not allow inputs on namespaced attributes.
@@ -7131,11 +7571,9 @@
         ngDevMode && assertNodeType(previousOrParentTNode, 0 /* Container */);
         setIsParent(true);
         lView[index + HEADER_OFFSET][ACTIVE_INDEX] = 0;
-        if (!getCheckNoChangesMode()) {
-            // We need to execute init hooks here so ngOnInit hooks are called in top level views
-            // before they are called in embedded views (for backwards compatibility).
-            executeInitHooks(lView, tView, getCreationMode());
-        }
+        // We need to execute init hooks here so ngOnInit hooks are called in top level views
+        // before they are called in embedded views (for backwards compatibility).
+        executeInitHooks(lView, tView, getCheckNoChangesMode());
     }
     /**
      * Marks the end of the LContainer.
@@ -7176,7 +7614,7 @@
                     var dynamicViewData = container_1[VIEWS][i];
                     // The directives and pipes are not needed here as an existing view is only being refreshed.
                     ngDevMode && assertDefined(dynamicViewData[TVIEW], 'TView must be allocated');
-                    renderEmbeddedTemplate(dynamicViewData, dynamicViewData[TVIEW], dynamicViewData[CONTEXT], 2 /* Update */);
+                    renderEmbeddedTemplate(dynamicViewData, dynamicViewData[TVIEW], dynamicViewData[CONTEXT]);
                 }
             }
         }
@@ -7233,7 +7671,7 @@
         }
         else {
             // When we create a new LView, we always reset the state of the instructions.
-            viewToRender = createLView(lView, getOrCreateEmbeddedTView(viewBlockId, consts, vars, containerTNode), null, 2 /* CheckAlways */);
+            viewToRender = createLView(lView, getOrCreateEmbeddedTView(viewBlockId, consts, vars, containerTNode), null, 4 /* CheckAlways */);
             if (lContainer[QUERIES]) {
                 viewToRender[QUERIES] = lContainer[QUERIES].createView();
             }
@@ -7241,13 +7679,14 @@
             enterView(viewToRender, viewToRender[TVIEW].node);
         }
         if (lContainer) {
-            if (getCreationMode()) {
+            if (isCreationMode(viewToRender)) {
                 // it is a new view, insert it into collection of views for a given container
                 insertView(viewToRender, lContainer, lView, lContainer[ACTIVE_INDEX], -1);
             }
             lContainer[ACTIVE_INDEX]++;
         }
-        return getRenderFlags(viewToRender);
+        return isCreationMode(viewToRender) ? 1 /* Create */ | 2 /* Update */ :
+            2 /* Update */;
     }
     /**
      * Initialize the TView (e.g. static data) for the active embedded view.
@@ -7277,7 +7716,11 @@
     function embeddedViewEnd() {
         var lView = getLView();
         var viewHost = lView[HOST_NODE];
-        refreshDescendantViews(lView, null);
+        if (isCreationMode(lView)) {
+            refreshDescendantViews(lView); // creation mode pass
+            lView[FLAGS] &= ~1 /* CreationMode */;
+        }
+        refreshDescendantViews(lView); // update mode pass
         leaveView(lView[PARENT]);
         setPreviousOrParentTNode(viewHost);
         setIsParent(false);
@@ -7287,17 +7730,16 @@
      * Refreshes components by entering the component view and processing its bindings, queries, etc.
      *
      * @param adjustedElementIndex  Element index in LView[] (adjusted for HEADER_OFFSET)
-     * @param rf  The render flags that should be used to process this template
      */
-    function componentRefresh(adjustedElementIndex, rf) {
+    function componentRefresh(adjustedElementIndex) {
         var lView = getLView();
         ngDevMode && assertDataInRange(lView, adjustedElementIndex);
         var hostView = getComponentViewByIndex(adjustedElementIndex, lView);
         ngDevMode && assertNodeType(lView[TVIEW].data[adjustedElementIndex], 3 /* Element */);
         // Only attached CheckAlways components or attached, dirty OnPush components should be checked
-        if (viewAttached(hostView) && hostView[FLAGS] & (2 /* CheckAlways */ | 4 /* Dirty */)) {
+        if (viewAttached(hostView) && hostView[FLAGS] & (4 /* CheckAlways */ | 8 /* Dirty */)) {
             syncViewWithBlueprint(hostView);
-            detectChangesInternal(hostView, hostView[CONTEXT], rf);
+            checkView(hostView, hostView[CONTEXT]);
         }
     }
     /**
@@ -7334,7 +7776,7 @@
     }
     /** Returns a boolean for whether the view is attached */
     function viewAttached(view) {
-        return (view[FLAGS] & 8 /* Attached */) === 8 /* Attached */;
+        return (view[FLAGS] & 16 /* Attached */) === 16 /* Attached */;
     }
     /**
      * Instruction to distribute projectable nodes among <ng-content> occurrences in a given template.
@@ -7470,8 +7912,8 @@
     /** If node is an OnPush component, marks its LView dirty. */
     function markDirtyIfOnPush(lView, viewIndex) {
         var childComponentLView = getComponentViewByIndex(viewIndex, lView);
-        if (!(childComponentLView[FLAGS] & 2 /* CheckAlways */)) {
-            childComponentLView[FLAGS] |= 4 /* Dirty */;
+        if (!(childComponentLView[FLAGS] & 4 /* CheckAlways */)) {
+            childComponentLView[FLAGS] |= 8 /* Dirty */;
         }
     }
     /** Wraps an event listener with preventDefault behavior. */
@@ -7486,11 +7928,11 @@
     }
     /** Marks current view and all ancestors dirty */
     function markViewDirty(lView) {
-        while (lView && !(lView[FLAGS] & 64 /* IsRoot */)) {
-            lView[FLAGS] |= 4 /* Dirty */;
+        while (lView && !(lView[FLAGS] & 128 /* IsRoot */)) {
+            lView[FLAGS] |= 8 /* Dirty */;
             lView = lView[PARENT];
         }
-        lView[FLAGS] |= 4 /* Dirty */;
+        lView[FLAGS] |= 8 /* Dirty */;
         ngDevMode && assertDefined(lView[CONTEXT], 'rootContext should be defined');
         var rootContext = lView[CONTEXT];
         scheduleTick(rootContext, 1 /* DetectChanges */);
@@ -7532,7 +7974,7 @@
     function tickRootContext(rootContext) {
         for (var i = 0; i < rootContext.components.length; i++) {
             var rootComponent = rootContext.components[i];
-            renderComponentOrTemplate(readPatchedLView(rootComponent), rootComponent, 2 /* Update */);
+            renderComponentOrTemplate(readPatchedLView(rootComponent), rootComponent);
         }
     }
     /**
@@ -7549,7 +7991,19 @@
      * @param component The component which the change detection should be performed on.
      */
     function detectChanges(component) {
-        detectChangesInternal(getComponentViewByInstance(component), component, null);
+        var view = getComponentViewByInstance(component);
+        detectChangesInternal(view, component);
+    }
+    function detectChangesInternal(view, context) {
+        var rendererFactory = view[RENDERER_FACTORY];
+        if (rendererFactory.begin)
+            rendererFactory.begin();
+        if (isCreationMode(view)) {
+            checkView(view, context); // creation mode pass
+        }
+        checkView(view, context); // update mode pass
+        if (rendererFactory.end)
+            rendererFactory.end();
     }
     /**
      * Synchronously perform change detection on a root view and its components.
@@ -7593,30 +8047,29 @@
         }
     }
     /** Checks the view of the component provided. Does not gate on dirty checks or execute doCheck. */
-    function detectChangesInternal(hostView, component, rf) {
+    function checkView(hostView, component) {
         var hostTView = hostView[TVIEW];
         var oldView = enterView(hostView, hostView[HOST_NODE]);
         var templateFn = hostTView.template;
         var viewQuery = hostTView.viewQuery;
         try {
             namespaceHTML();
-            createViewQuery(viewQuery, rf, hostView[FLAGS], component);
-            templateFn(rf || getRenderFlags(hostView), component);
-            refreshDescendantViews(hostView, rf);
-            updateViewQuery(viewQuery, hostView[FLAGS], component);
+            createViewQuery(viewQuery, hostView, component);
+            templateFn(getRenderFlags(hostView), component);
+            refreshDescendantViews(hostView);
+            updateViewQuery(viewQuery, hostView, component);
         }
         finally {
-            leaveView(oldView, rf === 1 /* Create */);
+            leaveView(oldView);
         }
     }
-    function createViewQuery(viewQuery, renderFlags, viewFlags, component) {
-        if (viewQuery && (renderFlags === 1 /* Create */ ||
-            (renderFlags === null && (viewFlags & 1 /* CreationMode */)))) {
+    function createViewQuery(viewQuery, view, component) {
+        if (viewQuery && isCreationMode(view)) {
             viewQuery(1 /* Create */, component);
         }
     }
-    function updateViewQuery(viewQuery, flags, component) {
-        if (viewQuery && flags & 2 /* Update */) {
+    function updateViewQuery(viewQuery, view, component) {
+        if (viewQuery && !isCreationMode(view)) {
             viewQuery(2 /* Update */, component);
         }
     }
@@ -7859,9 +8312,6 @@
         }
         return null;
     }
-    function delegateToClassInput(tNode) {
-        return tNode.flags & 8 /* hasClassInput */;
-    }
     /**
      * Returns the current OpaqueViewState instance.
      *
@@ -8035,8 +8485,8 @@
         // The first index of the first selector is the tag name.
         var componentTag = componentDef.selectors[0][0];
         var hostRNode = locateHostElement(rendererFactory, opts.host || componentTag);
-        var rootFlags = componentDef.onPush ? 4 /* Dirty */ | 64 /* IsRoot */ :
-            2 /* CheckAlways */ | 64 /* IsRoot */;
+        var rootFlags = componentDef.onPush ? 8 /* Dirty */ | 128 /* IsRoot */ :
+            4 /* CheckAlways */ | 128 /* IsRoot */;
         var rootContext = createRootContext(opts.scheduler, opts.playerHandler);
         var renderer = rendererFactory.createRenderer(hostRNode, componentDef);
         var rootView = createLView(null, createTView(-1, null, 1, 0, null, null, null), rootContext, rootFlags, rendererFactory, renderer, undefined, opts.injector || null);
@@ -8047,7 +8497,9 @@
                 rendererFactory.begin();
             var componentView = createRootComponentView(hostRNode, componentDef, rootView, rendererFactory, renderer, sanitizer);
             component = createRootComponent(componentView, componentDef, rootView, rootContext, opts.hostFeatures || null);
-            refreshDescendantViews(rootView, null);
+            refreshDescendantViews(rootView); // creation mode pass
+            rootView[FLAGS] &= ~1 /* CreationMode */;
+            refreshDescendantViews(rootView); // update mode pass
         }
         finally {
             leaveView(oldView);
@@ -8070,7 +8522,7 @@
     function createRootComponentView(rNode, def, rootView, rendererFactory, renderer, sanitizer) {
         resetComponentState();
         var tView = rootView[TVIEW];
-        var componentView = createLView(rootView, getOrCreateTView(def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery), null, def.onPush ? 4 /* Dirty */ : 2 /* CheckAlways */, rendererFactory, renderer, sanitizer);
+        var componentView = createLView(rootView, getOrCreateTView(def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery), null, def.onPush ? 8 /* Dirty */ : 4 /* CheckAlways */, rendererFactory, renderer, sanitizer);
         var tNode = createNodeAtIndex(0, 3 /* Element */, rNode, null, null);
         if (tView.firstTemplatePass) {
             diPublicInInjector(getOrCreateNodeInjectorForNode(tNode, rootView), rootView, def.type);
@@ -8335,7 +8787,7 @@
         }
     }
     function maybeUnwrapEmpty(value) {
-        if (value === EMPTY) {
+        if (value === EMPTY_OBJ) {
             return {};
         }
         else if (value === EMPTY_ARRAY) {
@@ -8559,7 +9011,7 @@
     var IDENT = function (value) {
         return value;
     };
-    var EMPTY$1 = [];
+    var EMPTY = [];
     var CIRCULAR = IDENT;
     var MULTI_PROVIDER_FN = function () {
         return Array.prototype.slice.call(arguments);
@@ -8577,8 +9029,8 @@
             this.parent = parent;
             this.source = source;
             var records = this._records = new Map();
-            records.set(Injector, { token: Injector, fn: IDENT, deps: EMPTY$1, value: this, useNew: false });
-            records.set(INJECTOR$1, { token: INJECTOR$1, fn: IDENT, deps: EMPTY$1, value: this, useNew: false });
+            records.set(Injector, { token: Injector, fn: IDENT, deps: EMPTY, value: this, useNew: false });
+            records.set(INJECTOR$1, { token: INJECTOR$1, fn: IDENT, deps: EMPTY, value: this, useNew: false });
             recursivelyProcessProviders(records, providers);
         }
         StaticInjector.prototype.get = function (token, notFoundValue, flags) {
@@ -8608,7 +9060,7 @@
     function resolveProvider(provider) {
         var deps = computeDeps(provider);
         var fn = IDENT;
-        var value = EMPTY$1;
+        var value = EMPTY;
         var useNew = false;
         var provide = resolveForwardRef(provider.provide);
         if (USE_VALUE in provider) {
@@ -8668,7 +9120,7 @@
                             deps: [],
                             useNew: false,
                             fn: MULTI_PROVIDER_FN,
-                            value: EMPTY$1
+                            value: EMPTY
                         });
                     }
                     // Treat the provider as the token.
@@ -8699,7 +9151,7 @@
             path.unshift(token);
             if (record && record.value == CIRCULAR) {
                 // Reset the Circular flag.
-                record.value = EMPTY$1;
+                record.value = EMPTY;
             }
             throw e;
         }
@@ -8714,13 +9166,13 @@
             if (value == CIRCULAR) {
                 throw Error(NO_NEW_LINE + 'Circular dependency');
             }
-            else if (value === EMPTY$1) {
+            else if (value === EMPTY) {
                 record.value = CIRCULAR;
                 var obj = undefined;
                 var useNew = record.useNew;
                 var fn = record.fn;
                 var depRecords = record.deps;
-                var deps = EMPTY$1;
+                var deps = EMPTY;
                 if (depRecords.length) {
                     deps = [];
                     for (var i = 0; i < depRecords.length; i++) {
@@ -8749,7 +9201,7 @@
         return value;
     }
     function computeDeps(provider) {
-        var deps = EMPTY$1;
+        var deps = EMPTY;
         var providerDeps = provider.deps;
         if (providerDeps && providerDeps.length) {
             deps = [];
@@ -9609,7 +10061,7 @@
         });
         Object.defineProperty(ViewRef.prototype, "destroyed", {
             get: function () {
-                return (this._lView[FLAGS] & 32 /* Destroyed */) === 32 /* Destroyed */;
+                return (this._lView[FLAGS] & 64 /* Destroyed */) === 64 /* Destroyed */;
             },
             enumerable: true,
             configurable: true
@@ -9716,7 +10168,7 @@
          * }
          * ```
          */
-        ViewRef.prototype.detach = function () { this._lView[FLAGS] &= ~8 /* Attached */; };
+        ViewRef.prototype.detach = function () { this._lView[FLAGS] &= ~16 /* Attached */; };
         /**
          * Re-attaches a view to the change detection tree.
          *
@@ -9773,7 +10225,7 @@
          * }
          * ```
          */
-        ViewRef.prototype.reattach = function () { this._lView[FLAGS] |= 8 /* Attached */; };
+        ViewRef.prototype.reattach = function () { this._lView[FLAGS] |= 16 /* Attached */; };
         /**
          * Checks the view and its children.
          *
@@ -9795,16 +10247,7 @@
          *
          * See {@link ChangeDetectorRef#detach detach} for more information.
          */
-        ViewRef.prototype.detectChanges = function () {
-            var rendererFactory = this._lView[RENDERER_FACTORY];
-            if (rendererFactory.begin) {
-                rendererFactory.begin();
-            }
-            detectChangesInternal(this._lView, this.context, null);
-            if (rendererFactory.end) {
-                rendererFactory.end();
-            }
-        };
+        ViewRef.prototype.detectChanges = function () { detectChangesInternal(this._lView, this.context); };
         /**
          * Checks the change detector and its children, and throws if any changes are detected.
          *
@@ -9934,7 +10377,7 @@
                     if (container$$1) {
                         insertView(lView, container$$1, hostView, index, hostTNode.index);
                     }
-                    renderEmbeddedTemplate(lView, this._tView, context, 1 /* Create */);
+                    renderEmbeddedTemplate(lView, this._tView, context);
                     var viewRef = new ViewRef(lView, context, -1);
                     viewRef._tViewNode = lView[HOST_NODE];
                     return viewRef;
@@ -10003,7 +10446,7 @@
                         var parentView = getParentInjectorView(parentLocation, this._hostView);
                         var parentTNode = getParentInjectorTNode(parentLocation, this._hostView, this._hostTNode);
                         return !hasParentInjector(parentLocation) || parentTNode == null ?
-                            new NullInjector() :
+                            new NodeInjector(null, this._hostView) :
                             new NodeInjector(parentTNode, parentView);
                     },
                     enumerable: true,
@@ -10344,7 +10787,7 @@
     /**
      * @publicApi
      */
-    var VERSION = new Version('7.2.0-rc.0');
+    var VERSION = new Version('7.2.3');
 
     /**
      * @license
@@ -10451,8 +10894,8 @@
             var hostRNode = isInternalRootView ?
                 elementCreate(this.selector, rendererFactory.createRenderer(null, this.componentDef)) :
                 locateHostElement(rendererFactory, rootSelectorOrNode);
-            var rootFlags = this.componentDef.onPush ? 4 /* Dirty */ | 64 /* IsRoot */ :
-                2 /* CheckAlways */ | 64 /* IsRoot */;
+            var rootFlags = this.componentDef.onPush ? 8 /* Dirty */ | 128 /* IsRoot */ :
+                4 /* CheckAlways */ | 128 /* IsRoot */;
             var rootContext = !isInternalRootView ? rootViewInjector.get(ROOT_CONTEXT) : createRootContext();
             var renderer = rendererFactory.createRenderer(hostRNode, this.componentDef);
             if (rootSelectorOrNode && hostRNode) {
@@ -10505,10 +10948,10 @@
                 // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
                 component = createRootComponent(componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
                 addToViewTree(rootLView, HEADER_OFFSET, componentView);
-                refreshDescendantViews(rootLView, 1 /* Create */);
+                refreshDescendantViews(rootLView);
             }
             finally {
-                leaveView(oldLView, true);
+                leaveView(oldLView);
                 if (rendererFactory.end)
                     rendererFactory.end();
             }
@@ -10669,7 +11112,7 @@
             try {
                 html = encodeURI(html);
             }
-            catch (e) {
+            catch (_a) {
                 return null;
             }
             var xhr = new XMLHttpRequest();
@@ -10698,7 +11141,7 @@
                 body.removeChild(body.firstChild);
                 return body;
             }
-            catch (e) {
+            catch (_a) {
                 return null;
             }
         };
@@ -10761,7 +11204,7 @@
         try {
             return !!window.DOMParser;
         }
-        catch (e) {
+        catch (_a) {
             return false;
         }
     }
@@ -11053,7 +11496,7 @@
             var sanitizer = new SanitizingHtmlSerializer();
             var safeHtml = sanitizer.sanitizeChildren(getTemplateContent(inertBodyElement) || inertBodyElement);
             if (isDevMode() && sanitizer.sanitizedSomething) {
-                console.warn('WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).');
+                console.warn('WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss');
             }
             return safeHtml;
         }
@@ -11108,11 +11551,11 @@
      * found in the LICENSE file at https://angular.io/license
      */
     var MARKER = "\uFFFD";
-    var ICU_BLOCK_REGEX = /^\s*(�\d+�)\s*,\s*(select|plural)\s*,/;
+    var ICU_BLOCK_REGEX = /^\s*(�\d+:?\d*�)\s*,\s*(select|plural)\s*,/;
     var SUBTEMPLATE_REGEXP = /�\/?\*(\d+:\d+)�/gi;
     var PH_REGEXP = /�(\/?[#*]\d+):?\d*�/gi;
     var BINDING_REGEXP = /�(\d+):?\d*�/gi;
-    var ICU_REGEXP = /({\s*�\d+�\s*,\s*\S{6}\s*,[\s\S]*})/gi;
+    var ICU_REGEXP = /({\s*�\d+:?\d*�\s*,\s*\S{6}\s*,[\s\S]*})/gi;
     // i18nPostproocess regexps
     var PP_PLACEHOLDERS = /\[(�.+?�?)\]/g;
     var PP_ICU_VARS = /({\s*)(VAR_(PLURAL|SELECT)(_\d+)?)(\s*,)/g;
@@ -12645,7 +13088,7 @@
         // TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
         var bindingIndex = getBindingRoot() + slotOffset;
         var lView = getLView();
-        return getCreationMode() ?
+        return isCreationMode() ?
             updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :
             getBinding(lView, bindingIndex);
     }
@@ -12899,7 +13342,7 @@
      */
     function getPipeDef$1(name, registry) {
         if (registry) {
-            for (var i = 0; i < registry.length; i++) {
+            for (var i = registry.length - 1; i >= 0; i--) {
                 var pipeDef = registry[i];
                 if (name === pipeDef.name) {
                     return pipeDef;
@@ -13326,7 +13769,7 @@
             return factoryFn();
         }
         else {
-            var matchingIdx = locateDirectiveOrProvider(tNode, currentView, read, false);
+            var matchingIdx = locateDirectiveOrProvider(tNode, currentView, read, false, false);
             if (matchingIdx !== null) {
                 return getNodeInjectable(currentView[TVIEW].data, currentView, matchingIdx, tNode);
             }
@@ -13371,7 +13814,7 @@
                     result = queryByTemplateRef(type, tNode, currentView, predicate.read);
                 }
                 else {
-                    var matchingIdx = locateDirectiveOrProvider(tNode, currentView, type, false);
+                    var matchingIdx = locateDirectiveOrProvider(tNode, currentView, type, false, false);
                     if (matchingIdx !== null) {
                         result = queryRead(tNode, currentView, predicate.read, matchingIdx);
                     }
@@ -13935,6 +14378,7 @@
         'ɵload': load,
         'ɵprojection': projection,
         'ɵelementProperty': elementProperty,
+        'ɵcomponentHostSyntheticProperty': componentHostSyntheticProperty,
         'ɵpipeBind1': pipeBind1,
         'ɵpipeBind2': pipeBind2,
         'ɵpipeBind3': pipeBind3,
@@ -13947,6 +14391,7 @@
         'ɵregisterContentQuery': registerContentQuery,
         'ɵreference': reference,
         'ɵelementStyling': elementStyling,
+        'ɵelementHostAttrs': elementHostAttrs,
         'ɵelementStylingMap': elementStylingMap,
         'ɵelementStyleProp': elementStyleProp,
         'ɵelementStylingApply': elementStylingApply,
@@ -14444,10 +14889,12 @@
                 if (ngModuleDef === null) {
                     ngModuleDef = getCompilerFacade().compileNgModule(angularCoreEnv, "ng://" + moduleType.name + "/ngModuleDef.js", {
                         type: moduleType,
-                        bootstrap: flatten$1(ngModule.bootstrap || EMPTY_ARRAY$2),
-                        declarations: declarations,
-                        imports: flatten$1(ngModule.imports || EMPTY_ARRAY$2).map(expandModuleWithProviders),
-                        exports: flatten$1(ngModule.exports || EMPTY_ARRAY$2).map(expandModuleWithProviders),
+                        bootstrap: flatten$1(ngModule.bootstrap || EMPTY_ARRAY$2, resolveForwardRef),
+                        declarations: declarations.map(resolveForwardRef),
+                        imports: flatten$1(ngModule.imports || EMPTY_ARRAY$2, resolveForwardRef)
+                            .map(expandModuleWithProviders),
+                        exports: flatten$1(ngModule.exports || EMPTY_ARRAY$2, resolveForwardRef)
+                            .map(expandModuleWithProviders),
                         emitInline: true,
                     });
                 }
@@ -14468,8 +14915,8 @@
                         deps: reflectDependencies(moduleType),
                         providers: ngModule.providers || EMPTY_ARRAY$2,
                         imports: [
-                            ngModule.imports || EMPTY_ARRAY$2,
-                            ngModule.exports || EMPTY_ARRAY$2,
+                            (ngModule.imports || EMPTY_ARRAY$2).map(resolveForwardRef),
+                            (ngModule.exports || EMPTY_ARRAY$2).map(resolveForwardRef),
                         ],
                     };
                     ngInjectorDef = getCompilerFacade().compileInjector(angularCoreEnv, "ng://" + moduleType.name + "/ngInjectorDef.js", meta);
@@ -14488,7 +14935,7 @@
         var ngModuleDef = getNgModuleDef(moduleType, true);
         var errors = [];
         ngModuleDef.declarations.forEach(verifyDeclarationsHaveDefinitions);
-        var combinedDeclarations = __spread(ngModuleDef.declarations, flatten$1(ngModuleDef.imports.map(computeCombinedExports)));
+        var combinedDeclarations = __spread(ngModuleDef.declarations.map(resolveForwardRef), flatten$1(ngModuleDef.imports.map(computeCombinedExports), resolveForwardRef));
         ngModuleDef.exports.forEach(verifyExportsAreDeclaredOrReExported);
         ngModuleDef.declarations.forEach(verifyDeclarationIsUnique);
         ngModuleDef.declarations.forEach(verifyComponentEntryComponentsIsPartOfNgModule);
@@ -14777,9 +15224,9 @@
                 var compiler = getCompilerFacade();
                 if (ngComponentDef === null) {
                     if (componentNeedsResolution(metadata)) {
-                        var error = ["Component '" + stringify(type) + "' is not resolved:"];
+                        var error = ["Component '" + stringify$1(type) + "' is not resolved:"];
                         if (metadata.templateUrl) {
-                            error.push(" - templateUrl: " + stringify(metadata.templateUrl));
+                            error.push(" - templateUrl: " + stringify$1(metadata.templateUrl));
                         }
                         if (metadata.styleUrls && metadata.styleUrls.length) {
                             error.push(" - styleUrls: " + JSON.stringify(metadata.styleUrls));
@@ -14787,8 +15234,8 @@
                         error.push("Did you run and wait for 'resolveComponentResources()'?");
                         throw new Error(error.join('\n'));
                     }
-                    var meta = __assign({}, directiveMetadata(type, metadata), { template: metadata.template || '', preserveWhitespaces: metadata.preserveWhitespaces || false, styles: metadata.styles || EMPTY_ARRAY, animations: metadata.animations, viewQueries: extractQueriesMetadata(type, getReflect().propMetadata(type), isViewQuery), directives: [], pipes: new Map(), encapsulation: metadata.encapsulation || exports.ViewEncapsulation.Emulated, interpolation: metadata.interpolation, viewProviders: metadata.viewProviders || null });
-                    ngComponentDef = compiler.compileComponent(angularCoreEnv, "ng://" + stringify(type) + "/template.html", meta);
+                    var meta = __assign({}, directiveMetadata(type, metadata), { template: metadata.template || '', preserveWhitespaces: metadata.preserveWhitespaces || false, styles: metadata.styles || EMPTY_ARRAY, animations: metadata.animations, viewQueries: extractQueriesMetadata(type, getReflect().propMetadata(type), isViewQuery), directives: [], changeDetection: metadata.changeDetection, pipes: new Map(), encapsulation: metadata.encapsulation || exports.ViewEncapsulation.Emulated, interpolation: metadata.interpolation, viewProviders: metadata.viewProviders || null });
+                    ngComponentDef = compiler.compileComponent(angularCoreEnv, "ng://" + stringify$1(type) + "/template.html", meta);
                     // When NgModule decorator executed, we enqueued the module definition such that
                     // it would only dequeue and add itself as module scope to all of its declarations,
                     // but only if  if all of its declarations had resolved. This call runs the check
@@ -14850,7 +15297,7 @@
             typeArgumentCount: 0,
             selector: metadata.selector,
             deps: reflectDependencies(type),
-            host: metadata.host || EMPTY_OBJ$1,
+            host: metadata.host || EMPTY_OBJ,
             propMetadata: propMetadata,
             inputs: metadata.inputs || EMPTY_ARRAY,
             outputs: metadata.outputs || EMPTY_ARRAY,
@@ -14864,9 +15311,8 @@
             providers: metadata.providers || null,
         };
     }
-    var EMPTY_OBJ$1 = {};
     function convertToR3QueryPredicate(selector) {
-        return typeof selector === 'string' ? splitByComma(selector) : selector;
+        return typeof selector === 'string' ? splitByComma(selector) : resolveForwardRef(selector);
     }
     function convertToR3QueryMetadata(propertyName, ann) {
         return {
@@ -14885,7 +15331,7 @@
                     if (isQueryAnn(ann)) {
                         if (!ann.selector) {
                             throw new Error("Can't construct a query for the property \"" + field + "\" of " +
-                                ("\"" + stringify(type) + "\" since the query selector wasn't defined."));
+                                ("\"" + stringify$1(type) + "\" since the query selector wasn't defined."));
                         }
                         queriesMeta.push(convertToR3QueryMetadata(field, ann));
                     }
@@ -18349,8 +18795,8 @@
                     var lNode = lContext.lView[lContext.nodeIndex];
                     var stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
                     if (stylingContext) {
-                        for (var i = 8 /* SingleStylesStartPosition */; i < lNode.length; i += 4 /* Size */) {
-                            if (isClassBased(lNode, i)) {
+                        for (var i = 9 /* SingleStylesStartPosition */; i < lNode.length; i += 4 /* Size */) {
+                            if (isClassBasedValue(lNode, i)) {
                                 var className = getProp(lNode, i);
                                 var value = getValue(lNode, i);
                                 if (typeof value == 'boolean') {
@@ -18382,8 +18828,8 @@
                     var lNode = lContext.lView[lContext.nodeIndex];
                     var stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
                     if (stylingContext) {
-                        for (var i = 8 /* SingleStylesStartPosition */; i < lNode.length; i += 4 /* Size */) {
-                            if (!isClassBased(lNode, i)) {
+                        for (var i = 9 /* SingleStylesStartPosition */; i < lNode.length; i += 4 /* Size */) {
+                            if (!isClassBasedValue(lNode, i)) {
                                 var styleName = getProp(lNode, i);
                                 var value = getValue(lNode, i);
                                 if (value !== null) {
@@ -24058,6 +24504,7 @@
     exports.INJECTOR = INJECTOR$1;
     exports.Injector = Injector;
     exports.inject = inject;
+    exports.ɵinject = inject;
     exports.ReflectiveInjector = ReflectiveInjector;
     exports.createInjector = createInjector;
     exports.ResolvedReflectiveFactory = ResolvedReflectiveFactory;
@@ -24080,6 +24527,7 @@
     exports.CompilerFactory = CompilerFactory;
     exports.ModuleWithComponentFactories = ModuleWithComponentFactories;
     exports.ComponentFactory = ComponentFactory;
+    exports.ɵComponentFactory = ComponentFactory;
     exports.ComponentRef = ComponentRef;
     exports.ComponentFactoryResolver = ComponentFactoryResolver;
     exports.ElementRef = ElementRef;
@@ -24110,11 +24558,9 @@
     exports.ɵisDefaultChangeDetectionStrategy = isDefaultChangeDetectionStrategy;
     exports.ɵConsole = Console;
     exports.ɵgetInjectableDef = getInjectableDef;
-    exports.ɵinject = inject;
     exports.ɵsetCurrentInjector = setCurrentInjector;
     exports.ɵAPP_ROOT = APP_ROOT;
     exports.ɵivyEnabled = ivyEnabled;
-    exports.ɵComponentFactory = ComponentFactory;
     exports.ɵCodegenComponentFactoryResolver = CodegenComponentFactoryResolver;
     exports.ɵresolveComponentResources = resolveComponentResources;
     exports.ɵReflectionCapabilities = ReflectionCapabilities;
@@ -24202,6 +24648,7 @@
     exports.ɵloadQueryList = loadQueryList;
     exports.ɵelementEnd = elementEnd;
     exports.ɵelementProperty = elementProperty;
+    exports.ɵcomponentHostSyntheticProperty = componentHostSyntheticProperty;
     exports.ɵprojectionDef = projectionDef;
     exports.ɵreference = reference;
     exports.ɵenableBindings = enableBindings;
@@ -24211,6 +24658,7 @@
     exports.ɵelementContainerStart = elementContainerStart;
     exports.ɵelementContainerEnd = elementContainerEnd;
     exports.ɵelementStyling = elementStyling;
+    exports.ɵelementHostAttrs = elementHostAttrs;
     exports.ɵelementStylingMap = elementStylingMap;
     exports.ɵelementStyleProp = elementStyleProp;
     exports.ɵelementStylingApply = elementStylingApply;
@@ -24300,5 +24748,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=core.umd.js.map