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

Component Selector

1
2
3
4
5
6
7
8
9
10
# 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:

1
{{ 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:

1
<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:

1
2
3
<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:

1
// 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:

1
// 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:

      1
      <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.
    1
    2
    3
    4
    5
    6
    <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.

<!--上次更新: 2018-11-07 11:44 -->
不贪心,但要有颗大大的心。
0%