Skip to content

Instantly share code, notes, and snippets.

View ashburnere's full-sized avatar

Erik Aschenbrenner ashburnere

View GitHub Profile
ashburnere /
Last active June 6, 2019 20:10
Angular Components


Components define areas of responsibility in your UI that let you reuse these sets of UI functionality.

A component is comprised of three things:

  • A component class, which handles data and functionality. In the previous section, the product data and the share() method were defined for you in the component class.
  • An HTML template, which determines what is presented to the user. In the previous section, you modified the product list's HTML template to display the name, description, and a "Share" button for each product.
  • Component-specific styles that define the look and feel. The product list does not define any styles.

An Angular application is composed of a tree of components, in which each Angular component has a specific purpose and responsibility.

Template syntax

Angular's template syntax extends HTML and JavaScript.

Structural directives

Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an * is a structural directive.

*ngFor A structural directive that renders a template for each item in a collection.

<div *ngFor="let product of products">
ashburnere / gist:f22bf6a8c40097f3695876b0cfd4f3cd
Created October 1, 2017 14:19
REST APIs for example data
ashburnere / gist:9927c256a505fbed3251
Last active February 1, 2016 12:38
Task list test
  • Pick the flowers
  • Call John 9303032332
  • Cancel cable subscription
  • Book the flight tickets