realtomaszkula

@NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [ValidationBorderDirective],
  exports: [ValidationBorderDirective]
})
export class ValidationBorderModule {
  static forRoot(config: ValidationBorderConfig): ModuleWithProviders {
    return {
      ngModule: ValidationBorderModule,
      providers: [{ provide: VALIDATION_BORDER_CONFIG, useValue: config }]

realtomaszkula

export interface ValidationBorderConfig {
  borderWidth: string;
  borderStyle: string;
  colors: {
    VALID: string;
    INVALID: string;
    PENDING: string;
    DISABLED: string;
  };
}

realtomaszkula

@Component({
  selector: 'app-template-forms-example',
  template: `
  <input  [(ngModel)]="value" required appValidationBorder>
  `
})
export class TemplateFormsExampleComponent {
  value = '';
}

realtomaszkula

@Component({
  selector: 'app-reactive-forms-example',
  template: `
  <input [formControl]="formControl" appValidationBorder>
  `,
})
export class ReactiveFormsExampleComponent {
  formControl = new FormControl('', Validators.required);
}

realtomaszkula

@HostBinding('style.border-style')
get borderStyleCss() {
  return this.showBorder ? this.borderStyle : null;
}

@HostBinding('style.border-width')
get borderWidthCss() {
  return this.showBorder ? this.borderWidth : null;
}

realtomaszkula

@Directive({
  selector: '[appValidationBorder]'
})
export class ValidationBorderDirective {
   private readonly colors: {
    VALID: string;
    INVALID: string;
    PENDING: string;
    DISABLED: string;
  };

realtomaszkula

<app-bordered-box [borderWidth]="16"></app-bordered-box>
<app-bordered-box borderWidth="16px"></app-bordered-box>
<app-bordered-box borderWidth="1em"></app-bordered-box>
<app-bordered-box borderWidth="1rem"></app-bordered-box>

realtomaszkula

@Component({
  selector: 'app-bordered-box',
  template: `<ng-content></ng-content>`,
  styles: [`
      :host {
        border: 1px solid black;
      }
    `]
})
export class BorderedBoxComponent {

realtomaszkula

<app-welcome names="Robert"></app-welcome>
<app-welcome [names]="['Robert', 'John']"></app-welcome>

realtomaszkula

@Component({
  selector: 'app-welcome',
  template: `
  <div *ngFor="let name of names">
    Welcome {{ name }}!
  </div>
  `
})
export class WelcomeComponent {
  private _names: string[];