• TypeScript
• Angular

• Node.js

• Angular

  • Install Angular CLI globally (one time setup)

  npm install -g @angular/cli
  ng version

  • Open project in vsCode (command run in the project directory)

  code .

  • Create Angular App

  ng new project-name

  • Run the project and open http://localhost:4200

  ng serve

• Create new Angular Component

  ng generate component component-name

  • Create new Angular Service

  ng generate service service-name

-Lifecycle hooks

✖ Error: Invalid Character (typing ng --version in the terminal)
Solution: Use bash (workaround)
✖ Error: Property 'name' has no initializer and is not definitely assigned in the constructor.
Solution: Add "strictPropertyInitialization": false in the compiler options of the tsconfig.json or a default value to the property.
✖ Error: Can't bind to 'ngModel' since it isn't a known property of 'input'.
Solution: Add FormsModule and ReactiveFormsModule to the imports array in app.module.ts.

Although not a lifecycle hook, constructor is the first thing called when the component is instantiated. At this moment, the component properties are not accessed yet.

Runs everytime component properties are updated. The first update occurs before OnInit. It doesn't run when event is fired up with no property change. It has a SimplesChanges parameter that allows us to access the previous current values of a specific property and check if it's the first change.

We need to import and implement OnInit in the class declaration. It is fired once, just after the first change detection cycle. By this time the properties are already accessible and updated. That's the best place to add inilialization logic for the component.

It gets called any time the change detection cycle runs. Not just for component propertiy changes, but for anything else. If run an event without changing properties, onchange won't run, but ngDoCheck will.

This lifcycle hook gets called when all component content has been fully initialized. The content is all html and properties inside the component selector. It is run only once.

Gets called whenever the content in the selector changes.

Gets called when the components view and all its child views are fully initialized. It gets called only once during the first change detection cycle.

Gets called whenever there's a change event detection cycle.

ngOnDestroy is run when the component is removed from the DOM. Great place to do some cleanup work.