Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(angular): add component generator #9351

Merged
merged 1 commit into from Mar 16, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
156 changes: 156 additions & 0 deletions docs/generated/api-angular/generators/component.md
@@ -0,0 +1,156 @@
---
title: '@nrwl/angular:component generator'
description: 'Generate an Angular Component.'
---

# @nrwl/angular:component

Generate an Angular Component.

## Usage

```bash
nx generate component ...
```

By default, Nx will search for `component` in the default collection provisioned in `workspace.json`.

You can specify the collection explicitly as follows:

```bash
nx g @nrwl/angular:component ...
```

Show what will be generated without writing to disk:

```bash
nx g component ... --dry-run
```

## Options

### name (_**required**_)

Type: `string`

The name of the component.

### changeDetection

Alias(es): c

Default: `Default`

Type: `string`

Possible values: `Default`, `OnPush`

The change detection strategy to use in the new component.

### displayBlock

Alias(es): b

Default: `false`

Type: `boolean`

Specifies if the style will contain `:host { display: block; }`.

### export

Default: `false`

Type: `boolean`

Specifies if the component should be exported in the declaring NgModule. Additionally, if the project is a library, the component will be exported from the project's entry point (normally `index.ts`).

### flat

Default: `false`

Type: `boolean`

Create the new files at the top level of the current project.

### inlineStyle

Alias(es): s

Default: `false`

Type: `boolean`

Include 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.

### inlineTemplate

Alias(es): t

Default: `false`

Type: `boolean`

Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.

### path (**hidden**)

Type: `string`

The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.

### project

Type: `string`

The name of the project.

### selector

Type: `string`

The HTML selector to use for this component.

### skipSelector

Default: `false`

Type: `boolean`

Specifies if the component should have a selector or not.

### skipTests

Default: `false`

Type: `boolean`

Do not create "spec.ts" test files for the new component.

### style

Default: `css`

Type: `string`

Possible values: `css`, `scss`, `sass`, `less`, `none`

The file extension or preprocessor to use for style files, or 'none' to skip generating the style file.

### type

Default: `component`

Type: `string`

Adds a developer-defined type to the filename, in the format "name.type.ts".

### viewEncapsulation

Alias(es): v

Type: `string`

Possible values: `Emulated`, `None`, `ShadowDom`

The view encapsulation strategy to use in the new component.
5 changes: 5 additions & 0 deletions docs/map.json
Expand Up @@ -644,6 +644,11 @@
"id": "application",
"file": "generated/api-angular/generators/application"
},
{
"name": "component generator",
"id": "component",
"file": "generated/api-angular/generators/component"
},
{
"name": "convert-tslint-to-eslint",
"id": "convert-tslint-to-eslint",
Expand Down
10 changes: 10 additions & 0 deletions packages/angular/generators.json
Expand Up @@ -16,6 +16,11 @@
"x-type": "application",
"description": "Creates an Angular application."
},
"component": {
"factory": "./src/generators/component/component.compat",
"schema": "./src/generators/component/schema.json",
"description": "Generate an Angular Component."
},
"component-cypress-spec": {
"factory": "./src/generators/component-cypress-spec/compat",
"schema": "./src/generators/component-cypress-spec/schema.json",
Expand Down Expand Up @@ -161,6 +166,11 @@
"x-type": "application",
"description": "Creates an Angular application."
},
"component": {
"factory": "./src/generators/component/component",
"schema": "./src/generators/component/schema.json",
"description": "Generate an Angular Component."
},
"component-cypress-spec": {
"factory": "./src/generators/component-cypress-spec/component-cypress-spec",
"schema": "./src/generators/component-cypress-spec/schema.json",
Expand Down
@@ -0,0 +1,120 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`component Generator --flat should create the component correctly and export it 1`] = `
"import { Component, OnInit } from '@angular/core';

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
"
`;

exports[`component Generator --flat should create the component correctly and not export it 1`] = `
"import { Component, OnInit } from '@angular/core';

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
"
`;

exports[`component Generator --path should create the component correctly and export it 1`] = `
"import { Component, OnInit } from '@angular/core';

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
"
`;

exports[`component Generator should create the component correctly and export it 1`] = `
"import { Component, OnInit } from '@angular/core';

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
"
`;

exports[`component Generator should create the component correctly and export it 2`] = `
"
export * from \\"./lib/example/example.component\\";"
Coly010 marked this conversation as resolved.
Show resolved Hide resolved
`;

exports[`component Generator should create the component correctly and not export it 1`] = `
"import { Component, OnInit } from '@angular/core';

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
"
`;

exports[`component Generator should create the component correctly but not export it when no entry point exists 1`] = `
"import { Component, OnInit } from '@angular/core';

@Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
"
`;
@@ -0,0 +1,4 @@
import componentGenerator from './component';
import { convertNxGenerator } from '@nrwl/devkit';

export default convertNxGenerator(componentGenerator);