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', ...