Fix strict template bug (#44) (#46)

* Ingore .angular folder

* Angular now creates a angular folder to cache things. This should be ignored because its auto generated like .vs files

* Activate template strict mode

* Activate the strict template mode to test this in the example app. New angular apps are activate strict templates as default. This lib should also work with this

* Add additional selector

* Add a second selector so people that have activated strict template in the tsconfig can use this selector instead of mode="rail" and get no errors

* Update Readme for information

* Update the readme so everybody can read how to solve the strictTemplates bug

.gitignore

@@ -22,6 +22,7 @@ speed-measure-plugin*.json
 *.launch
 .settings/
 *.sublime-workspace
+.angular/
 
 # IDE - VSCode
 .vscode/*

README.md

@@ -20,6 +20,11 @@ module.ts
 component.html
 `<mat-sidenav mode="rail" opened="true">`
 
+If `"strictTemplates": true` is activated in _tsconfig.json_, overwriting mode is not possible. In this case you can use the following selector:
+
+component.html
+`<mat-sidenav rail-mode opened="true">`
+
 This extension adds on an existing `mode` the Material documentation remains the same.
 
 

projects/angular-material-rail-drawer-example/src/app/app.component.html

@@ -5,7 +5,7 @@
   <span>Mini Variant</span>
 </mat-toolbar>
 <mat-sidenav-container>
-  <mat-sidenav #appDrawer mode="rail" opened="false">
+  <mat-sidenav #appDrawer rail-mode opened="false">
     <mat-nav-list class="dashboard">
         <a mat-list-item>
           <mat-icon mat-list-icon >account_circle</mat-icon>

projects/angular-material-rail-drawer/src/lib/drawer-rail.directive.ts

@@ -33,7 +33,7 @@ import { Directionality } from '@angular/cdk/bidi';
 
 @Directive({
   // tslint:disable-next-line: directive-selector
-  selector: 'mat-sidenav[mode="rail"], mat-drawer[mode="rail"]',
+  selector: 'mat-sidenav[mode="rail"], mat-drawer[mode="rail"], mat-sidenav[rail-mode], mat-drawer[rail-mode]',
   // tslint:disable-next-line: no-host-metadata-property
   host: {
     '[class.mat-drawer-side]': 'true',

tsconfig.json

@@ -24,7 +24,8 @@
     }
   },
   "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }