Angular 7 (formerly Angular 2) - The Complete Guide | Part 1

Component Selector

# component selector
## element
'app-demo'
usage: <app-demo></app-demo>
## attribute
'[app-demo]'
usage: <div app-demo></div>
## class
'.app-demo'
usage: <div class='app-demo'></div>

Data Binding

---

String Interpolation(插值)

Syntax:

{{ expression }}

expression represent a String value or something that can be converted to String or a function that returns what we metioned above.

Property Binding(属性绑定)

Syntax:

<element [property]="expression"></element>

property represent the bindable html element property.
expression represent a String value or something that can be converted to String or a function that returns what we metioned above.

String Interpolation vs Property Binding

In most cases they are equivalent:

<p>{{ someText }}</p>
# equals to
<p [innerText]="someText"></p>

when should you use which of the two:

• string interpolation: if you want output something in your template print some text.
• property binding: if you want to change some property be that of an aged female element or a directive or a component.

Don’t mix property binding and string interpolation. {{ expression }} won’t work between "".

Event Binding

Syntax:

// use parentheses <element (event)="func()"></element>

event the bindable event name, e.g. click keyup mouseenter
func the callback function when event triggered.

Two-Way-Databinding

Syntax:

// use square brackets and parentheses <element [(ngModel)]="model"></element>

ngModel the built-in angular directive.
model the view model a property difined in our typescript code.

Important : For Two-Way-Binding (covered in the next lecture) to work, you need to enable the ngModel directive. This is done by adding the FormsModule to the imports[] array in the AppModule.
You then also need to add the import from @angular/forms in the app.module.ts file:
import { FormsModule } from '@angular/forms';

Directives(指令)

Directives are Instructions(说明) in the DOM!

Structural Directive

this type of directive will change the structure of our dom: add or remove elements.

Built in directives

prefix with *ng.

• *ngIf : output data conditionally
  • syntax: <element *ngIf="expression"></element>
  • usage: when expression eval as true then add this element to dom otherwise remove it.

• *ngIf else:

  • syntax:

    <element *ngIf="expression; else someRef"> <ng-template #someRef></ng-template></element>

  • usage: when expression eval as false then add the corresponding template to dom.

• *ngFor
  • syntax: <element *ngFor="let x of someArray ; let i = index"></element>
  • usage: iterate each item of someArray as the template context.

Tip: Performance improvement when using ngFor to loop over an array in templates, use it with a trackBy function which will return an unique identifier for each item.

Attribute Directive

Unlike structural directives, attribute directives only change the element they were placed on.

Built in directives

• ngStyle
  • syntax: <element [ngStyle]="styleObject"></element>
  • styleObject: e.g. {backgroundColor: getColor()} or {'background-color': someVarible}

• ngClass

  • syntax: <element [ngClass]="{className: expression}"></element>
  • className: CSS class name
  • expression: expression evaluated as boolean. True add the class above.

  <div [ngClass]="{'class1 class2':expression}"></div>
  <div [ngClass]="{class3: expression1, class4: expression2}"></div>
  <div [ngClass]="{'class-with-dash': expression}"></div>
  
  // [class.<class-name>]='truthy expression'
  <div [class.text-success]="expression"></div>

Debugging

• Syntax Error: error message details in console.
• Logic Error: debug source code directly or through source map.

Augury: you can install this extension tool to help analyse the code.