Inline Template and Inline Styles as Defaults in Angular CLI

I always install new Angular projects and forget all the commands I enjoy as a default.

So here is how to set inline templates and inline styles, which is my preference for creating Angular applications.

As apps scale, you tend to end up with folder and file structure overload, so I keep things as minimal as possible with a nice component that looks like this:

@Component({
  template: `
    <div>
      Hello World
    </div>
  `,
  styles: `
    div { background: pink; }
  `
})
export class AppComponent {}

I prefer the ability to just ‘see’ everything in one file, I don’t like the context switching between *.ts and *.html files.

As my component logic is already in there, I just want to see how I’m plugging it into the template.

“But what if the file gets too long?”. Sure, some components get bigger than others, but as a rule try and keep them as small as possible.

You also have code folding in each file, which is something I use too.

So with my thoughts and feelings out the way, how can you also adopt the same practice?

You can add this to an existing Angular CLI project, but first here’s how to generate a new project with it as a default:

ng new pizzas --inline-style=true --inline-template=true

If you’re creating new components, you’ll want to keep things consistent and add this to your angular.json schema:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your_project_name": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true,
          "inlineStyle": true,
        }
      },
    ...
    }
    ...
  }
  ...
}

Any new components then follow this rule and you end up with a less cluttered folder structure and directories.

If you’re creating standalone components then you might also want to enable always standalone in the same way.

🚀 Want to learn even more awesome Angular practices?
Check out my new Angular Courses if you’re serious about taking your skills to the top! There’s so much about Standalone Components and all the new best practices in the course.

Thanks for reading, happy coding!