Styling a component - lordoftheflies/angular-essential-training GitHub Wiki

We have the app component with its metadata configured for the selector and the template URL. Let's see what we can do about giving it some style. Angular provides support for styling a component via the component metadata in two ways similar to how templates work. We can use either the styles property, or the style URLs property, both take an array of string values. So they are a little different than the template ones. Let's start with the styles property in the app dot component dot ts file, we can add the styles property into the object literal we are passing into our component decorator. This takes an array so we can use the JavaScript or ray syntax of the double braces. And in the braces, we can set up our style content via strings. Here we can leverage the back ticks, just like we did in the template code to be able to write our style content on multiple lines. The content we put in this string is CSS. We have an h1 tag in our template. So let's add a CSS selector for the h1 tag and style it with a lighter color. If we switch over to the browser we can see that our h1 color has changed. Now we can throw any CSS we want in the styles property. So we could go back into our template file and add a CSS class to our P tag name description. Then switch back to the app dot component dot ts file and add a CSS class selector for the description class and give it some style. Let's make the text italic and give it a color. Then switching back to the browser, we can see that the style has been applied. Back in the app dot component dot ts file, We can see that the styles property is an array of strings so it supports multiple style strings. We could take the description class selector and put it in a separate string in our property value setter