Use Single File Components by Default in Angular

Instructor: [00:00] By default, the Angular CLI creates components with a separate template file and style file. You can see that we've got a component.html file over here and a CSS file over here.

[00:14] It doesn't have to be this way though. We can actually change templateUrl to template, and delete this path, and use backticks for some templates and tags here, and just say h1, tittle. We can change styleUrls to styles. This is still an array, which is a string, which is a little bit confusing.

[00:38] I can say h1, color blue, and save that. Now if I open up the terminal and run ng serve, and give it a second to compile and bundle everything. Now I can pop the browser opened to the side, and you can see that we've got a blue title.

[00:56] Cool. Now, I can just delete the CSS file and delete the HTML file. I've cleaned up my app folder pretty significantly. We can also use the CLI to create these single file components. I'm going to clear out the terminal. I'm going to say ng generate component and we'll call this one habit list.

[01:20] Let me run a dry run flag just to show you what it would create by default. When I run this, you can see that the output is to have a CSS file and an HTML file in addition to the spec and the component. However, I can change this by adding two flags to this command.

[01:37] Let me clear this out again and bring that command back up. This time, I'm going to say inline template and inline style. Let's run a dry run flag again, hit enter. Now you can see that it will just create the component and the spec. Let's go ahead and run that.

[01:55] I'm just going to get that command back and remove the dry run flag, hit enter. Now you can see we have this nice habit list folder with just the component and the spec. If I open up that component and hide the terminal, you can see we've got the template and the styles.

[02:13] We can actually go one step further though and make this the default behavior of the component schematic. If I open up angular.json, which is the JSON file that configures the Angular CLI, there's this section here for schematics that lets you override the defaults.

[02:31] If I go into schematics here and start typing component, it'll let me add a configuration object here, and I can say, inline style, set to true, and inline template, also set to true. Then I can open up the terminal again, clear it out.

[02:49] Let's run ng g, g is a shortcut for generate, and then c, which is a shortcut for component. This is equivalent to generate component. I'll say ng gc habit detail. If I use the dry run flag again, you can see that now the default is just to create the component and the spec.

[03:10] Let's run that without the dry run flag. Hide the terminal. You can see now we have this habit detail folder with just the component and the spec. If I open up the component, we now just have the template and the styles.

[03:24] Single file components are more a matter of personal preference. I prefer to have only one file I have to keep track of. I'd like to have a lot of small components rather than several big components that I have to keep track of in a large application. I do this by default anytime I set up a new Angular project.