Follow by Email

Angular 2 - Styling a component


Angular provides support for styling a component via the component metadata in two ways. Similar to how templates work, we can use either the style's property or the style URL's 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.component.ts file, we can add the styles property to the object literal we are passing into our component decorator. This takes an array, so we can use the JavaScript array syntax of the double braces. And in the braces, we can set up our style content via strings.

The content we put into 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.  We can throw any CSS we want in the styles property. So we can go back into our template file, 


<section>
  <header>
    <h1>Media Watch List</h1>
    <p class="description">Keeping track of the media I want to watch.</p>
  </header>
</section>




 Back in the app.component.ts file, we can see that the styles property is an array of strings, so it supports multiple style strings. We can take the description class selector and put it in a separate string in our property value setter, if we wanted to. Angular will handle making sure both of the style entries get used by the component. In app.component.ts


import { Component } from '@angular/core';

@Component({
  selector: 'mw-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css']
})                
export class AppComponent {}



In app.component.css :


:host {
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
}
section {
  width: 100%;
  background-color: #32435b;
}
section > header {
  color: #ffffff;
  padding: 10px;
}
section > header > h1 {
  font-size: 2em;
}
section > header .description {
  font-style: italic;
}





The other component metadata property is the style URL's property. Like the template URL property, the style URL's property works with string values that point to a file that contains the style content. But unlike like the template URL property, which just takes a single string, the style URL's property takes an array of strings, just like the style's property. 

So we can grab the CSS content out of the style's property, create a new file called app.component.css, and put the CSS in there. Then we can go back into the app.component.ts for the component and change the property to be style URL's. And change the string content to be the path to the new CSS file. Switching over to the browser, we can see everything is still playing nice. And if we needed to, we could add multiple CSS files to our component, and then simply add them to the array that we would set to the style URL's property. Now before we end this lesson on styles, let's cover a pretty sweet feature that Angular does with the styles. Angular's actually shimming the style content and converting it into new selectors and then injecting it into the DOM in the head tag.  And if we look at the contents of that tag, we can find the style rules shimmed a bit. When Angular renders our components, it add these dynamic id attributes to the component tags and all of its children and then uses those dynamic ids to write new CSS rules that sculpt the CSS to the component element, putting these in style tags in the <head> tag for each component rendered. 

 Angular provides a way to sculpt the CSS you write to the component you are writing it for, without you needing to do anything extra in your CSS or in some built process. Pretty sweet and pretty powerful.