Scribd
Upload
3 views1 page

Rbroen Angular-Structures

The Angular Structures Cheat Sheet provides guidance on project setup, emphasizing the organization of components, routes, and services within folders. It includes sample commands for creating a new Angular project and outlines key life cycle hooks, detailing their purpose and when they are called during the component's lifecycle. The document serves as a quick reference for developers to efficiently manage Angular projects and understand component behavior.

Uploaded by

radha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views1 page

Rbroen Angular-Structures

The Angular Structures Cheat Sheet provides guidance on project setup, emphasizing the organization of components, routes, and services within folders. It includes sample commands for creating a new Angular project and outlines key life cycle hooks, detailing their purpose and when they are called during the component's lifecycle. The document serves as a quick reference for developers to efficiently manage Angular projects and understand component behavior.

Uploaded by

radha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Angular Structures Cheat Sheet

by Robert Broen (rbroen) via cheatography.com/64564/cs/20562/

Project setup Life cycle hooks (cont)

Keep things organized in folders (Modules are not the default as of ngDoCh​eck() Detect and act upon changes that Angular
2024). All pages, compon​ents, routes, valida​tors, services that can't or won't detect on its own. Called
belong together should be have the same (grand​)pa​rent. during every change detection run,
immedi​ately after ngOnCh​anges() and
Project setup commands - sample ngOnIn​it().

# When setting up a new project think about how ngAfte​rCo​nte​ntI​nit() Respond after Angular projects external
you want it to look. Make a short list of commands content into the compon​ent's view / the
to set up your project. Open the new project in view that a directive is in. Called once after

your IDE, if things do not feel right, adjust your the first ngDoCh​eck().

list and run it again. I have added an example ngAfte​rVi​ewI​nit() Respond after Angular initia​lizes the
below. compon​ent's views and child views / the
ng new sample view that a directive is in. Called once after

cd sample the first ngAfte​rCo​nte​ntC​hec​ked().

ng g c core/h​ome​pag​e/c​ont​ain​ers​/ho​mepage ngAfterViewChecked() Respond after Angular checks the compon​‐


ng g c core/p​rod​uct​s/c​ont​ain​ers​/pr​oducts ent's views and child views / the view that a
ng g c core/p​rod​uct​s/c​ont​ain​ers​/pr​odu​ct- directive is in. Called after the ngAfte​rVi​‐

edit ewI​nit() and every subsequent ngAfte​rCo​‐


nte​ntC​hec​ked().
ng g c core/p​rod​uct​s/c​ont​ain​ers​/pr​odu​ct-
edit ngOnDe​stroy() Cleanup just before Angular destroys the
ng g c core/p​rod​uct​s/c​ont​ain​ers​/pr​odu​ct- direct​ive​/co​mpo​nent. Unsubs​cribe Observ​‐

add ables and detach event handlers to avoid


memory leaks. Called just before Angular
ng g c core/p​rod​uct​s/c​omp​one​nts​/pr​odu​ct-
destroys the direct​ive​/co​mpo​nent.
form
ng g s core/p​rod​uct​s/s​erv​ice​s/p​roduct
ng g c core/c​ont​act​/co​nta​ine​rs/​contact
# Make many more so you get a good feel of how your
decisions will impact the project. Make changes,
delete the project and run you commands again.
# Add a route to the Produc​tsC​omp​onent at
/products
# Use the Produc​tSe​rvice in the constr​uctor of
the Produc​tsC​omp​onent

Life cycle hooks

ngOnCh​‐ Respond when Angular (re)sets data-bound input


anges() proper​ties. The method receives a Simple​Changes
object of current and previous property values. Called
before ngOnInit() and whenever one or more data-
bound input properties change.
ngOnInit() Initialize the direct​ive​/co​mponent after Angular first
displays the data-bound properties and sets the direct​‐
ive​/co​mpo​nent's input proper​ties. Called once, after the
first ngOnCh​ang​es().

By Robert Broen (rbroen) Not published yet. Sponsored by CrosswordCheats.com


cheatography.com/rbroen/ Last updated 5th August, 2024. Learn to solve cryptic crosswords!
Page 1 of 1. http://crosswordcheats.com

You might also like