Skip to content

Unsorted

  • An Angular application is a set of components and there is always a root one
  • There are several entities:
    • modules
    • components
    • directives
    • pipes
    • services
  • Angular has 2 types of compiling:
    • JiT(Just in Time, compiling after all scripts loaded in browser)
    • AoT(Ahead of Time, compiling first and then loading to browser)
  • Templates have several types of bindings:
    • Interpolation({{"Some expression"}}, {{ 1 + 2 }}, {{someProperty}}), which is equal to textContent property binding
    • Property binding([src]="image.src"), which is modifies properties of DOM element. Note: properties are always bind as camelCase even if they are not in DOM element. Example: <tr [rowSpan]="{{rows}}"></tr>
    • Attribute binding([attr.aria-required]="someExpression()")
    • Event binding((submit)="submitHandler()"), example of two way binding, property and event, <input [(ngModel)]="someProperty" type="text"/>. Two way binding is aka banana in a box

Some misc examples:

Next example will add class: 

<body class="main" [class.front]="isFrontPage()">

Next example will replace class 

<body class="main" [class]="isFrontPage()">

Several examples of style binding by property: 

<span [style.font-weight]="getFontWeight()"></span>
<span [style.line-height.em]="'2'">Here unit is already set in binding</span>
<span [style.line-height]="2em">Here unit is set in expression</span>