reboottime / angular-playbook Goto Github PK

Overview

This article discusses Angular directives, covering:

• What is it
• How to build it

References

• Proacademy, Understanding Angular Directives
• Angular Docs, Understanding Angular Directives
• Directive Composition API

Below is a speculative explanation of how the Material UI button functions, focusing on the mat-raised-button directive, without referring to the actual source code.

• Define the directives

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';

@Directive({
  selector: '[mat-raised-button]'
})
export class MatRaisedButtonDirective implements OnInit {
  
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    // Add Material Design specific classes
    this.renderer.addClass(this.el.nativeElement, 'mat-button');
    this.renderer.addClass(this.el.nativeElement, 'mat-raised-button');

    // Add any additional styles or attributes necessary for the raised effect
    this.renderer.setStyle(this.el.nativeElement, 'box-shadow', '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)');
    // ... other styles or event bindings
  }
}

• define the module

@NgModule({
  declarations: [
    MatRaisedButtonDirective,
    // ... other components and directives
  ],
  // ...
})
export class MaterialModule { }

• Apply the directive

<button mat-raised-button>Click Me</button>

Overview

This article talks about Angular Applications' state management solutions, primarily covered two means:

• Ngrx, a Redux similar solution for Angular Applications
• Tanstack Query for Angular Applications

Overview

This article talks about Unit testing in Angular applications.

References

1. Getting Started with Standalone Components in Angular

Overview

This article talks about reactive form in Angular. Bellow are the main points:

• Analogy, building blocks of form
• FormControl, a representation of a single UI form field
• FormGroup, a representation of concept unit
• FormBuilder, simplify form group declaration

At the end of this article, I also listed some FAQs that you can't find on Angular official doc.

This article collects some common used Angular libraries.

• Loading Effect

Essentials of creating SPA using Angular Stack

This note is a essential list of creating angular app SPA, content covered are

• Angular Basics
  • directives
  • component:
    • define a component: html template, styling, and component state
    • component lifecycle hooks
  • module: declarations, imports, providers, bootstrap(app level only)
    • Using angular material ui, you import the module you use
    • You can also organize your codebase based on module, such that you can remove the imports declaration of a parent module.
  • Observable: push mode (observable) vs pull mode( pull mode)
  • life cycle events
  • communication between parent and children components
    • @input: define what property a parent component passes to is specific child component, for example
    • @output: define communication from child to parent via event emitter instance, for example
    • Event Emitter
• Angular Routing
  • Route:
    • forRoot
    • forChild
    • nested routing
  • lazy loading
  • route guard
    • route guardian
    • child route guardian
• State Management using ngrx: Similar to Vuex/React Redux
  • The simplest example, a counter application
• CI/CD: built in support on env:
  • Angular CLI supports generate environment preset files for development, staging, and production.
  • At each code building time, you can specify the building environment based on your needs via the --configuration parameter, for example, build your code for staging environment. ng build --configuration=staging
  • With above mechanism, you can specify the building environment in CI/CD pipeline and read different configurations for that environment.
• Angular Material UI: After using material UI of angular, Angular UI libraries are directive driven, module based.

Overview

This article discusses the routing essentials of large Angular applications, with content organized in two parts:

• Part I: URL Design for Single Page Applications

  • General guideline on design SPA URLs
  • An Example about SPA URL design

• Part II: Common Routing Requirements

  • URL-Driven Code organization and code splitting
  • Authentication / RBAC on URL
    • Integrate Ngrx and store authenticated user data at root level, reducing the need for unnecessary HTTP requests to fetch the current user.

• PART III: Code Organization and Routing

References

1. lazy loading (lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.)
2. Functional Guards ( replace deprecated CanActivate interface)
3. Angular application folder structure guideline

Overview

Introduction

This article intends to guide a newbie to be familiar with angular material ui. content covered are highly similar what angular material ui official doc.

Quick References

• Customize Styling for Angular Material UI apps
  • Angular Material Custom Theme Video Tutorial, by Academind
  • customize multiple themes for angular material ui app
  • Angular custom theme official doc
  • Material UI guideline, including css class names
• Angular CDK doc

Overview

This article discusses the code style I endorse for Angular applications.

• Naming Convention
• Component Code Organization
• Folder and File Organization

References

1. Angular: Migrating to ESLint
2. Angular Style Guide

Overview

This article collections code snippets about some common usage scenarios in Rxjs.
Bellow are the list

• HTTP dependencies

Overview

Introduction

This article attempts to seize Rxjs essentials in a short time. The content covers two parts:

• Core Concepts Of Reactive Programming
  • Core concepts
  • Observer Pattern
• Rxjs
  • Terminologies
  • Code Pattern

As RxJS declares itself as a library for reactive programming using Observables, this article starts with understanding reactive programming essentials.

Quick References

• RxJS Crash Course
• rxjs.dev
• Observer Pattern
• get hands dirty part, the source code
• More intuitive organized doc regarding rxjs

