This was a brand new discovery to me. When building Angular components, the angular CLI will automatically create a file for CSS styles, and a file for the HTML template. I knew that the HTML template could be created in-line, but I had no idea you could the same with styles.

If you read the documentation, it does indeed say that the styles component metadata supports one or more in-line styles.

By default an Angular component is created with a stylesUrls property, like this:

view plain print about
1@Component({
2 selector: 'app-root',
3 templateUrl: './app.component.html',
4 styleUrls: ['./app.component.css']
5})

But we can replace the styleUrls with inline styles, like this:

view plain print about
1@Component({
2 selector: 'app-root',
3 templateUrl: './app.component.html',
4 styles: ['h1 { color: blue; }']
5})

I told the h1 tags to always show up in blue text.

Run the Angular app, and it should work:

I learned something new today.