How to create custom commands(to run on terminal) to create desired component (which contain desired content) in angular2?

Question

I am using angular-cli in my project and when I run commands below like- ng g c componentName then,

a component is created with some default text like below- @Component({}) etc

component.ts

import { Component } from '@angular/core';

@Component({
  selector: '',        
  templateUrl: '',
  styleUrls: ['']
})

export class component implements OnInit{

constructor(){}

 ngOnInit() {}
}

How does this text created by default when component is created?

Can we create our own custom commands for component generation with default text inside component.ts and component.html(like below)?

custom.component.ts

       import { Component } from '@angular/core';

        @Component({
          selector: '',         <-----name as provide in command
          templateUrl: '',
          styleUrls: ['']
        })

        export class component implements OnInit{

        constructor(){}
        title = 'Welcome to component ';
         size: 500;
         width: 1000;
         height:500;
    '
    '
    '
         ngOnInit() {
   if (this.data) {
          this.buildChart(this.data);
        }
        // For Default Data from json
        else {
          try {
            let self = this;
            this.jsonDataService.getChartDefaultData().subscribe(
              function (success) {
                self.data = success;
                self.buildChart(success);
              },
              error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
          } catch (e) { console.error('Error :: ' + JSON.stringify(e)); }
        }
    }
        }

custom.component.html

Welcome to component template.

Answer 1

I think you are looking for @schematics. I saw a show on ngAir about this recently. There is an option, --collection, on the ng new command you can use to specify your own custom collection of templates to use with the CLI. It was introduced in version 1.4.2 of the CLI. To create your own schematics collection you first have to install a few npm packages. (Versions current as of today)

npm i -g @angular-devkit/[email protected]
npm i -g @angular-devkit/[email protected]
npm i -g @schematics/[email protected]
npm i -g rxjs

Then you can use the 'schematics' command like so.

schematics @schematics/schematics:schematic --name myCustomBlueprint

This command uses schematics itself to create a new npm package that you have to customize to create your own schematics collection. Execute the command and you will see that the npm package has a few schematics in the src directory. The one labeled my-full-schematic has an example of how to use an argument for use in the template. In the schema.json file in the my-full-schema directory you will see a properties element with children index and name. Like so

"properties": {
  "index": {
    "type": "number",
    "default": 1
  },
  "name": {
    "type": "string"
  }
},

Index and name are arguments to the ng new command for the demo schematics. They are used in the test_INDEX_ and test2 templates.

To he honest, this is a relatively undocumented feature. I haven't yet figured it all out, but I hope this is enough to get you started.

Also, here are a few articles that explain in depth how to customize your schematic collection. angularInDepth softwarearchitect

EDIT: Schematics is undergoing active development and changing frequently. The latest information about it can be found in this blog post from the Angular team.