ContextQMD
Back to Angular

Components in Angular

adev/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md

22.0.0-next.101.2 KB
Original Source

Components in 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.

<hr />

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

<docs-workflow> <docs-step title="Update the component template"> Update the `template` property to read `Hello Universe`
ts
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. </docs-step>

<docs-step title="Update the component styles"> Update the styles value and change the `color` property from `blue` to `#a144eb`.
ts
styles: `
  :host {
    color: #a144eb;
  }
`,

When you check the preview, you'll find that the text color will be changed. </docs-step>

</docs-workflow>

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.