Skip to content

Instantly share code, notes, and snippets.

@GoodGuyGregory
Last active November 12, 2020 20:58
Show Gist options
  • Save GoodGuyGregory/93390a9d228b1d4eec62c4e3569390f2 to your computer and use it in GitHub Desktop.
Save GoodGuyGregory/93390a9d228b1d4eec62c4e3569390f2 to your computer and use it in GitHub Desktop.
Angular Notes

Angular Basics Notes

Adopted Typescript as its prefered language of choice. Typescript allows for syayic typing. Angular Applications are made up of a collection of modules. Angular applications can be written in Ts, JS and Dart.

CLI Documentation

Common Getting Started Commands

Decorators

Decorators are used to provide Angular with Metadata for components and mounting them to the DOM

Components

are the backbones of Angular applications and are composed of three things. Component = Template + Class + Decorator

Template is the User view of the component Class is what brinds your component to life decorator contains metadata that wires up the class to the template

Components use kabab-case my-component-using-kabab-case.ts

the @Component decoration allows you to make classes that are going to be used as Angular components

Date Binding in Angular

  • One-Way: Class to Template

<h1>{{expression}}</h2> you can also attach bindings to input elements

<input [target]="expression /> for attribute binding

<button (event)="expression"></button> passes component information from child to parent component

  • One-Way: Template to Class
  • Two-Way: Databinding between Class and Template

Creating Barrels

for exporting multiple components to your project's app.module.ts to reduce import lines

*Directives

  • Control Visibility
  • Apply Styling
  • Loop Over items
  • Extend Application with Custom Scripts

Three Kinds of Directives

  • Component: Components are made up of template, class, decorator, component decorators have two required properties selector and templates
  • Attribute
  • Structural: Ngif and NgFor are examples of structural directives

Angular Lifecycle Hooks

ngOnInit ngOnDestroy

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