Angular Application Architecture Quiz

Angular Application Architecture

• Angular applications are structured as a tree of components.
• A single root component exists at the top level.
• Secondary root components manage specific views or screens.
• Components recursively render other components, creating a hierarchical structure.

Component Design and Reusability

• Break down applications into smaller, independent components.
• Each component should have well-defined responsibilities and a clear interface.
• Strive for component reusability; refactor if a component has reusable parts.
• Components should be abstracted; they should communicate through interfaces, not implementation details.

@Component Annotation

• The @Component annotation is used to decorate component classes.
• It's imported from '@angular/core'.
• It provides properties to configure components.
• The selector property defines a custom HTML tag for the component.

Content Projection

• Enables content passed to a component to be displayed within the component's template.
• Single slot content projection displays all passed content in a designated location.
• Multiple components may be projected, creating flexible layouts.

Component Lifecycle Hooks

• Components have a lifecycle with phases from creation to destruction.
• Lifecycle hooks are special methods that execute at specific lifecycle phases.
• Key hooks include ngOnInit, ngOnChanges, and ngOnDestroy.
• ngOnInit: Used for component initialization after data binding.
• ngOnChanges: Detects and responds to input property changes.
• ngOnDestroy: Performs cleanup operations before component destruction.

Component Interfaces: Inputs, Outputs and Data Flow

• Components communicate through inputs and outputs.
• Input properties receive data from parent components.
• Output properties emit data to parent components.
• This enables unidirectional data flow, improving application maintainability.

Angular Templates and Data Binding

• Templates combine HTML with Angular template syntax.
• Data binding synchronizes data between the component and the DOM.
• Interpolation ({{...}}) displays component data in the template.
• Property binding ([...]) passes data from the component to the template.
• Event binding ((...)) handles user interactions in the template.

Directives and Built-in Directives

• Directives modify the DOM's appearance or behavior.
• Built-in directives like *ngFor and *ngIf are commonly used for dynamic rendering.
• Example: Extending the currency pipe using {{ product.price | currency: 'INR' }}

Angular Forms

• Angular forms are crucial for user interaction and data collection.
• Two main approaches exist: template-driven forms and reactive forms.
• Template-driven forms use HTML and data binding within templates.
• Reactive forms manage form logic using a model in the component class.
• Key form elements include FormControl, FormGroup, FormArray, and ControlValueAccessor.