Page 59 - MSDN Magazine, July 2017

Event binding binds a particular action to an HTML element and designates the action upon this event happening. Figure 5 shows an example of event binding where a (click) event calls handleButtonClick.
*ngIf lets you display content conditionally:
@Component({ template: `
<p *ngIf="product.name === 'Computer ABC'">Computer name is "Computer ABC"</p> <p *ngIf="product.name === 'Computer XYZ'">Computer name is "Computer XYZ"</p>
Figure 7, | async is used. This pipe is useful when handling data from an Observable. Products is an Observable, and you don’t have to call subscribe on getProducts because that’s handled by Angular.
Communication between parent components and child com- ponents is interesting in Angular. To help ease that burden, Angular provides @Input and @Output decorators.
@Output decorator provides the opportunity to emit events up a level to the parent, as shown in Figure 8.
Likewise, @Input decorators are used to populate a child com- ponent from a parent component, as shown in Figure 9.
Communication between parent components and
child components is interesting in Angular.
If a more robust notification is needed, you can build an inter- nal notification system where other components can subscribe to Observables defined by this internal system.
Other IDEs
Angular completely separated from the Visual Studio build process is advantageous because the code itself can be pulled out and used in other editors such as WebStorm (bit.ly/2oxkUeX) and Sublime (bit.ly/1SuiMgd).
Figure 8 Example of @Output Decorator
` })
export class ProductComponent { product: Product = new Product("Computer ABC"); }
*ngFor provides you the ability to look over an array of objects, as shown in Figure 6.
Pipes take your data and manipulates it. Some Angular pipes are | date, | currency, | uppercase. Custom pipes can be created, too. In
Figure 5 Example of Event Binding
@Component({ template: `
<div class="row">
<div class="col-md-12 form-group">
<label>Product Name:</label>
<span class="form-control-static">{{product.name}}</span> </div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary"
(click)="handleButtonClick();">Click Me</button> </div>
</div> `
})
export class ProductComponent {
product: Product = new Product("Computer ABC");
handleButtonClick(): void { this.product.name = "Comptuer XYZ"; } }
@Component({ template: `
<div class="row">
<div class="col-md-12 form-group">
<label>Button Action:</label>
<span class="form-control-static">{{buttonAction}}</span> </div>
</div>
<buttons (buttonClicked)="handleButtonClicked($event)"></buttons> `
})
export class ProductsComponent {
buttonAction: string = "No Button Pressed"; handleButtonClicked(actionTaken: string): void { this.buttonAction =
actionTaken; } }
@Component({ selector: 'buttons', template: `
<div class="row">
<div class="col-md-12 form-group">
<button type="button" class="btn btn-primary" (click)="save()">Save</button>
<button type="button" class="btn btn-default" (click)="remove()">Remove</button>
</div> </div>
` })
export class ButtonsComponent {
@Output() buttonClicked = new EventEmitter();
save() { this.buttonClicked.emit('Save Clicked'); } remove() { this.buttonClicked.emit('Delete Clicked'); }
}
Figure 6 Example of *ngFor
@Component({ template: `
<div class="row" *ngFor="let product of products; let i = index;"> <div class="col-md-12 form-group">
<label>Product Name:</label>
<span class="form-control-static">{{product.name}}
with Index: {{i}}</span> </div>
</div> `
})
export class ProductsComponent {
products: Product[] = [new Product("Computer ABC"), new Product("Computer XYX") ];
}
Figure 7 Example of | async
@Component({ template: `
<div class="row" *ngFor="let product of products | async; let i = index;"> <div class="col-md-12 form-group">
<label>Product Name:</label>
<span class="form-control-static">{{product.name}} with Index: {{i}}</span> </div>
</div> `
})
export class ProductsComponent implements OnInit {
products: Observable<Product[]>;
constructor(private productService: ProductService) { } ngOnInit() { this.products = this.productService.getProducts(); }
}
msdnmagazine.com
July 2017 53