🅰️ Angular: Reading the Source

Angular: Reading the Source: Angular, unlike React, splits the component in TWO: the logic in a `.ts` file, the UI in an `.html` template.

Angular, unlike React, splits the component in TWO: the logic in a `.ts` file, the UI in an `.html` template. This is like the split between the SCRIPT (`.ts` — who does what) and the STAGE LAYOUT (`.html` — what stands where) in a theater play. Why does it concern a tester? Because Angular adds automatic, meaningless attributes like `_ngcontent-xxx` to the DOM — these are for style isolation and are NEVER used for locating, being just as fragile as React's hash class. `*ngIf` removes an element entirely from the DOM (the counterpart of React's conditional render), while `*ngFor` produces a list. Java analogy: the `.ts` is like the class body and the `.html` like the view contract that class exposes. In QA context: a tester who recognizes auto-generated attributes like `_ngcontent`/hash asks the developer for an `[attr.data-testid]` binding. Throughout this group we will CONTINUOUSLY compare against the React patterns from GROUP F.

📂 G1. Component + Template Separation: `.ts` + `.html`

Angular's `.ts`/`.html` separation is like the split between a building's ENGINEERING PLAN (load calculations, behavior — `.ts`) and its INTERIOR DECORATION PLAN (visual layout — `.html`): TWO SEPARATE documents describing the same building, ALWAYS used together. Why is knowing this distinction useful? Because when tracking down a bug's source (whereas in React a single JSX file is enough), in Angular you must check BOTH `.ts` (is the logic correct?) AND `.html` (is the template bound correctly?) — reading only one gives an incomplete diagnosis. Java analogy: like the Servlet (logic, similar to `.ts`) vs JSP (view, similar to `.html`) separation in old Java web development, or the Controller/View split in MVC. In QA context: when you say "this bug is in the frontend", in Angular you can speak more specifically by splitting it into "is it in the component class (`.ts`) or the template (`.html`)".

Step by Step: How `.ts` and `.html` Merge into a Single DOM

`bug-card.component.ts`

`@Input() bug` (the counterpart of React's prop) and logic (methods, variables) are defined here — PURE behavior code.

`bug-card.component.html`

The VISUAL structure is in a separate file: template expressions like `{{bug.title}}`, `*ngIf` are written here — like React's JSX split into a SEPARATE file.

Angular BINDS the two

The component class (`.ts`) and the template (`.html`) are linked via the `@Component({templateUrl:...})` decorator — the two TOGETHER define a single component.

The real DOM is produced

Angular combines the data from `.ts` with the template expressions from `.html` to produce the REAL DOM nodes.

The tester's reflex: check BOTH files

While a single JSX file is enough in React, when tracking down a bug's source in Angular you must EXAMINE both `.ts` (logic) and `.html` (view).