EJEMPLO

• Directivas de estructurales: Alteran la estructura del DOM, agregando, eliminando y manipulando los
elementos host a los que están unidos.
o ngIf: evaluar sentencias con un simple If y else
o ngFor: Permite ejecutar bucles, los bucles son los que conocemos en lógica de programación
como: for, while, foreach, etc.
o ngSwitch: esta directiva se pueden crear los diferentes casos que deseamos evaluar
App.component.html App.component.ts
<div> import { CommonModule } from '@angular/common';
<h1>Cliente</h1> import { Component } from '@angular/core';
<p>Nombre cliente:{{nombre}}</p> import { RouterOutlet } from '@angular/router';
<p>Nit:{{nit}}</p>
@if(genero=='mujer') { @Component({
<p>Su descuento es 10%. </p> selector: 'app-root',
} @else { standalone: true,
<p>No tiene descuento.</p> imports: [CommonModule, RouterOutlet],
} templateUrl: './app.component.html',
styleUrl: './app.component.css'
<h1>Listado</h1> })
<table> export class AppComponent {
@for(prenda of prendas; track prenda.codigo) { nombre :string = 'Paredes Candia Martha';
<tr> nit:number = 689777;
<td>{{prenda.codigo}}</td> genero:string = 'mujer';
<td>{{prenda.descripcion}}</td>
<td>{{prenda.precio}}</td> prendas = [{
</tr> codigo: 1,
} descripcion: 'zapato',
</table> precio: 540
<h1>Numero aleatorio entre 1 y 3</h1> },{
@switch (generarNumero()) { codigo: 2,
@case (1) { descripcion: 'botas',
<p>Uno</p> precio: 900
} }];
@case (2) {
<p>Dos</p>
} generarNumero() {
@case (3) { return Math.floor(Math.random() * 3) + 1;
<p>Tres</p> }
} }
}
</div>
<router-outlet />

COMPONENTES
ng new proy5-sin
cd proy5-sin
ng generate component auth/login
ng generate component auth/register

App.component.html App.component.ts
<app-register></app-register> import { Component } from '@angular/core';
<app-login></app-login> import { RouterOutlet } from '@angular/router';
<router-outlet></router-outlet> import { CommonModule } from '@angular/common';
App.routes.ts import { RegisterComponent } from
import { Routes } from "./auth/register/register.component";
'@angular/router'; import { LoginComponent } from './auth/login/login.component';
import {LoginComponent} from
'./auth/login/login.component'; @Component({
import { RegisterComponent } from selector: 'app-root',
'./auth/register/register.component'; standalone: true,
templateUrl: './app.component.html',
export const routes: Routes = [ styleUrl: './app.component.css',
{ imports: [CommonModule, RouterOutlet,
path:'login', RegisterComponent,LoginComponent]
component:LoginComponent })
}, export class AppComponent {
{ title = 'proy5-sin';
path:'register', }
component:RegisterComponent
} Reconoce los 2 componentes
creados
];

Ejemplo
Paso de un valor del app (padre) al componente login (hijo)

login.component.html login.component.ts
<p>PRUEBA login works!</p> import { Component, Input } from '@angular/core';
<button>{{value}}</button>
@Component({
Login.component.css
selector: 'app-login',
button{ standalone: true,
padding: 10px 20px; imports: [],
background-color: #2d77e6; templateUrl: './login.component.html',
color: white; styleUrl: './login.component.css'
border: none; })
border-radius: 5px; export class LoginComponent {
} @Input() value:string='';
}
button:hover {
background-color: #a1a19a; App.component.html
} <app-register nombre="{{nombre}}" email="{{email}}"
ciudad="{{ciudad}}"></app-register>
button:active {
background-color: #771306; <app-login value="{{value1}}"></app-login>
} <app-login value="{{value2}}"></app-login>
<app-login value="{{value3}}"></app-login>

<router-outlet></router-outlet>

register.component.html register.component.ts
<p>register works!</p> import { Component, Input } from '@angular/core';
<table>
<thead> @Component({
<tr> selector: 'app-register',
<th>Nombre</th> standalone: true,
<th>Email</th> imports: [],
 <th>Ciudad</th> templateUrl: './register.component.html',
</tr> styleUrl: './register.component.css'
</thead> })
<tbody> export class RegisterComponent {
<tr> @Input() nombre:string='';
<td>{{nombre}}</td> @Input() email:string='';
<td>{{email}}</td> @Input() ciudad:string='';
<td>{{ciudad}}</td> }
</tr>
</table>

register.component.css
table {
width: 60%; App.component.ts
border: 1px solid #000; import { Component } from '@angular/core';
} import { RouterOutlet } from '@angular/router';
th, td { import { CommonModule } from '@angular/common';
width: 20%; import { RegisterComponent } from
text-align: left; "./auth/register/register.component";
vertical-align: top; import { LoginComponent } from
border: 1px solid #000; './auth/login/login.component';
border-collapse: collapse;
padding: 5px; @Component({
} selector: 'app-root',
th { standalone: true,
background: #afcc0e; templateUrl: './app.component.html',
} styleUrl: './app.component.css',
imports: [CommonModule, RouterOutlet,
RegisterComponent,LoginComponent]
})
export class AppComponent {
//title:string='';
value1:string='Crear';
value2:string='Eliminar';
value3:string='Editar';

nombre:string='Martin';
email:string='[email protected]';
ciudad:string='La Paz';
}