Writing Reusable Angular code
Consider we have 2 (or more) components that have the same look and feel but technically have a totally different purpose. We end up creating 2 different components for this with a lot of repeated code. Example: Our application's UI elements use the following: 2 types of color: primary, secondary 2 types of appearances: solid, stroked Solid Chip Stroked Chip Stroked Button Solid Button We have 2 types of components here: CustomButtonComponent ChipComponent Both of these components could have the same code that takes the color and appearance as the Input() to assign the appropriate class to it instead of doing this for each of the component, we could create a BaseComponent that does this job for us. This could then be inherited by the CustomButtonComponent and ChipComponent base.component.ts import { Directive , HostBinding , Input } from '@angular/core' ; @ Directive () export class BaseComponent { @ Input...