To conclude our quick architectural overview, we will create a directive to enhance our rather fade pre-markup. Directives are interacting with a template and with their parent component regarding property and event bindings. We will create a directive that adds style to our pre-markup. The style involves a 1 px border and changes the background color to red or yellow for an even or odd Floyd array, respectively.

First, we need a way to ask the user which kind of array he/she wants. Let's add another input in the template of the FloydComponent and modify the onClick method so it accepts a second argument:

import { Component } from '@angular/core'; import { TriangleService } from '../triangle.service'; @Component({  selector: 'floyd', ...

Get Angular Design Patterns now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.