Angular Nuance

• ng-container: doesn't render any actual DOM content for you in the DOM. It is more like a logic wrapper on using ngIf or other directives
• ng-template: as way to hold template, if you call the template somewhere, angular renders the template content for you

References

• Configure environments through configuring target-specific file replacements
• Deploy Angular App to Azure via Static Web App Deployment
• Dockerize an Angular Application using Nginx

Overview

About: This article navigates Angular state management using Ngrx.

Ngrx is a strongly opinionated global and local state management solution for angular application.

Overview

Status: Draft

This article talks about building a toast tool using angular material ui such that user can programmatically notify user

Popular Angular UI Libraries

By Asking GPT 4, so this is not my effort.

1. Angular Material

   • Official Material Design component library for Angular.
   • Offers reusable UI components like form controls, navigation, layouts, and data tables.
   • Angular Material

2. NGX-Bootstrap

   • Based on Bootstrap, the popular front-end framework.
   • Provides Bootstrap components powered by Angular.
   • NGX-Bootstrap

3. PrimeNG

   • Rich set of open-source UI components.
   • Includes components like data tables, dialogs, charts.
   • PrimeNG

4. Clarity Design System

   • Developed by VMware.
   • Design system and set of Angular components focused on data management.
   • Clarity Design System

5. NG-ZORRO

   • Enterprise-class UI component library based on Ant Design.
   • Tailored for Angular with a range of high-quality components.
   • NG-ZORRO

6. Kendo UI for Angular

   • Comprehensive set of Angular-native components.
   • Known for rich grid, chart components.
   • Kendo UI for Angular

7. Onsen UI

   • Open-source UI framework for mobile apps.
   • Offers components designed for mobile interfaces.
   • Onsen UI

8. Vaadin

   • Set of high-quality web components for business applications.
   • Works well with Angular and other frameworks.
   • Vaadin

9. Nebular

   • Based on Eva Design System.
   • Provides a set of beautifully designed and customizable components.
   • Nebular

Common Needs

When building single page applications, the common needs are

• Configure the request URL for a set of API endpoints
• Add request header, for example, add JWT Authorization header
• Config interceptors for common pre-request or response-logging logic, such as refreshing tokens, logging, or centralizing error handling.

Overview

Given my background in developing React SPAs and positive experiences with React Testing Libraries and Playwright, this playbook proposes the following solutions for testing Angular apps.

• Unit testing on DOM: Angular Testing Library
• E2E testing: Playwright
• Karam vs Jest?

Angular component life cycle events

constructor

used only when you want to inject some services

Details

1. ngOnChanges: This hook is called whenever one or more data-bound input properties of a directive or a component changes. It receives a SimpleChanges object containing the previous and current values of the input properties.

   When to use: Use this hook when you need to react to changes in input properties.

2. ngOnInit: This hook is called after Angular has initialized all data-bound properties of a directive. It is a good place to perform initialization logic for your component.

   When to use: Use this hook when you need to set up the initial state of your component or perform one-time initialization tasks.

3. ngDoCheck: This hook is called during every change detection cycle. It allows you to perform your own custom change detection logic.

   When to use: Use this hook when you need to implement custom change detection or perform more granular change detection.

4. ngAfterContentInit: This hook is called after Angular has projected external content (e.g., content passed between component tags).

   When to use: Use this hook when you need to perform initialization logic that relies on content projection.

5. ngAfterContentChecked: This hook is called after Angular has checked the content projected into the component.

   When to use: Use this hook when you need to perform additional checks or logic after Angular has checked the content.

6. ngAfterViewInit: This hook is called after Angular has initialized the component's views and child views.

   When to use: Use this hook when you need to perform initialization logic that relies on the view or its child views.

7. ngAfterViewChecked: This hook is called after Angular has checked the component's views and child views.

   When to use: Use this hook when you need to perform additional checks or logic after Angular has checked the views.

8. ngOnDestroy: This hook is called just before Angular destroys the component. It is a good place to clean up resources, unsubscribe from observables, etc.

   When to use: Use this hook when you need to clean up resources or perform any necessary cleanup before a component is destroyed.

Real-world Usage Examples:

1. ngOnInit: Use this hook to fetch initial data from a server or set up initial state based on input properties.

2. ngOnChanges: Use this hook to react to changes in input properties. For example, if you have a component that displays user details, you can use this hook to update the display whenever the user data changes.

3. ngAfterViewInit: Use this hook when you need to interact with the DOM or perform operations that require the view to be fully initialized. For example, if you need to work with a specific element in the template, this is the appropriate hook.

4. ngOnDestroy: Use this hook to clean up resources like subscriptions to observables or event listeners to prevent memory leaks.

Remember, the choice of which lifecycle hook to use depends on the specific requirements of your application and component. Use the appropriate hooks to manage the state and behavior of your components effectively.