angular

Directives

Is a horrible term within angular. If you look at the meaning of directive you get :

• an official or authoritative instruction
• involving the management or guidance of operations

In Dutch you get

• richtlijn
• instructie
• leidend, regelend, besturend

In general it can be anything. But in angular they make up 3 kinds of directives:

• Components : Directives with a template
• Structural directives : change the DOM layout, NgFor and NgIf are examples, any directive with an * is a structural directive.
• Attribute directives : change the appearance or behavior of an element,component or another directive. NgStyle is given as example.

property binding []

Html tag attributes are the ones you put in the tag, it becomes a property once the dom has been built.

<a id="linkid" href="http://www.google.com" title="goog">link</a>

Here title is an attribute (it shows a tooltip with "goog"), but once you change it on the created dom you change a 'property'.

window.addEventListener("DOMContentLoaded", function() {
     let elm = document.getElementById("linkid");
     elm.title = "anders"
 }, false);

In angular you can bind a property by enclosing it in [] so the above function could also be done in the html with :

<div *ngFor="let product of products">

<a id="linkid" href="http://www.google.com" [title]="product.name + ' details'">{{product.name}}</a>

</div>

In this angular construct, a component called product-list has a list of products as it's member :

export const products = [
{
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
},
{
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
},
{
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

@Component({
   selector: 'app-product-list',
   templateUrl: './product-list.component.html',
   styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
   products = products;

   // used later on ;)
   share() {
      window.alert('The product has been shared!');
   }
}

The html code is in product-list.component.html. let product of products loops over the products which the while html code can access. Each of the product's can be access by using Interpolation : bash title="changetitle" linenums="1"} in the html code or without bash title="changetitle" linenums="1"} in the property binding format. [title] = product.name

event binding ()

Similarly event binding uses () and binds a method of the enclosing component to an element.

<button (click)="share()">
   Share
</button>

The share function was already added to the .ts code above.

components

The components are areas of the interface dedicated to a particular task. The whole app-root is a component itself.