💡 Angular Tip

Did you know that VSCode has a built-in Angular profile template which is packed with popular extensions and handy settings out of the box?

📢 VSCode profiles are a great way to setup your development environment easily. It is fully customizable so that you can also share it with your dev team!

https://code.visualstudio.com/docs/editor/profiles#_angular-profile-template

💡Small Tip

If you wanna create all your @Angular components as standalone in one shot without adding --standalone option to every single #Angular CLI command ?

Just add the property "standalone" to your "angular:component" schematic in the angular.json file

Frontend Unit Tests.
🟡 The Gold Standard 🟡

Everyone racing for top coverage.
But reality looks much much different.

When NOT to Write Frontend Unit Tests:

• PoCs/MVPs: Here today, irrelevant tomorrow.
• UI part that is changed a lot: Don't waste your time.
• Experimental features: Can change any minute.
• Basic static components: Not worth it.
• Overwhelming mocking: Value > Effort.
• Deadlines: Especially in startups.
• Limited resources: Business value first/early phase.
• Redundant scenarios: 100% coverage is not the goal.
• Backend is more important: Frontend is changing much more often.

When TO Write Frontend Unit Tests:

• Critical features: Some things just can't fail.
• Complex logic: Once stable of course.
• Reusable components: The Foundation.
• Regression prevention: When it breaks often.
• Set in stone features: Worth the effort.
• Documentation: Tests can be great for that.
• Pre-refactoring: Before embarking on refactoring.
• Integration points: Vulnerable places.

Business Perspective:

• User Focus: E2E reflecting customer experience.
• Cost Efficiency: E2E tests can catch critical bugs.
• Time Savings: Reducing emphasis on unit tests can speed up development cycles.
• Real-world Relevance: E2E tests in near-production environments offer tangible insights.
• Simplified Reporting: E2E results are often more digestible for non-technical stakeholders.
• Coverage Overkill: Extensive unit tests can be redundant with a strong E2E suite.
• Maintenance Overhead: Frontend changes might require frequent unit test updates.

Businesses often lean towards ROI.
E2E tests often provide clearer value.

Directives are powerful in #Angular.

But heavily underused!

Here is a complete list of Built-In Directives!

🔹 Common Directives 🔹

• NgClass - Toggle CSS classes.

• NgComponentOutlet - Instantiate components.

• NgFor & NgForOf - Iterate & render lists.

• NgIf - Conditional template rendering.

• NgOptimizedImage - Optimize image load.

• NgStyle - Set inline styles dynamically.

• NgTemplateOutlet - Insert from TemplateRef.

• NgSwitch, NgSwitchCase, NgSwitchDefault - Conditional content via switch.

• NgPlural & NgPluralCase - Display based on singular/plural logic.


🔹 Forms Directives 🔹

• AbstractFormGroupDirective - Base logic for form group directives.

• CheckboxControlValueAccessor - Interface between Angular forms and checkbox element.

• CheckboxRequiredValidator - Validator ensuring a checkbox is checked.

• DefaultValueAccessor - Default bridge between Angular forms and DOM.

• EmailValidator - Validator for email format.

• FormArrayName - Connects FormArray to DOM.

• FormControlDirective - Links a standalone FormControl to the DOM.

• FormControlName - Links a FormControl in an existing FormGroup to the DOM.

• FormGroupDirective - Links an existing FormGroup to the DOM.

• FormGroupName - Nested FormGroup binding logic.

• MaxLengthValidator - Validator for maximum string length.

• MaxValidator - Validator for maximum number value.

• MinLengthValidator - Validator for minimum string length.

• MinValidator - Validator for minimum number value.

• NgControlStatus - Reflects control status (valid/invalid) in the DOM.

• NgControlStatusGroup - Reflects FormGroup status in the DOM.

• NgForm - Directive that creates a top-level FormGroup instance.

• NgModel - Creates a FormControl from a domain model and binds it.

• NgModelGroup - Groups controls under one form domain model property.

• NgSelectOption - Binds select options to form controls.

• NumberValueAccessor - Binds numeric input value.

• PatternValidator - Validator for regex pattern.

• RadioControlValueAccessor - Binds radio button value.

• RangeValueAccessor - Binds range input value.

• RequiredValidator - Validator ensuring a value is present.

• SelectControlValueAccessor - Binds select dropdown value.

• SelectMultipleControlValueAccessor - Binds multi-select dropdown values.

🔹 Router Directives 🔹

• RouterLink - Navigational directive to support anchor navigation.

• RouterLinkActive - Adds classes to the element when the associated RouterLink becomes active.

• RouterLinkWithHref (Deprecated)- Binds href to the associated RouterLink.

• RouterOutlet - Placeholder directive where the router displays a view.

🔹 Upgrade/Static Directives: 🔹

• UpgradeComponent - Facilitates the use of AngularJS components in Angular templates.