Week 7 — Angular

[Angular Introduction and CLI] What is Angular?

Angular is a TypeScript-based frontend framework for building component-based single-page applications.

[Angular Introduction and CLI] What is a single-page application?

An SPA loads an application shell and updates views in the browser without full page reloads for every navigation.

[Angular Introduction and CLI] What is Angular CLI?

A command-line tool that scaffolds, builds, tests and serves Angular projects.

[Angular Introduction and CLI] What do ng new, ng serve and ng generate component do?

ng new creates a project; ng serve starts a development server; ng generate component creates component files.

[Angular Introduction and CLI] What is a component in Angular?

A class paired with a template and metadata that controls a reusable portion of the UI.

[Angular Introduction and CLI] What is the purpose of a bundler?

It combines and optimizes application modules and assets for browser delivery.

[Angular Templates and Components] What is an Angular template?

HTML enhanced with Angular binding syntax, expressions and directives to render component state.

[Angular Templates and Components] What is interpolation?

Double curly braces display an evaluated expression in a template, such as {{ userName }}.

[Angular Templates and Components] What is property binding?

Square brackets bind a DOM or component property to an expression, such as [disabled]="isSaving".

[Angular Templates and Components] What is event binding?

Parentheses bind an event to a handler, such as (click)="save()".

[Angular Templates and Components] What is a template reference variable?

A local template variable declared with #, used to refer to an element or directive instance.

[Angular Templates and Components] What is content projection?

ng-content allows a component to display markup supplied between its opening and closing tags.

[Angular Templates and Components] What is the difference between standalone and NgModule-based components?

Standalone components declare their own imports; NgModules group declarations and imports in the older organizational model.

[Angular Lifecycle and Change Detection] What is ngOnInit?

A lifecycle hook invoked after Angular initializes a component's inputs; often used for initialization logic.

[Angular Lifecycle and Change Detection] What is ngOnDestroy?

A lifecycle hook used for cleanup such as unsubscribing or releasing resources.

[Angular Lifecycle and Change Detection] What is ngOnChanges?

A hook called when bound input values change, with information about those changes.

[Angular Lifecycle and Change Detection] What is Angular change detection?

Angular checks relevant application state and updates rendered bindings when values change.

[Angular Lifecycle and Change Detection] What is OnPush change detection?

A strategy that limits checking primarily to input-reference changes and other explicit change triggers.

[Angular Lifecycle and Change Detection] What are Angular signals?

Reactive value containers that notify dependent computations and views when their values change.

[Angular Directives and Pipes] What is a directive?

An Angular class that adds behavior to an element or changes how template content is rendered.

[Angular Directives and Pipes] What is a structural directive?

A directive that changes DOM structure by adding or removing embedded views, such as *ngIf or *ngFor in older syntax.

[Angular Directives and Pipes] What is an attribute directive?

A directive that changes appearance or behavior of an existing element, such as ngClass or ngStyle.

[Angular Directives and Pipes] What is a pipe?

A template transformation that formats values for display, such as date, currency or uppercase.

[Angular Directives and Pipes] What is a custom pipe?

A class implementing PipeTransform and decorated with @Pipe to provide reusable transformations.

[Angular Directives and Pipes] What is the difference between pure and impure pipes?

Pure pipes run when input values or references change; impure pipes may run on every change-detection cycle.

[Angular Binding and Communication] What is one-way data binding?

Data flows from component to view through interpolation or property binding, or from view to component through events.

[Angular Binding and Communication] What is two-way data binding?

It synchronizes a value between the component and an input, commonly using [(ngModel)] with FormsModule.

[Angular Binding and Communication] What is @Input?

A component input accepts data passed down from a parent component.

[Angular Binding and Communication] What is @Output?

A component output emits events that a parent component can handle.

[Angular Binding and Communication] How can unrelated components share state?

Use a shared injectable service, often with signals or RxJS observables.

[Angular Binding and Communication] What is the difference between template-driven and reactive forms?

Template-driven forms define much behavior in templates; reactive forms define explicit form models and validation in TypeScript.

[Angular Routing and Guards] What is Angular Router?

Angular Router maps URLs to components and enables navigation without full page reloads.

[Angular Routing and Guards] What is router-outlet?

A directive marking where the activated route's component is rendered.

[Angular Routing and Guards] What is routerLink?

A directive that navigates between application routes without a normal page reload.

[Angular Routing and Guards] What is a route guard?

Logic that permits, blocks or redirects navigation based on conditions such as authentication.

[Angular Routing and Guards] What is lazy loading in Angular?

Loading route code only when needed to reduce the initial JavaScript bundle.

[Angular Routing and Guards] Why is a route guard not sufficient authorization?

Client-side checks can be bypassed; the backend must independently enforce access control.

[Angular Services and Dependency Injection] What is an Angular service?

An injectable class that encapsulates reusable logic, state or API communication outside UI components.

[Angular Services and Dependency Injection] What does @Injectable do?

It marks a class as eligible for Angular dependency injection and can configure where it is provided.

[Angular Services and Dependency Injection] What does providedIn root mean?

Angular provides a typically application-wide service instance from the root injector.

[Angular Services and Dependency Injection] What is Angular dependency injection?

A mechanism that supplies services and other dependencies to components or classes through injectors.

[Angular Services and Dependency Injection] What is HttpClient?

Angular's API for making typed HTTP requests and receiving responses as observables.

[Angular Services and Dependency Injection] What is an RxJS Observable?

A representation of a stream of asynchronous values that can be subscribed to and transformed with operators.