diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
index 898133a63f..9ad75894a9 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
@@ -512,6 +512,11 @@ class TcbDirectiveCtorOp extends TcbOp {
 
     const inputs = getBoundInputs(this.dir, this.node, this.tcb);
     for (const input of inputs) {
+      // Skip text attributes if configured to do so.
+      if (!this.tcb.env.config.checkTypeOfAttributes &&
+          input.attribute instanceof TmplAstTextAttribute) {
+        continue;
+      }
       for (const fieldName of input.fieldNames) {
         // Skip the field if an attribute has already been bound to it; we can't have a duplicate
         // key in the type constructor call.
@@ -654,6 +659,12 @@ class TcbDirectiveInputsOp extends TcbOp {
       }
 
       addParseSpanInfo(assignment, input.attribute.sourceSpan);
+      // Ignore diagnostics for text attributes if configured to do so.
+      if (!this.tcb.env.config.checkTypeOfAttributes &&
+          input.attribute instanceof TmplAstTextAttribute) {
+        markIgnoreDiagnostics(assignment);
+      }
+
       this.scope.addStatement(ts.createExpressionStatement(assignment));
     }
 
@@ -1732,11 +1743,6 @@ function getBoundInputs(
       return;
     }
 
-    // Skip text attributes if configured to do so.
-    if (!tcb.env.config.checkTypeOfAttributes && attr instanceof TmplAstTextAttribute) {
-      return;
-    }
-
     // Skip the attribute if the directive does not have an input for it.
     const inputs = directive.inputs.getByBindingPropertyName(attr.name);
     if (inputs === null) {
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/test/type_checker__get_symbol_of_template_node_spec.ts b/packages/compiler-cli/src/ngtsc/typecheck/test/type_checker__get_symbol_of_template_node_spec.ts
index cf74e87a2f..464282fae3 100644
--- a/packages/compiler-cli/src/ngtsc/typecheck/test/type_checker__get_symbol_of_template_node_spec.ts
+++ b/packages/compiler-cli/src/ngtsc/typecheck/test/type_checker__get_symbol_of_template_node_spec.ts
@@ -9,7 +9,7 @@
 import {ASTWithSource, Binary, BindingPipe, Conditional, Interpolation, PropertyRead, TmplAstBoundAttribute, TmplAstBoundText, TmplAstElement, TmplAstNode, TmplAstReference, TmplAstTemplate} from '@angular/compiler';
 import * as ts from 'typescript';
 
-import {absoluteFrom, getSourceFileOrError} from '../../file_system';
+import {absoluteFrom, AbsoluteFsPath, getSourceFileOrError} from '../../file_system';
 import {runInEachFileSystem} from '../../file_system/testing';
 import {ClassDeclaration} from '../../reflection';
 import {DirectiveSymbol, DomBindingSymbol, ElementSymbol, ExpressionSymbol, InputBindingSymbol, OutputBindingSymbol, ReferenceSymbol, Symbol, SymbolKind, TemplateSymbol, TemplateTypeChecker, TypeCheckingConfig, VariableSymbol} from '../api';
@@ -66,44 +66,61 @@ runInEachFileSystem(() => {
       expect(beforeSymbol).not.toBe(afterSymbol);
     });
 
-    it('should get a symbol for text attributes corresponding with a directive input', () => {
-      const fileName = absoluteFrom('/main.ts');
-      const dirFile = absoluteFrom('/dir.ts');
-      const templateString = `<div name="helloWorld"></div>`;
-      const {templateTypeChecker, program} = setup(
-          [
-            {
-              fileName,
-              templates: {'Cmp': templateString},
-              declarations: [{
-                name: 'NameDiv',
-                selector: 'div[name]',
-                file: dirFile,
-                type: 'directive',
-                inputs: {name: 'name'},
-              }]
-            },
-            {
-              fileName: dirFile,
-              source: `export class NameDiv {name!: string;}`,
-              templates: {},
-            }
-          ],
-      );
-      const sf = getSourceFileOrError(program, fileName);
-      const cmp = getClass(sf, 'Cmp');
-      const {attributes} = getAstElements(templateTypeChecker, cmp)[0];
+    describe('should get a symbol for text attributes corresponding with a directive input', () => {
+      let fileName: AbsoluteFsPath;
+      let targets: TypeCheckingTarget[];
+      beforeEach(() => {
+        fileName = absoluteFrom('/main.ts');
+        const dirFile = absoluteFrom('/dir.ts');
+        const templateString = `<div name="helloWorld"></div>`;
+        targets = [
+          {
+            fileName,
+            templates: {'Cmp': templateString} as {[key: string]: string},
+            declarations: [{
+              name: 'NameDiv',
+              selector: 'div[name]',
+              file: dirFile,
+              type: 'directive' as const,
+              inputs: {name: 'name'},
+            }]
+          },
+          {
+            fileName: dirFile,
+            source: `export class NameDiv {name!: string;}`,
+            templates: {},
+          }
+        ];
+      });
 
-      const symbol = templateTypeChecker.getSymbolOfNode(attributes[0], cmp)!;
-      assertInputBindingSymbol(symbol);
-      expect(
-          (symbol.bindings[0].tsSymbol!.declarations[0] as ts.PropertyDeclaration).name.getText())
-          .toEqual('name');
+      it('checkTypeOfAttributes = true', () => {
+        const {templateTypeChecker, program} = setup(targets, {checkTypeOfAttributes: true});
+        const sf = getSourceFileOrError(program, fileName);
+        const cmp = getClass(sf, 'Cmp');
+        const {attributes} = getAstElements(templateTypeChecker, cmp)[0];
+        const symbol = templateTypeChecker.getSymbolOfNode(attributes[0], cmp)!;
+        assertInputBindingSymbol(symbol);
+        expect(
+            (symbol.bindings[0].tsSymbol!.declarations[0] as ts.PropertyDeclaration).name.getText())
+            .toEqual('name');
 
-      // Ensure we can go back to the original location using the shim location
-      const mapping =
-          templateTypeChecker.getTemplateMappingAtShimLocation(symbol.bindings[0].shimLocation)!;
-      expect(mapping.span.toString()).toEqual('name');
+        // Ensure we can go back to the original location using the shim location
+        const mapping =
+            templateTypeChecker.getTemplateMappingAtShimLocation(symbol.bindings[0].shimLocation)!;
+        expect(mapping.span.toString()).toEqual('name');
+      });
+
+      it('checkTypeOfAttributes = false', () => {
+        const {templateTypeChecker, program} = setup(targets, {checkTypeOfAttributes: false});
+        const sf = getSourceFileOrError(program, fileName);
+        const cmp = getClass(sf, 'Cmp');
+        const {attributes} = getAstElements(templateTypeChecker, cmp)[0];
+        const symbol = templateTypeChecker.getSymbolOfNode(attributes[0], cmp)!;
+        assertInputBindingSymbol(symbol);
+        expect(
+            (symbol.bindings[0].tsSymbol!.declarations[0] as ts.PropertyDeclaration).name.getText())
+            .toEqual('name');
+      });
     });
 
     describe('templates', () => {
diff --git a/packages/language-service/ivy/test/quick_info_spec.ts b/packages/language-service/ivy/test/quick_info_spec.ts
index 404b43531a..45bc6b3eda 100644
--- a/packages/language-service/ivy/test/quick_info_spec.ts
+++ b/packages/language-service/ivy/test/quick_info_spec.ts
@@ -104,363 +104,379 @@ function quickInfoSkeleton(): TestFile[] {
 describe('quick info', () => {
   let env: LanguageServiceTestEnvironment;
 
-  beforeEach(() => {
-    initMockFileSystem('Native');
-    env = LanguageServiceTestEnvironment.setup(quickInfoSkeleton());
-  });
-
-  describe('elements', () => {
-    it('should work for native elements', () => {
-      expectQuickInfo({
-        templateOverride: `<butt¦on></button>`,
-        expectedSpanText: '<button></button>',
-        expectedDisplayString: '(element) button: HTMLButtonElement'
-      });
+  describe('strict templates (happy path)', () => {
+    beforeEach(() => {
+      initMockFileSystem('Native');
+      env = LanguageServiceTestEnvironment.setup(quickInfoSkeleton());
     });
 
-    it('should work for directives which match native element tags', () => {
-      expectQuickInfo({
-        templateOverride: `<butt¦on compound custom-button></button>`,
-        expectedSpanText: '<button compound custom-button></button>',
-        expectedDisplayString: '(directive) AppModule.CompoundCustomButtonDirective'
-      });
-    });
-  });
-
-  describe('templates', () => {
-    it('should return undefined for ng-templates', () => {
-      const {documentation} = expectQuickInfo({
-        templateOverride: `<ng-templ¦ate></ng-template>`,
-        expectedSpanText: '<ng-template></ng-template>',
-        expectedDisplayString: '(template) ng-template'
-      });
-      expect(toText(documentation))
-          .toContain('The `<ng-template>` is an Angular element for rendering HTML.');
-    });
-  });
-
-  describe('directives', () => {
-    it('should work for directives', () => {
-      expectQuickInfo({
-        templateOverride: `<div string-model¦></div>`,
-        expectedSpanText: 'string-model',
-        expectedDisplayString: '(directive) AppModule.StringModel'
-      });
-    });
-
-    it('should work for components', () => {
-      const {documentation} = expectQuickInfo({
-        templateOverride: `<t¦est-comp></test-comp>`,
-        expectedSpanText: '<test-comp></test-comp>',
-        expectedDisplayString: '(component) AppModule.TestComponent'
-      });
-      expect(toText(documentation)).toBe('This Component provides the `test-comp` selector.');
-    });
-
-    it('should work for structural directives', () => {
-      const {documentation} = expectQuickInfo({
-        templateOverride: `<div *¦ngFor="let item of heroes"></div>`,
-        expectedSpanText: 'ngFor',
-        expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
-      });
-      expect(toText(documentation)).toContain('A fake version of the NgFor directive.');
-    });
-
-    it('should work for directives with compound selectors, some of which are bindings', () => {
-      expectQuickInfo({
-        templateOverride: `<ng-template ngF¦or let-hero [ngForOf]="heroes">{{hero}}</ng-template>`,
-        expectedSpanText: 'ngFor',
-        expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
-      });
-    });
-
-    it('should work for data-let- syntax', () => {
-      expectQuickInfo({
-        templateOverride:
-            `<ng-template ngFor data-let-he¦ro [ngForOf]="heroes">{{hero}}</ng-template>`,
-        expectedSpanText: 'hero',
-        expectedDisplayString: '(variable) hero: Hero'
-      });
-    });
-  });
-
-  describe('bindings', () => {
-    describe('inputs', () => {
-      it('should work for input providers', () => {
+    describe('elements', () => {
+      it('should work for native elements', () => {
         expectQuickInfo({
-          templateOverride: `<test-comp [tcN¦ame]="name"></test-comp>`,
-          expectedSpanText: 'tcName',
-          expectedDisplayString: '(property) TestComponent.name: string'
+          templateOverride: `<butt¦on></button>`,
+          expectedSpanText: '<button></button>',
+          expectedDisplayString: '(element) button: HTMLButtonElement'
         });
       });
 
-      it('should work for bind- syntax', () => {
+      it('should work for directives which match native element tags', () => {
         expectQuickInfo({
-          templateOverride: `<test-comp bind-tcN¦ame="name"></test-comp>`,
-          expectedSpanText: 'tcName',
-          expectedDisplayString: '(property) TestComponent.name: string'
+          templateOverride: `<butt¦on compound custom-button></button>`,
+          expectedSpanText: '<button compound custom-button></button>',
+          expectedDisplayString: '(directive) AppModule.CompoundCustomButtonDirective'
         });
+      });
+    });
+
+    describe('templates', () => {
+      it('should return undefined for ng-templates', () => {
+        const {documentation} = expectQuickInfo({
+          templateOverride: `<ng-templ¦ate></ng-template>`,
+          expectedSpanText: '<ng-template></ng-template>',
+          expectedDisplayString: '(template) ng-template'
+        });
+        expect(toText(documentation))
+            .toContain('The `<ng-template>` is an Angular element for rendering HTML.');
+      });
+    });
+
+    describe('directives', () => {
+      it('should work for directives', () => {
         expectQuickInfo({
-          templateOverride: `<test-comp data-bind-tcN¦ame="name"></test-comp>`,
-          expectedSpanText: 'tcName',
-          expectedDisplayString: '(property) TestComponent.name: string'
+          templateOverride: `<div string-model¦></div>`,
+          expectedSpanText: 'string-model',
+          expectedDisplayString: '(directive) AppModule.StringModel'
         });
       });
 
-      it('should work for structural directive inputs ngForTrackBy', () => {
+      it('should work for components', () => {
+        const {documentation} = expectQuickInfo({
+          templateOverride: `<t¦est-comp></test-comp>`,
+          expectedSpanText: '<test-comp></test-comp>',
+          expectedDisplayString: '(component) AppModule.TestComponent'
+        });
+        expect(toText(documentation)).toBe('This Component provides the `test-comp` selector.');
+      });
+
+      it('should work for structural directives', () => {
+        const {documentation} = expectQuickInfo({
+          templateOverride: `<div *¦ngFor="let item of heroes"></div>`,
+          expectedSpanText: 'ngFor',
+          expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
+        });
+        expect(toText(documentation)).toContain('A fake version of the NgFor directive.');
+      });
+
+      it('should work for directives with compound selectors, some of which are bindings', () => {
         expectQuickInfo({
-          templateOverride: `<div *ngFor="let item of heroes; tr¦ackBy: trackByFn;"></div>`,
-          expectedSpanText: 'trackBy',
+          templateOverride:
+              `<ng-template ngF¦or let-hero [ngForOf]="heroes">{{hero}}</ng-template>`,
+          expectedSpanText: 'ngFor',
+          expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
+        });
+      });
+
+      it('should work for data-let- syntax', () => {
+        expectQuickInfo({
+          templateOverride:
+              `<ng-template ngFor data-let-he¦ro [ngForOf]="heroes">{{hero}}</ng-template>`,
+          expectedSpanText: 'hero',
+          expectedDisplayString: '(variable) hero: Hero'
+        });
+      });
+    });
+
+    describe('bindings', () => {
+      describe('inputs', () => {
+        it('should work for input providers', () => {
+          expectQuickInfo({
+            templateOverride: `<test-comp [tcN¦ame]="name"></test-comp>`,
+            expectedSpanText: 'tcName',
+            expectedDisplayString: '(property) TestComponent.name: string'
+          });
+        });
+
+        it('should work for bind- syntax', () => {
+          expectQuickInfo({
+            templateOverride: `<test-comp bind-tcN¦ame="name"></test-comp>`,
+            expectedSpanText: 'tcName',
+            expectedDisplayString: '(property) TestComponent.name: string'
+          });
+          expectQuickInfo({
+            templateOverride: `<test-comp data-bind-tcN¦ame="name"></test-comp>`,
+            expectedSpanText: 'tcName',
+            expectedDisplayString: '(property) TestComponent.name: string'
+          });
+        });
+
+        it('should work for structural directive inputs ngForTrackBy', () => {
+          expectQuickInfo({
+            templateOverride: `<div *ngFor="let item of heroes; tr¦ackBy: trackByFn;"></div>`,
+            expectedSpanText: 'trackBy',
+            expectedDisplayString:
+                '(property) NgForOf<Hero, Hero[]>.ngForTrackBy: TrackByFunction<Hero>'
+          });
+        });
+
+        it('should work for structural directive inputs ngForOf', () => {
+          expectQuickInfo({
+            templateOverride: `<div *ngFor="let item o¦f heroes; trackBy: trackByFn;"></div>`,
+            expectedSpanText: 'of',
+            expectedDisplayString:
+                '(property) NgForOf<Hero, Hero[]>.ngForOf: Hero[] | (Hero[] & Iterable<Hero>) | null | undefined'
+          });
+        });
+
+        it('should work for two-way binding providers', () => {
+          expectQuickInfo({
+            templateOverride: `<test-comp string-model [(mo¦del)]="title"></test-comp>`,
+            expectedSpanText: 'model',
+            expectedDisplayString: '(property) StringModel.model: string'
+          });
+        });
+      });
+
+      describe('outputs', () => {
+        it('should work for event providers', () => {
+          expectQuickInfo({
+            templateOverride: `<test-comp (te¦st)="myClick($event)"></test-comp>`,
+            expectedSpanText: 'test',
+            expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
+          });
+        });
+
+        it('should work for on- syntax binding', () => {
+          expectQuickInfo({
+            templateOverride: `<test-comp on-te¦st="myClick($event)"></test-comp>`,
+            expectedSpanText: 'test',
+            expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
+          });
+          expectQuickInfo({
+            templateOverride: `<test-comp data-on-te¦st="myClick($event)"></test-comp>`,
+            expectedSpanText: 'test',
+            expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
+          });
+        });
+
+        it('should work for $event from EventEmitter', () => {
+          expectQuickInfo({
+            templateOverride: `<div string-model (modelChange)="myClick($e¦vent)"></div>`,
+            expectedSpanText: '$event',
+            expectedDisplayString: '(parameter) $event: string'
+          });
+        });
+
+        it('should work for $event from native element', () => {
+          expectQuickInfo({
+            templateOverride: `<div (click)="myClick($e¦vent)"></div>`,
+            expectedSpanText: '$event',
+            expectedDisplayString: '(parameter) $event: MouseEvent'
+          });
+        });
+      });
+    });
+
+    describe('references', () => {
+      it('should work for element reference declarations', () => {
+        const {documentation} = expectQuickInfo({
+          templateOverride: `<div #¦chart></div>`,
+          expectedSpanText: 'chart',
+          expectedDisplayString: '(reference) chart: HTMLDivElement'
+        });
+        expect(toText(documentation))
+            .toEqual(
+                'Provides special properties (beyond the regular HTMLElement ' +
+                'interface it also has available to it by inheritance) for manipulating <div> elements.');
+      });
+
+      it('should work for directive references', () => {
+        expectQuickInfo({
+          templateOverride: `<div string-model #dir¦Ref="stringModel"></div>`,
+          expectedSpanText: 'dirRef',
+          expectedDisplayString: '(reference) dirRef: StringModel'
+        });
+      });
+
+      it('should work for ref- syntax', () => {
+        expectQuickInfo({
+          templateOverride: `<div ref-ch¦art></div>`,
+          expectedSpanText: 'chart',
+          expectedDisplayString: '(reference) chart: HTMLDivElement'
+        });
+        expectQuickInfo({
+          templateOverride: `<div data-ref-ch¦art></div>`,
+          expectedSpanText: 'chart',
+          expectedDisplayString: '(reference) chart: HTMLDivElement'
+        });
+      });
+    });
+
+    describe('variables', () => {
+      it('should work for array members', () => {
+        const {documentation} = expectQuickInfo({
+          templateOverride: `<div *ngFor="let hero of heroes">{{her¦o}}</div>`,
+          expectedSpanText: 'hero',
+          expectedDisplayString: '(variable) hero: Hero'
+        });
+        expect(toText(documentation)).toEqual('The most heroic being.');
+      });
+
+      it('should work for ReadonlyArray members (#36191)', () => {
+        expectQuickInfo({
+          templateOverride: `<div *ngFor="let hero of readonlyHeroes">{{her¦o}}</div>`,
+          expectedSpanText: 'hero',
+          expectedDisplayString: '(variable) hero: Readonly<Hero>'
+        });
+      });
+
+      it('should work for const array members (#36191)', () => {
+        expectQuickInfo({
+          templateOverride: `<div *ngFor="let name of constNames">{{na¦me}}</div>`,
+          expectedSpanText: 'name',
+          expectedDisplayString: '(variable) name: { readonly name: "name"; }'
+        });
+      });
+    });
+
+    describe('pipes', () => {
+      it('should work for pipes', () => {
+        const templateOverride = `<p>The hero's birthday is {{birthday | da¦te: "MM/dd/yy"}}</p>`;
+        expectQuickInfo({
+          templateOverride,
+          expectedSpanText: 'date',
           expectedDisplayString:
-              '(property) NgForOf<Hero, Hero[]>.ngForTrackBy: TrackByFunction<Hero>'
-        });
-      });
-
-      it('should work for structural directive inputs ngForOf', () => {
-        expectQuickInfo({
-          templateOverride: `<div *ngFor="let item o¦f heroes; trackBy: trackByFn;"></div>`,
-          expectedSpanText: 'of',
-          expectedDisplayString:
-              '(property) NgForOf<Hero, Hero[]>.ngForOf: Hero[] | (Hero[] & Iterable<Hero>) | null | undefined'
-        });
-      });
-
-      it('should work for two-way binding providers', () => {
-        expectQuickInfo({
-          templateOverride: `<test-comp string-model [(mo¦del)]="title"></test-comp>`,
-          expectedSpanText: 'model',
-          expectedDisplayString: '(property) StringModel.model: string'
+              '(pipe) DatePipe.transform(value: string | number | Date, format?: string | undefined, timezone?: ' +
+              'string | undefined, locale?: string | undefined): string | null (+2 overloads)'
         });
       });
     });
 
-    describe('outputs', () => {
-      it('should work for event providers', () => {
+    describe('expressions', () => {
+      it('should find members in a text interpolation', () => {
         expectQuickInfo({
-          templateOverride: `<test-comp (te¦st)="myClick($event)"></test-comp>`,
-          expectedSpanText: 'test',
-          expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
+          templateOverride: `<div>{{ tit¦le }}</div>`,
+          expectedSpanText: 'title',
+          expectedDisplayString: '(property) AppCmp.title: string'
         });
       });
 
-      it('should work for on- syntax binding', () => {
+      it('should work for accessed property reads', () => {
         expectQuickInfo({
-          templateOverride: `<test-comp on-te¦st="myClick($event)"></test-comp>`,
-          expectedSpanText: 'test',
-          expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
-        });
-        expectQuickInfo({
-          templateOverride: `<test-comp data-on-te¦st="myClick($event)"></test-comp>`,
-          expectedSpanText: 'test',
-          expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
+          templateOverride: `<div>{{title.len¦gth}}</div>`,
+          expectedSpanText: 'length',
+          expectedDisplayString: '(property) String.length: number'
         });
       });
 
-      it('should work for $event from EventEmitter', () => {
+      it('should find members in an attribute interpolation', () => {
         expectQuickInfo({
-          templateOverride: `<div string-model (modelChange)="myClick($e¦vent)"></div>`,
-          expectedSpanText: '$event',
-          expectedDisplayString: '(parameter) $event: string'
+          templateOverride: `<div string-model model="{{tit¦le}}"></div>`,
+          expectedSpanText: 'title',
+          expectedDisplayString: '(property) AppCmp.title: string'
         });
       });
 
-      it('should work for $event from native element', () => {
+      it('should find members of input binding', () => {
         expectQuickInfo({
-          templateOverride: `<div (click)="myClick($e¦vent)"></div>`,
-          expectedSpanText: '$event',
-          expectedDisplayString: '(parameter) $event: MouseEvent'
+          templateOverride: `<test-comp [tcName]="ti¦tle"></test-comp>`,
+          expectedSpanText: 'title',
+          expectedDisplayString: '(property) AppCmp.title: string'
         });
       });
+
+      it('should find input binding on text attribute', () => {
+        expectQuickInfo({
+          templateOverride: `<test-comp tcN¦ame="title"></test-comp>`,
+          expectedSpanText: 'tcName',
+          expectedDisplayString: '(property) TestComponent.name: string'
+        });
+      });
+
+      it('should find members of event binding', () => {
+        expectQuickInfo({
+          templateOverride: `<test-comp (test)="ti¦tle=$event"></test-comp>`,
+          expectedSpanText: 'title',
+          expectedDisplayString: '(property) AppCmp.title: string'
+        });
+      });
+
+      it('should work for method calls', () => {
+        expectQuickInfo({
+          templateOverride: `<div (click)="setT¦itle('title')"></div>`,
+          expectedSpanText: 'setTitle',
+          expectedDisplayString: '(method) AppCmp.setTitle(newTitle: string): void'
+        });
+      });
+
+      it('should work for accessed properties in writes', () => {
+        expectQuickInfo({
+          templateOverride: `<div (click)="hero.i¦d = 2"></div>`,
+          expectedSpanText: 'id',
+          expectedDisplayString: '(property) Hero.id: number'
+        });
+      });
+
+      it('should work for method call arguments', () => {
+        expectQuickInfo({
+          templateOverride: `<div (click)="setTitle(hero.nam¦e)"></div>`,
+          expectedSpanText: 'name',
+          expectedDisplayString: '(property) Hero.name: string'
+        });
+      });
+
+      it('should find members of two-way binding', () => {
+        expectQuickInfo({
+          templateOverride: `<input string-model [(model)]="ti¦tle" />`,
+          expectedSpanText: 'title',
+          expectedDisplayString: '(property) AppCmp.title: string'
+        });
+      });
+
+      it('should find members in a structural directive', () => {
+        expectQuickInfo({
+          templateOverride: `<div *ngIf="anyV¦alue"></div>`,
+          expectedSpanText: 'anyValue',
+          expectedDisplayString: '(property) AppCmp.anyValue: any'
+        });
+      });
+
+      it('should work for members in structural directives', () => {
+        expectQuickInfo({
+          templateOverride: `<div *ngFor="let item of her¦oes; trackBy: trackByFn;"></div>`,
+          expectedSpanText: 'heroes',
+          expectedDisplayString: '(property) AppCmp.heroes: Hero[]'
+        });
+      });
+
+      it('should work for the $any() cast function', () => {
+        expectQuickInfo({
+          templateOverride: `<div>{{$an¦y(title)}}</div>`,
+          expectedSpanText: '$any',
+          expectedDisplayString: '(method) $any: any'
+        });
+      });
+
+      it('should provide documentation', () => {
+        const {cursor} = env.overrideTemplateWithCursor(
+            absoluteFrom('/app.ts'), 'AppCmp', `<div>{{¦title}}</div>`);
+        const quickInfo = env.ngLS.getQuickInfoAtPosition(absoluteFrom('/app.html'), cursor);
+        const documentation = toText(quickInfo!.documentation);
+        expect(documentation).toBe('This is the title of the `AppCmp` Component.');
+      });
     });
   });
 
-  describe('references', () => {
-    it('should work for element reference declarations', () => {
-      const {documentation} = expectQuickInfo({
-        templateOverride: `<div #¦chart></div>`,
-        expectedSpanText: 'chart',
-        expectedDisplayString: '(reference) chart: HTMLDivElement'
-      });
-      expect(toText(documentation))
-          .toEqual(
-              'Provides special properties (beyond the regular HTMLElement ' +
-              'interface it also has available to it by inheritance) for manipulating <div> elements.');
-    });
-
-    it('should work for directive references', () => {
-      expectQuickInfo({
-        templateOverride: `<div string-model #dir¦Ref="stringModel"></div>`,
-        expectedSpanText: 'dirRef',
-        expectedDisplayString: '(reference) dirRef: StringModel'
-      });
-    });
-
-    it('should work for ref- syntax', () => {
-      expectQuickInfo({
-        templateOverride: `<div ref-ch¦art></div>`,
-        expectedSpanText: 'chart',
-        expectedDisplayString: '(reference) chart: HTMLDivElement'
-      });
-      expectQuickInfo({
-        templateOverride: `<div data-ref-ch¦art></div>`,
-        expectedSpanText: 'chart',
-        expectedDisplayString: '(reference) chart: HTMLDivElement'
-      });
-    });
-  });
-
-  describe('variables', () => {
-    it('should work for array members', () => {
-      const {documentation} = expectQuickInfo({
-        templateOverride: `<div *ngFor="let hero of heroes">{{her¦o}}</div>`,
-        expectedSpanText: 'hero',
-        expectedDisplayString: '(variable) hero: Hero'
-      });
-      expect(toText(documentation)).toEqual('The most heroic being.');
-    });
-
-    it('should work for ReadonlyArray members (#36191)', () => {
-      expectQuickInfo({
-        templateOverride: `<div *ngFor="let hero of readonlyHeroes">{{her¦o}}</div>`,
-        expectedSpanText: 'hero',
-        expectedDisplayString: '(variable) hero: Readonly<Hero>'
-      });
-    });
-
-    it('should work for const array members (#36191)', () => {
-      expectQuickInfo({
-        templateOverride: `<div *ngFor="let name of constNames">{{na¦me}}</div>`,
-        expectedSpanText: 'name',
-        expectedDisplayString: '(variable) name: { readonly name: "name"; }'
-      });
-    });
-  });
-
-  describe('pipes', () => {
-    it('should work for pipes', () => {
-      const templateOverride = `<p>The hero's birthday is {{birthday | da¦te: "MM/dd/yy"}}</p>`;
-      expectQuickInfo({
-        templateOverride,
-        expectedSpanText: 'date',
-        expectedDisplayString:
-            '(pipe) DatePipe.transform(value: string | number | Date, format?: string | undefined, timezone?: ' +
-            'string | undefined, locale?: string | undefined): string | null (+2 overloads)'
-      });
-    });
-  });
-
-  describe('expressions', () => {
-    it('should find members in a text interpolation', () => {
-      expectQuickInfo({
-        templateOverride: `<div>{{ tit¦le }}</div>`,
-        expectedSpanText: 'title',
-        expectedDisplayString: '(property) AppCmp.title: string'
-      });
-    });
-
-    it('should work for accessed property reads', () => {
-      expectQuickInfo({
-        templateOverride: `<div>{{title.len¦gth}}</div>`,
-        expectedSpanText: 'length',
-        expectedDisplayString: '(property) String.length: number'
-      });
-    });
-
-    it('should find members in an attribute interpolation', () => {
-      expectQuickInfo({
-        templateOverride: `<div string-model model="{{tit¦le}}"></div>`,
-        expectedSpanText: 'title',
-        expectedDisplayString: '(property) AppCmp.title: string'
-      });
-    });
-
-    it('should find members of input binding', () => {
-      expectQuickInfo({
-        templateOverride: `<test-comp [tcName]="ti¦tle"></test-comp>`,
-        expectedSpanText: 'title',
-        expectedDisplayString: '(property) AppCmp.title: string'
-      });
-    });
-
-    it('should find input binding on text attribute', () => {
+  describe('non-strict compiler options', () => {
+    it('should find input binding on text attribute when strictAttributeTypes is false', () => {
+      initMockFileSystem('Native');
+      env =
+          LanguageServiceTestEnvironment.setup(quickInfoSkeleton(), {strictAttributeTypes: false});
       expectQuickInfo({
         templateOverride: `<test-comp tcN¦ame="title"></test-comp>`,
         expectedSpanText: 'tcName',
         expectedDisplayString: '(property) TestComponent.name: string'
       });
     });
-
-    it('should find members of event binding', () => {
-      expectQuickInfo({
-        templateOverride: `<test-comp (test)="ti¦tle=$event"></test-comp>`,
-        expectedSpanText: 'title',
-        expectedDisplayString: '(property) AppCmp.title: string'
-      });
-    });
-
-    it('should work for method calls', () => {
-      expectQuickInfo({
-        templateOverride: `<div (click)="setT¦itle('title')"></div>`,
-        expectedSpanText: 'setTitle',
-        expectedDisplayString: '(method) AppCmp.setTitle(newTitle: string): void'
-      });
-    });
-
-    it('should work for accessed properties in writes', () => {
-      expectQuickInfo({
-        templateOverride: `<div (click)="hero.i¦d = 2"></div>`,
-        expectedSpanText: 'id',
-        expectedDisplayString: '(property) Hero.id: number'
-      });
-    });
-
-    it('should work for method call arguments', () => {
-      expectQuickInfo({
-        templateOverride: `<div (click)="setTitle(hero.nam¦e)"></div>`,
-        expectedSpanText: 'name',
-        expectedDisplayString: '(property) Hero.name: string'
-      });
-    });
-
-    it('should find members of two-way binding', () => {
-      expectQuickInfo({
-        templateOverride: `<input string-model [(model)]="ti¦tle" />`,
-        expectedSpanText: 'title',
-        expectedDisplayString: '(property) AppCmp.title: string'
-      });
-    });
-
-    it('should find members in a structural directive', () => {
-      expectQuickInfo({
-        templateOverride: `<div *ngIf="anyV¦alue"></div>`,
-        expectedSpanText: 'anyValue',
-        expectedDisplayString: '(property) AppCmp.anyValue: any'
-      });
-    });
-
-    it('should work for members in structural directives', () => {
-      expectQuickInfo({
-        templateOverride: `<div *ngFor="let item of her¦oes; trackBy: trackByFn;"></div>`,
-        expectedSpanText: 'heroes',
-        expectedDisplayString: '(property) AppCmp.heroes: Hero[]'
-      });
-    });
-
-    it('should work for the $any() cast function', () => {
-      expectQuickInfo({
-        templateOverride: `<div>{{$an¦y(title)}}</div>`,
-        expectedSpanText: '$any',
-        expectedDisplayString: '(method) $any: any'
-      });
-    });
-
-    it('should provide documentation', () => {
-      const {cursor} = env.overrideTemplateWithCursor(
-          absoluteFrom('/app.ts'), 'AppCmp', `<div>{{¦title}}</div>`);
-      const quickInfo = env.ngLS.getQuickInfoAtPosition(absoluteFrom('/app.html'), cursor);
-      const documentation = toText(quickInfo!.documentation);
-      expect(documentation).toBe('This is the title of the `AppCmp` Component.');
-    });
   });
 
   function expectQuickInfo(