Angular change multiple files to inline template

Question

I have a couple Angular components spread out over multiple files, created using ng generate.

Some components have inline styles, since the html/styles can be quite small so it makes sense to use inline templates here.

The issue is that I'd like to translate a couple of these 'multi-file' components to inline styles - is there a way to do this within the Angular ecosystem?

Answer 1

You should go in .ts file of the component and inside of the @Component decorator change the templateUrl to template, and styleUrls to styles. Then you can delete .html and .scss files and transfer their code in .ts file.

@Component({
  selector: 'app-custom-component',
  template: `<div>Your component inline HTML.</div>`,
  styles: ['div { text-align: center; }']
})

If you want to generate a component with inline templates and styles, you can do that with passing --inlineTemplate=true --inlineStyle=true option to the CLI when generating the component:

ng generate component custom-component --inlineTemplate=true --inlineStyle=true