How To Use Inline Template In Angular

In this article, we will learn about how to generate angular components with Inline Template using the Angular CLI command.

Step 1: Create a new Angular application using the following command

ng new InlineTemplateDemo 

step 2:  To generate Components we usually run commands ng generate new <componentname>

but here we want to generate components with inline templates and Styles. So to generate a component with an inline template and style we need to add two options in the following command

•  to add an inline Template need to add:- --inlineTemplate=true .
• To add inline Style we need to add:- --inlineStyle=true

So the final command to generate a component with an inline Template and Style will look like this.

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

The component generated by using the above command will look like this:-

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

So in the above-generated component, you can see inside the @Component decorator we are having two section template and style .

This is how we can generate inline template in any angular application .

Thanks for Reading hope this article helps you.