feat(@schematics/angular): add opt in option 'displayBlock'

Author: rryter

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

@@ -86,6 +86,12 @@
               "default": "Default",
               "alias": "c"
             },
+            "displayBlock": {
+              "description": "Specifies if the style will contain `:host { display: block; }`.",
+              "type": "boolean",
+              "default": false,
+              "alias": "b"
+            },
             "entryComponent": {
               "type": "boolean",
               "default": false,

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template

@@ -0,0 +1,6 @@
+<% if(displayBlock){ if(style != 'sass') { %>:host {
+  display: block;
+}
+<% } else { %>\:host
+  display: block;
+<% }} %>

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -8,7 +8,13 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
     </p>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.<%= dasherize(type) %>.html',<% } if(inlineStyle) { %>
-  styles: []<% } else { %>
+  styles: [<% if(displayBlock){ %>
+    `
+      :host {
+        display: block;
+      }
+    `<% } %>
+  ],<% } else { %>
   styleUrls: ['./<%= dasherize(name) %>.<%= dasherize(type) %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

packages/schematics/angular/component/index_spec.ts

@@ -22,6 +22,7 @@ describe('Component Schematic', () => {
     // path: 'src/app',
     inlineStyle: false,
     inlineTemplate: false,
+    displayBlock: false,
     changeDetection: ChangeDetection.Default,
     style: Style.Css,
     type: 'Component',
@@ -248,6 +249,34 @@ describe('Component Schematic', () => {
     expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
   });
 
+  it('should respect the displayBlock option when inlineStyle is `false`', async () => {
+    const options = { ...defaultOptions, displayBlock: true };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.css');
+    expect(content).toMatch(/:host {\n  display: block;\n}\n/);
+  });
+
+  it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `scss`', async () => {
+    const options = { ...defaultOptions, displayBlock: true, style: 'scss' };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.scss');
+    expect(content).toMatch(/:host {\n  display: block;\n}\n/);
+  });
+
+  it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `sass', async () => {
+    const options = { ...defaultOptions, displayBlock: true, style: 'sass' };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.sass');
+    expect(content).toMatch(/\\:host\n  display: block;\n/);
+  });
+
+  it('should respect the displayBlock option when inlineStyle is `true`', async () => {
+    const options = { ...defaultOptions, displayBlock: true, inlineStyle: true };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(content).toMatch(/:host {\n(\s*)display: block;(\s*)}\n/);
+  });
+
   it('should respect the style option', async () => {
     const options = { ...defaultOptions, style: Style.Sass };
     const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
@@ -263,7 +292,7 @@ describe('Component Schematic', () => {
     const content = tree.readContent('/projects/bar/src/app/foo/foo.route.ts');
     const testContent = tree.readContent('/projects/bar/src/app/foo/foo.route.spec.ts');
     expect(content).toContain('export class FooRoute implements OnInit');
-    expect(testContent).toContain('describe(\'FooRoute\'');
+    expect(testContent).toContain("describe('FooRoute'");
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.css');
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.html');
   });

packages/schematics/angular/component/schema.json

@@ -27,6 +27,12 @@
       },
       "x-prompt": "What name would you like to use for the component?"
     },
+    "displayBlock": {
+      "description": "Specifies if the style will contain `:host { display: block; }`.",
+      "type": "boolean",
+      "default": false,
+      "alias": "b"
+    },
     "inlineStyle": {
       "description": "When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
       "type": "boolean",