Angular Common Features

Common features of Angular’s template syntax, the source code for the below is available at https://github.com/carlpaton/angular.io-start and was built using https://angular.io/start

ngFor

1
2
3
4
product-list.component.html

<div *ngFor="let product of products">
</div>
1
2
3
4
5
6
7
8
9
10
11
product-list.component.ts

import { products } from '../products';
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = products;
}
1
2
3
4
5
6
7
export const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  }
];

ngIf, Interpolation { { } }

1
2
3
4
5
product-list.component.html
  
<p *ngIf="product.description">
	Description: {{ product.description }}
</p>

Property binding [ ]

1
2
3
4
5
<h3>
    <a [title]="product.name + ' details'">
        {{ product.name }}
    </a>
</h3>

Event binding ( )

1
2
3
4
5
product-list.component.html

<button (click)="share()">
	Share
</button>
1
2
3
4
5
6
7
8
9
10
11
12
product-list.component.ts

@Component({
 ...
})
export class ProductListComponent {
  products = products;

  share() {
    window.alert('The product has been shared hoe!');
  }
}

Input

Here product is created in the ngFor loop and is an input to component app-product-alerts

1
2
3
4
5
6
7
product-list.component.html

<div *ngFor="let product of products">
  <app-product-alerts
    [product]="product"
  </app-product-alerts>  
</div>

A property named product is defined with an @Input decorator

1
2
3
4
5
6
7
8
9
product-alerts.component.ts

import { Input } from '@angular/core';
@Component({
 ...
})
export class ProductAlertsComponent implements OnInit {
  @Input() product;
}

This input can then be used in the html

1
2
3
4
5
product-alerts.component.html

<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>

Output

Emit an event up to the product list component from product-alerts.component

1
2
3
4
5
6
7
product-alerts.component.ts

import { Output, EventEmitter } from '@angular/core';
export class ProductAlertsComponent {
  @Input() product;
  @Output() notify = new EventEmitter();
}

Event binding to call the notify.emit() method

1
2
3
4
5
product-alerts.component.html

<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

Behavior that should happen when the button is clicked (In the parent component product-list.component)

1
2
3
4
5
6
7
product-list.component.ts

export class ProductListComponent {
  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }
}

Update the product list component to receive output from the product alerts component.

1
2
3
4
5
6
product-list.component.html

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>

Reference