GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing angular.dev — Anatomy of a Component • Angular

Components are the foundational building blocks for any Angular application. Each component has three parts:

TypeScript class
HTML template
CSS styles

NOTE: Learn more about components in the essentials guide.

In this activity, you'll learn how to update the template and styles of a component.

This is a great opportunity for you to get started with Angular.

Update the component template

Update the template property to read Hello Universe
```
template: `
  Hello Universe
`,
```
When you changed the HTML template, the preview updated with your message. Let's go one step further: change the color of the text.
Update the component styles

Update the styles value and change the color property from blue to #a144eb.
```
styles: `
  :host {
    color: #a144eb;
  }
`,
```
When you check the preview, you'll find that the text color will be changed.

In Angular, you can use all the browser supported CSS and HTML that's available. If you'd like, you can store your template and styles in separate files.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

Update the component template

Update the component styles