Generate a Component with Inline Template and Style using Angular CLI

This post shows how to generate an angular component with inline template and style using Angular CLI commands.

Introduction

In this blog, we will see how to create an Angular component with inline template and style using Angular CLI commands.  

Creating a component using Angular CLI

Whenever we want to create a new component using Angular CLI, we usually run the below command:

ng generate component <component-name>

Or in short...

ng g c <component-name>

So using this command Angular CLI generates the below four files:

<component-name>.component.ts
<component-name>.component.html
<component-name>.component.css
<component-name>.component.spec.ts

But when we want to generate components with an inline template and style, we have to provide two options after the above command.

1. For inline templates, we need to add --inlineTemplate=true. By default its value is false.
2. For inline style, we need to add --inlineStyle=true. By default its value is false.

So the final command looks like:

ng generate component <component-name> --inlineTemplate=true --inlineStyle=true

For example, if you generate a component like:

 

ng g c test --inlineTemplate=true --inlineStyle=true

 

This will generate a component file which you can see below. It won't generate a separate template and CSS file:

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

@Component({
  selector: 'app-test',
  template: `
    <p>
      test works!
    </p>
  `,
  styles: []
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

So in the above generated component we have an inline template section and style section inside the @Component decorator.

Summary

 

In this blog, we discussed the use of Angular CLI commands to create an Angular component with inline template and style.

You can follow me on twitter @sumitkharche01 

 

Happy Coding!