Angular

Directivas: se usa para manipular el DOM, existes

tres tipos:
Directivas de componentes:
ng generate directive
Directivas estructurales:
*ngIf
*ngSwitch
*ngFor
Directivas de atributos:
*ngClass
*ngStyle

Instructor: Marcelo Moscoso 1

<laboratorio/>
angular-proyecto-base
ng g m directivas --routing

CREATE src/app/directivas/directivas-routing.module.ts (253 bytes)

CREATE src/app/directivas/directivas.module.ts (296 bytes)

ng g c directivas/principal

CREATE src/app/directivas/principal/principal.component.css (0 bytes)

CREATE src/app/directivas/principal/principal.component.html (24 bytes)

CREATE src/app/directivas/principal/principal.component.spec.ts (620 bytes)

CREATE src/app/directivas/principal/principal.component.ts (287 bytes)

UPDATE src/app/directivas/directivas.module.ts (392 bytes)

ng g c componentes/nav-bar

CREATE src/app/componentes/nav-bar/nav-bar.component.css (0 bytes)

CREATE src/app/componentes/nav-bar/nav-bar.component.html (22 bytes)

CREATE src/app/componentes/nav-bar/nav-bar.component.spec.ts (600 bytes)

CREATE src/app/componentes/nav-bar/nav-bar.component.ts (278 bytes)

UPDATE src/app/app.module.ts (583 bytes)

2
 Angular

ng generate directive directivas/resaltador-amarillo

CREATE src/app/directivas/resaltador-amarillo.directive.spec.ts (273 bytes)

CREATE src/app/directivas/resaltador-amarillo.directive.ts (165 bytes)

UPDATE src/app/directivas/directivas.module.ts (504 bytes)

Instructor: Marcelo Moscoso 3

/src/app/directivas/directivas-routing.module.ts

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';
import { PrincipalComponent } from './principal/principal.component';

const routes: Routes = [

{
path:'principal',
component:PrincipalComponent
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DirectivasRoutingModule { }

4
 Angular

/src/app/app-routing.module.ts

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';
import { InicioComponent } from './componentes/inicio/inicio.component';

const routes: Routes = [

{
path:'inicio',
component : InicioComponent
},
{
path:'input-output',
loadChildren: () => import('./input-output/input-output.module')
.then(m => m.InputOutputModule)
},
{
path:'directivas',
loadChildren: () => import('./directivas/directivas.module')
.then(m=>m.DirectivasModule)
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Instructor: Marcelo Moscoso 5

/src/app/componentes/nav-bar/nav-bar.component.html

<div class="w3-bar w3-indigo">

<div class="w3-bar-item">
<span class="w3-opacity" style="text-shadow:1px 1px 0 #444">Angular Avanzado</span>
</div>
<div>
<a routerLink="/inicio" class="w3-bar-item w3-button">Inicio</a>
</div>
<div class="w3-dropdown-hover">
<button class="w3-button">Modulos</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a routerLink="/input-output/padre" class="w3-bar-item w3-button">
Input-Output</a>
<a routerLink="/directivas/principal"
class="w3-bar-item w3-button">Directivas</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>

6
 Angular

/src/app/directivas/resaltador-amarillo.directive.ts

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

@Directive({
selector: '[resaltadorAmarillo]'
})
export class ResaltadorAmarilloDirective {

constructor(private el: ElementRef) { }

//constructor(private el: ElementRef) {

// this.el.nativeElement.style.backgroundColor = 'yellow';
//}

@HostListener('mouseenter') onMouseEnter() {
this.resaltador('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
this.resaltador('');
}

private resaltador(color: string) {

this.el.nativeElement.style.backgroundColor = color;
}

Instructor: Marcelo Moscoso 7

/src/app/directivas/principal/principal.component.ts

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

@Component({
selector: 'app-principal',
templateUrl: './principal.component.html',
styleUrls: ['./principal.component.css']
})
export class PrincipalComponent implements OnInit {

tab_active = 0;

cursos: Curso[];

constructor() {
this.cursos = [
{nombre:"Angular",nivel:"Basico",descripcion:'Framework'},
{nombre:"VueJs",nivel:"Basico",descripcion:'Library'},
{nombre:"ReadJs",nivel:"Intermedio",descripcion:'Framework'},
{nombre:"Flutter",nivel:"Basico",descripcion:'Framewrok'},
{nombre:"Python",nivel:"Avanzado",descripcion:'Lenguaje'},
];
}

ngOnInit(): void {
}

interface Curso{
nombre : string;
nivel : string;
descripcion : string;
}

8
 Angular

/src/app/directivas/principal/principal.component.html

<h3>Directivas</h3>
<div class="w3-row">
<div class="w3-col s12 m12 l12">
<div class="w3-bar w3-light-grey">
<button class="w3-button w3-bar-item"
[ngClass] = "{'w3-dark-grey': tab_active == 0}"
(click)="tab_active=0" >Directiva de Componentes</button>
<button class="w3-button w3-bar-item"
[ngClass] = "{'w3-dark-grey': tab_active == 1}"
(click)="tab_active=1">Directivas estructurales</button>
<button class="w3-button w3-bar-item"
[ngClass] = "{'w3-dark-grey': tab_active == 2}"
(click)="tab_active=2">Directivas de Atributo</button>
</div>
<div class="w3-container w3-border w3-light-grey"
[ngStyle]="{'display': tab_active == 0 ? 'block': 'none'}">
<h4>contenidos de componentes : <b resaltadorAmarillo>ng generate directive
directivas/resaltador-amarillo</b> </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis
dolorum vitae facilis aliquam sed possimus magni quis sequi deserunt veritatis animi
omnis, nihil nemo quaerat optio aut dicta accusamus cumque.</p>
<p resaltadorAmarillo>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Similique deserunt, velit porro minima vitae ratione aut voluptatem, praesentium ut
magnam quia exercitationem, provident nostrum ad unde animi id harum facere!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum autem
corporis quisquam delectus. Illo earum necessitatibus animi laborum soluta voluptatum
dolorem possimus voluptate recusandae enim aut ratione, labore tenetur voluptates?</p>

</div>
<div class="w3-container w3-border w3-light-grey"
[ngStyle]="{'display': tab_active == 1 ? 'block': 'none'}">
<p>contenido de estructurales</p>
<ul class="w3-ul">
<li *ngFor="let curso of cursos">
{{curso.nombre}} - {{curso.nivel}}
<p *ngIf="curso.nivel=='Avanzado';else verinfo
">{{curso.descripcion}}</p>
<ng-template #verinfo>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum sit voluptates laudantium perferendis, consequatur ad rerum cum omnis
molestiae facilis, porro earum provident aperiam perspiciatis fuga non minima iusto
deserunt!</p>
</ng-template>
</li>
</ul>
</div>

Instructor: Marcelo Moscoso 9

 <div class="w3-container w3-border w3-light-grey"
[ngStyle]="{'display': tab_active == 2 ? 'block': 'none'}">
<p>contenido de atributos</p>

<ul class="w3-ul">
<li *ngFor="let curso of cursos"
[ngClass] ="{'w3-pale-red':curso.nivel == 'Basico',
'w3-pale-blue':curso.nivel == 'Intermedio',
' w3-pale-red':curso.nivel == 'Avanzado'
}"
>
{{curso.nombre}} - {{curso.nivel}}
</li>
</ul>

</div>
</div>
</div>

10