Angular change multiple files to inline template

user_4122889 0
Viewed 286

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.

enter image description 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?

angular visual-studio-code typescript javascript
1 Answers

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
user_143898300
Related