Creando la Directiva
Contenido del curso
Componentes
Componentes con dependencias
Directivas
Pipes
Próximos pasos
Creando la Directiva
Contenido del curso
Creando la Directiva
Juan Manuel Galindo Casillas
Estudiante
Cesar Elías Armendariz Ruano
EstudianteEn 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; } }
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>