feature(generate): provide options to default encapsulation & change detection

Closes angular#2822
Close angular#2892

Author: Brocco

packages/angular-cli/blueprints/component/files/__path__/__name__.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit<% if(viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection) { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -9,7 +9,9 @@ import { Component, OnInit } from '@angular/core';
   `,<% } else { %>
   templateUrl: './<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['./<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %>
+  styleUrls: ['./<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %><% if(viewEncapsulation) { %>,
+  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection) { %>,
+  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
 export class <%= classifiedModuleName %>Component implements OnInit {
 

packages/angular-cli/blueprints/component/index.js

@@ -16,7 +16,9 @@ module.exports = {
     { name: 'inline-template', type: Boolean, aliases: ['it'] },
     { name: 'inline-style', type: Boolean, aliases: ['is'] },
     { name: 'prefix', type: Boolean, default: true },
-    { name: 'spec', type: Boolean }
+    { name: 'spec', type: Boolean },
+    { name: 'view-encapsulation', type: String, aliases: ['ve'] },
+    { name: 'change-detection', type: String, aliases: ['cd'] }
   ],
 
   beforeInstall: function() {
@@ -68,6 +70,14 @@ module.exports = {
       options.spec :
       this.project.ngConfigObj.get('defaults.spec.component');
 
+    options.viewEncapsulation = options.viewEncapsulation !== undefined ?
+      options.viewEncapsulation :
+      this.project.ngConfigObj.get('defaults.viewEncapsulation');
+
+    options.changeDetection = options.changeDetection !== undefined ?
+      options.changeDetection :
+      this.project.ngConfigObj.get('defaults.changeDetection');
+
     return {
       dynamicPath: this.dynamicPath.dir.replace(this.dynamicPath.appRoot, ''),
       flat: options.flat,
@@ -77,7 +87,9 @@ module.exports = {
       route: options.route,
       isAppComponent: !!options.isAppComponent,
       selector: this.selector,
-      styleExt: this.styleExt
+      styleExt: this.styleExt,
+      viewEncapsulation: options.viewEncapsulation,
+      changeDetection: options.changeDetection
     };
   },
 

packages/angular-cli/lib/config/schema.d.ts

@@ -60,6 +60,8 @@ export interface CliConfig {
         styleExt?: string;
         prefixInterfaces?: boolean;
         poll?: number;
+        viewEncapsulation?: string;
+        changeDetection?: string;
         inline?: {
             style?: boolean;
             template?: boolean;

packages/angular-cli/lib/config/schema.json

@@ -37,7 +37,7 @@
             "items": {
               "type": "string"
             },
-            "default": [] 
+            "default": []
           },
           "index": {
             "type": "string",
@@ -144,6 +144,12 @@
         "poll": {
           "type": "number"
         },
+        "viewEncapsulation": {
+          "type": "string"
+        },
+        "changeDetection": {
+          "type": "string"
+        },
         "inline": {
           "type": "object",
           "properties": {