Creating components with the Angular CLI

The Angular CLI provides a powerful command to scaffold components. However, in many development scenarios—especially during rapid prototyping or when using alternative testing strategies—you might want to skip the creation of the default unit test file (.spec.ts).

To generate a new component (e.g., a task-item) without the test file, use the --skip-tests flag:

ng generate component task-item --skip-tests

This ensures your project structure remains lean by only creating the .ts, .html, and .css files.

Once your component is set up, you need to display logic-driven data in your view. Angular offers several ways to achieve this, ranging from simple text injection to complex DOM property manipulation.

A. Interpolation

Interpolation is the most common way to display data. By using the "mustache" syntax {{ }}, you can embed TypeScript variables directly into your HTML.

B. Property Binding

Property binding allows you to set the DOM property of an element. This is often confused with HTML attributes, but in Angular, we use square brackets [] to target the underlying DOM property.

You can use innerText to achieve a result similar to interpolation, or pass hardcoded strings using single quotes within the brackets:

C. Attribute Binding

Sometimes, a DOM property does not exist for the HTML attribute you want to change (this is common with ARIA attributes or specific table attributes). In these cases, we use the [attr.target] syntax.

For example, to improve accessibility by dynamically setting an aria-label: