fixup! feat(ivy): adding support for ngNonBindable attribute

packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts

@@ -156,11 +156,11 @@ describe('compiler compliance: bindings', () => {
         template:function MyComponent_Template(rf, $ctx$){
           if (rf & 1) {
             $i0$.ɵelementStart(0, "b", $_c0$, $_c1$);
-            $i0$.ɵsetBindingsDisabled();
+            $i0$.ɵdisableBindings();
             $i0$.ɵelementStart(2, "i");
             $i0$.ɵtext(3, "Hello {{ name }}!");
             $i0$.ɵelementEnd();
-            $i0$.ɵsetBindingsEnabled();
+            $i0$.ɵenableBindings();
             $i0$.ɵelementEnd();
             $i0$.ɵtext(4);
           }
@@ -187,10 +187,10 @@ describe('compiler compliance: bindings', () => {
         template:function MyComponent_Template(rf, $ctx$){
           if (rf & 1) {
             $i0$.ɵelementStart(0, "div");
-            $i0$.ɵsetBindingsDisabled();
+            $i0$.ɵdisableBindings();
             $i0$.ɵelement(1, "input", $_c0$);
             $i0$.ɵtext(2, " {{ myInput.value }} ");
-            $i0$.ɵsetBindingsEnabled();
+            $i0$.ɵenableBindings();
             $i0$.ɵelementEnd();
         }
       `;
@@ -211,9 +211,9 @@ describe('compiler compliance: bindings', () => {
         template:function MyComponent_Template(rf, $ctx$){
           if (rf & 1) {
             $i0$.ɵelementStart(0, "div");
-            $i0$.ɵsetBindingsDisabled();
+            $i0$.ɵdisableBindings();
             $i0$.ɵelement(1, "div", $_c0$);
-            $i0$.ɵsetBindingsEnabled();
+            $i0$.ɵenableBindings();
             $i0$.ɵelementEnd();
         }
       `;

packages/compiler/src/render3/r3_identifiers.ts

@@ -60,10 +60,9 @@ export class Identifiers {
 
   static bind: o.ExternalReference = {name: 'ɵbind', moduleName: CORE};
 
-  static setBindingsEnabled: o.ExternalReference = {name: 'ɵsetBindingsEnabled', moduleName: CORE};
+  static enableBindings: o.ExternalReference = {name: 'ɵenableBindings', moduleName: CORE};
 
-  static setBindingsDisabled:
+  static disableBindings: o.ExternalReference = {name: 'ɵdisableBindings', moduleName: CORE};
-      o.ExternalReference = {name: 'ɵsetBindingsDisabled', moduleName: CORE};
 
   static getCurrentView: o.ExternalReference = {name: 'ɵgetCurrentView', moduleName: CORE};
 

packages/compiler/src/render3/view/template.ts

@@ -492,7 +492,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
           trimTrailingNulls(parameters));
 
       if (isNonBindableMode) {
-        this.creationInstruction(element.sourceSpan, R3.setBindingsDisabled);
+        this.creationInstruction(element.sourceSpan, R3.disableBindings);
       }
 
       // initial styling for static style="..." attributes
@@ -661,8 +661,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
     if (!createSelfClosingInstruction) {
       // Finish element construction mode.
       if (isNonBindableMode) {
-        this.creationInstruction(
+        this.creationInstruction(element.endSourceSpan || element.sourceSpan, R3.enableBindings);
-            element.endSourceSpan || element.sourceSpan, R3.setBindingsEnabled);
       }
       this.creationInstruction(
           element.endSourceSpan || element.sourceSpan,

packages/core/src/core_render3_private_export.ts

@@ -84,8 +84,8 @@ export {
   elementProperty as ɵelementProperty,
   projectionDef as ɵprojectionDef,
   reference as ɵreference,
-  setBindingsEnabled as ɵsetBindingsEnabled,
+  enableBindings as ɵenableBindings,
-  setBindingsDisabled as ɵsetBindingsDisabled,
+  disableBindings as ɵdisableBindings,
   elementAttribute as ɵelementAttribute,
   elementStyling as ɵelementStyling,
   elementStylingMap as ɵelementStylingMap,

packages/core/src/render3/index.ts

@@ -67,8 +67,8 @@ export {
   namespaceMathML,
   namespaceSVG,
 
-  setBindingsEnabled,
+  enableBindings,
-  setBindingsDisabled,
+  disableBindings,
 
   projection,
   projectionDef,

packages/core/src/render3/instructions.ts

@@ -99,6 +99,24 @@ export function getCurrentSanitizer(): Sanitizer|null {
  */
 let elementDepthCount !: number;
 
+/**
+ * Stores wether directives should be matched to elements.
+ *
+ * When template contains `ngNonBindable` than we need to prevent the runtime form matching
+ * directives on children of that element.
+ *
+ * Example:
+ * ```
+ * <my-comp my-directive>
+ *   Should match component / directive.
+ * </my-comp>
+ * <div ngNonBindable>
+ *   <my-comp my-directive>
+ *     Should not match component / directive because we are in ngNonBindable.
+ *   </my-comp>
+ * </div>
+ * ```
+ */
 let bindingsEnabled !: boolean;
 
 /**
@@ -1399,18 +1417,44 @@ export function elementProperty<T>(
 }
 
 /**
- * Enables bindings processing for further instructions
+ * Enables directive matching on elements.
- * (used while processing "ngNonBindable" element's attribute).
+ *
+ *  * Example:
+ * ```
+ * <my-comp my-directive>
+ *   Should match component / directive.
+ * </my-comp>
+ * <div ngNonBindable>
+ *   <!-- disabledBindings() -->
+ *   <my-comp my-directive>
+ *     Should not match component / directive because we are in ngNonBindable.
+ *   </my-comp>
+ *   <!-- enableBindings() -->
+ * </div>
+ * ```
  */
-export function setBindingsEnabled(): void {
+export function enableBindings(): void {
   bindingsEnabled = true;
 }
 
 /**
- * Disables bindings processing for further instructions
+ * Disables directive matching on element.
- * (used while processing "ngNonBindable" element's attribute).
+ *
+ *  * Example:
+ * ```
+ * <my-comp my-directive>
+ *   Should match component / directive.
+ * </my-comp>
+ * <div ngNonBindable>
+ *   <!-- disabledBindings() -->
+ *   <my-comp my-directive>
+ *     Should not match component / directive because we are in ngNonBindable.
+ *   </my-comp>
+ *   <!-- enableBindings() -->
+ * </div>
+ * ```
  */
-export function setBindingsDisabled(): void {
+export function disableBindings(): void {
   bindingsEnabled = false;
 }
 

packages/core/src/render3/jit/environment.ts

@@ -46,8 +46,8 @@ export const angularCoreEnv: {[name: string]: Function} = {
   'ɵnamespaceHTML': r3.namespaceHTML,
   'ɵnamespaceMathML': r3.namespaceMathML,
   'ɵnamespaceSVG': r3.namespaceSVG,
-  'ɵsetBindingsEnabled': r3.setBindingsEnabled,
+  'ɵenableBindings': r3.enableBindings,
-  'ɵsetBindingsDisabled': r3.setBindingsDisabled,
+  'ɵdisableBindings': r3.disableBindings,
   'ɵelementStart': r3.elementStart,
   'ɵelementEnd': r3.elementEnd,
   'ɵelement': r3.element,

packages/core/test/render3/integration_spec.ts

@@ -11,7 +11,7 @@ import {ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
 import {RendererStyleFlags2, RendererType2} from '../../src/render/api';
 import {AttributeMarker, defineComponent, defineDirective} from '../../src/render3/index';
 
-import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, setBindingsEnabled, setBindingsDisabled, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, reference, text, textBinding, template} from '../../src/render3/instructions';
+import {NO_CHANGE, bind, container, containerRefreshEnd, containerRefreshStart, element, elementAttribute, elementClassProp, elementContainerEnd, elementContainerStart, elementEnd, elementProperty, elementStart, elementStyleProp, elementStyling, elementStylingApply, embeddedViewEnd, embeddedViewStart, enableBindings, disableBindings, interpolation1, interpolation2, interpolation3, interpolation4, interpolation5, interpolation6, interpolation7, interpolation8, interpolationV, listener, load, loadDirective, projection, projectionDef, reference, text, textBinding, template} from '../../src/render3/instructions';
 import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition';
 import {RElement, Renderer3, RendererFactory3, domRendererFactory3, RText, RComment, RNode, RendererStyleFlags3, ProceduralRenderer3} from '../../src/render3/interfaces/renderer';
 import {HEADER_OFFSET, CONTEXT, DIRECTIVES} from '../../src/render3/interfaces/view';
@@ -143,11 +143,11 @@ describe('render3 integration test', () => {
       const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'b', ['id', 'my-id'], ['myRef', '']);
-          setBindingsDisabled();
+          disableBindings();
           elementStart(2, 'i');
           text(3, 'Hello {{ name }}!');
           elementEnd();
-          setBindingsEnabled();
+          enableBindings();
           elementEnd();
           text(4);
         }
@@ -182,11 +182,11 @@ describe('render3 integration test', () => {
       const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'b', ['directive', '']);
-          setBindingsDisabled();
+          disableBindings();
           elementStart(1, 'i');
           text(2, 'Hello {{ name }}!');
           elementEnd();
-          setBindingsEnabled();
+          enableBindings();
           elementEnd();
         }
       }, 3, 0, [TestDirective]);
@@ -217,11 +217,11 @@ describe('render3 integration test', () => {
       const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
         if (rf & RenderFlags.Create) {
           elementStart(0, 'b');
-          setBindingsDisabled();
+          disableBindings();
           elementStart(1, 'i', ['directive', '']);
           text(2, 'Hello {{ name }}!');
           elementEnd();
-          setBindingsEnabled();
+          enableBindings();
           elementEnd();
         }
       }, 3, 0, [TestDirective]);