0
129
ViewsAngular change multiple files to inline template
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?
1 answers
Answer question0
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