Creando la Directiva

Clase 18 de 23 • Curso de Angular: Unit Testing para Componentes

Juan Manuel Galindo Casillas

student•

En lugar de usar el onChanges, se puede ocupar un set en el Input

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[highligth]'
})
export class HighligthDirective {

  public defaultColor = 'gray';
  @Input('highligth') set bgColor(bgColor: string) {
    this.element.nativeElement.style.backgroundColor = bgColor || this.defaultColor;
  };

  constructor(
    private element: ElementRef
  ) {
    this.element.nativeElement.style.backgroundColor = this.defaultColor;
  }
}

Cesar Elías Armendariz Ruano

student•

Se va a hacer pruebas a las directivas

lo primero es crear la directiva

creamos un componente para hacer funcionar como routing

ng g c components/others

y creamos la directiva

ng g d directives/highligth

insertamos el componente others en nuestro app-routing.module.ts y en nuestro app.component.html

app-routing.module.ts

import { ProductsComponent } from './components/products/products.component';
import { PicoPreviewComponent } from './components/pico-preview/pico-preview.component';
import { PeopleComponent } from './components/people/people.component';
import { OthersComponent } from './components/others/others.component';

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent
  },
  {
    path: 'pico-preview',
    component: PicoPreviewComponent
  },
  {
    path: 'people',
    component: PeopleComponent
  },
  {
    path: 'others',
    component: OthersComponent
  }
];

app.component.html

<header class="container">
  <h2>Angular Testing</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae illum saepe odio suscipit id sapiente consequuntur, ipsa laboriosam eius debitis quidem nisi quos veritatis eum soluta adipisci repellat commodi. Esse.</p>
  <nav>
    <ul>
      <li><a routerLink="/">Home</a></li>
      <li><a routerLink="/people">People</a></li>
      <li><a routerLink="/products">Products</a></li>
      <li><a routerLink="/others">others</a></li>
      <li><a routerLink="/pico-preview">Pico Preview</a></li>
    </ul>
  </nav>
</header>
<router-outlet></router-outlet>

finalmente incorporamos FormsModule en nuestro app.module.ts

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

NgModule({
  imports: [
    FormsModule
  ],

ahora en la directiva inicializamos los cambios al dom con js

highlighth.directive.ts

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[highligth]'
})

export class HighligthDirective implements OnChanges{
  defaultColor = 'gray';
  @Input('highligth') bgColor = '';

  constructor(
    private element: ElementRef
  ) {
    this.element.nativeElement.style.backgroundColor = this.defaultColor;
  }

  ngOnChanges(): void {
    this.element.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
  }
}

ahora podemos implementarla en nuestro componente others

others.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-others',
  templateUrl: './others.component.html',
  styleUrls: ['./others.component.scss']
})

export class OthersComponent implements OnInit {
  color = 'blue';
  constructor() { }

  ngOnInit(): void {
  }
}

others.component.html

<section class="container">
  <h4>Directiva</h4>
  <h5 highligth>Hay un valor default</h6>
  <h5 highligth="yellow">Hay un valor</h6>
  <input [(ngModel)]="color" type="text" [highligth]="color">
</section>