Skip to content

Instantly share code, notes, and snippets.

@LayZeeDK
Last active September 16, 2023 21:35
Show Gist options
  • Save LayZeeDK/d57615d55fc41b3a659d5f889ac50815 to your computer and use it in GitHub Desktop.
Save LayZeeDK/d57615d55fc41b3a659d5f889ac50815 to your computer and use it in GitHub Desktop.
Strict framework-injected properties in Angular components
flowchart TD
    A[ContentChild] --> B;
    B{Is static?} -- No --> C;
    B -- Yes --> D;
    C[Make the query<br>type optional] --> E(Access in<br>ngAfterContentInit<br>or later);
    D(Add assertion<br>in ngOnInit or<br>ngOnChanges) --> F;
    F[Add ! to<br>the query type] --> G(Access in<br>ngOnInit<br>or later)
Loading
flowchart TD
    A[ContentChildren] --> B;
    B[Add ! to<br>the query type] --> C(Access in<br>ngAfterContentInit<br>or later);
flowchart TD
    Z[Input property] --> A;
    A{Is required?} -- No --> B;
    A -- Yes --> F(Add assertion<br>in ngOnInit or<br>ngOnChanges);
    F --> G;
    B{Has default value?} -- No --> C[Make the input<br>type optional];
    B -- Yes --> D;
    D{Depends on other<br>input properties?} -- No --> E(Initialize in<br>the constructor);
    D -- Yes --> G[Add ! to<br>the input type]
flowchart TD
    A[ViewChild] --> B;
    B{Is static?} -- No --> C;
    B -- Yes --> D;
    C[Make the query type optional] --> E(Access in<br>ngAfterViewInit<br>or later);
    D(Add assertion<br>in ngOnInit or<br>ngOnChanges) --> F;
    F[Add ! to<br>the query type] --> G(Access in<br>ngOnInit<br>or later)
Loading
flowchart TD
    A[ViewChildren] --> B;
    B[Add ! to<br>the query type] --> C(Access in<br>ngAfterViewInit<br>or later);
Loading
@alvaromartmart
Copy link

This is neat @LayZeeDK, thanks!

@LayZeeDK
Copy link
Author

Thank you, @alvaromartmart. It's based on this 4 year old comment by @rkirov.

@danmt
Copy link

danmt commented Apr 30, 2022

Dope!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment