temporal

extension vscode

  • angular language service

  • alphine js intellisense

  • mostrar y ocultar un elemento, OpenAlert es una variable booleana que se exporta, y mensaje es un ng-template con un nombre mensaje

<div *ngIf="OpenAlerta"></div>

<div *ngIf="OpenAlerta; else mensaje"></div>

<ng-template #mensaje> mensaje </ng-template>
  • images es una lista, nsrc es la variable que toma todas las imagenes una por una, en la clase typescript se importo NgFor, para que funcione. Y index hace referencia al index de la iteracion
<ul>
  <li *ngFor="let nsrc of images; let i=index">
    <img [src]="nsrc" alt="img" />
    <p>{{i+1}}</p>
  </li>
</ul>
  • para un Switch, se importa las todas las clases necesarias , dia es un valor numerico
<div [ngSwitch]="dia">
  <button *ngSwitchCase="1" class="btn">Lunes</button>
  <button *ngSwitchCase="2" class="btn">Martes</button>
  <button *ngSwitchCase="3" class="btn">miercoles</button>
  <button *ngSwitchCase="4" class="btn">jueves</button>
  <button *ngSwitchCase="5" class="btn">viernes</button>
  <button *ngSwitchCase="6" class="btn">Sabado</button>
  <button *ngSwitchDefault class="btn">no hay dia para estos</button>
</div>
  • ngModel hace que se actualize la variable texto con lo que se ingresa en el input, y se esta llamando como placeholder en el otro input, es decir estan sincronizados
<div class="card">
  <div class="card-body">
    <div class="mb-2">
      <label class="form-lable"> Nombre: </label>
      <input type="text" placeholder="ingrese nombre" [(ngModel)]="texto" />
    </div>
    <div class="mb-2">
      <label class="form-lable"> pass: </label>
      <input type="text" name="pass" [placeholder]="texto" />
    </div>
  </div>
</div>
  • formulario basado en plantillas con NgModel, el boton submit solo funciona con ngSubmit, las validaciones se hacen mediante el estado de inputs, es obligatorio que presente un nombre
<div class="card">
  <div class="card-body">
    <form (ngSubmit)="procesar()">
      <div class="mb-2">
        <label class="form-lable"> Nombre: </label>
        <input
          name="nombre"
          #nombreI="ngModel"
          type="text"
          placeholder="ingrese nombre"
          [(ngModel)]="texto"
          required
        />
        <div class="alert alert-danger mt-2" [hidden]="nombreI.valid">
          el nombre es obligatorio
        </div>
      </div>
      <div class="mb-2">
        <label class="form-lable"> pass: </label>
        <input type="text" name="pass" [placeholder]="texto" />
      </div>

      <div>
        <button
          class="btn btn-danger"
          type="submit"
          [disabled]="nombreI.invalid"
        >
          save
        </button>
      </div>
    </form>
  </div>
</div>
  • formulario reactivos: modulo formcontrol, reactiveFormModule,
import { Component } from "@angular/core";
import {
  FormControl,
  FormGroup,
  Validators,
  FormBuilder,
} from "@angular/forms";
import { ReactiveFormsModule } from "@angular/forms";
import { NgIf, JsonPipe } from "@angular/common";

@Component({
  selector: "app-formulario1",
  standalone: true,
  imports: [ReactiveFormsModule, NgIf, JsonPipe],
  templateUrl: "./formulario1.component.html",
  styleUrls: ["./formulario1.component.css"],
})
export class Formulario1Component {
  formUser: FormGroup;

  constructor(private fb: FormBuilder) {
    this.formUser = this.fb.group({
      user: ["", [Validators.required, Validators.email]], // Cambiado a "user"
      clave: ["", Validators.required],
    });
  }

  get user() {
    return this.formUser.get("user") as FormControl;
  }

  get clave() {
    return this.formUser.get("clave") as FormControl;
  }

  save() {
    if (this.formUser.valid) {
      console.log("User:", this.user.value);
      console.log("Clave:", this.clave.value);
    } else {
      console.log("Formulario inválido");
    }
  }
}

<div class="card">
  <div class="card-body">
    <form [formGroup]="formUser" (ngSubmit)="save()">
      <div class="mb-2">
        <label class="form-label"> Nombre: </label>
        <input
          class="form-control"
          type="text"
          formControlName="user"
          placeholder="ingrese nombre"
        />

        <div class="alert alert-danger" [hidden]="user.valid || user.pristine">
          <span *ngIf="user.errors?.['required']">el email es obligatoria</span>
          <span *ngIf="user.errors?.['email']">el email no es valido</span>
        </div>
      </div>
      <div class="mb-2">
        <label class="form-label"> Pass: </label>
        <input
          type="text"
          class="form-control"
          formControlName="clave"
          placeholder="enter pass"
        />
      </div>

      <div>
        <button
          type="button"
          class="btn btn-danger"
          [disabled]="formUser.invalid"
        >
          Save
        </button>
      </div>
    </form>
  </div>
</div>
  • comunicacion entre componentes (padre - hijo)
<--! en el componente padre se puede enviar parametros al componente hijo -->
<app-son-c [mensaje]="'mensaje desde el componente ' + nombre"></app-son-c>

// importar Input para resibir en la variable mensaje
 @Input() mensaje?: string;
  • ngClass: cambia el estilo del boton cuando la variable user es admin
<button type="submit" [ngClass]="{ btnA: user === 'admin' }">login</button>

.btnA {
  background-color: red;
  color: white;
}
  • ngStyle
<div [ngStyle]="setStyles()">
  This text changes color and size dynamically based on a function!
</div>

<button (click)="isActive = !isActive" type="submit">login</button>

isActive: boolean = true;

setStyles() {
    return {
        'color': this.isActive ? 'green' : 'black',
        'font-size': this.isActive ? '24px' : '16px',
        'font-weight': this.isActive ? 'bold' : 'normal',
    };
}

toogleStyle() {
 this.isActive = !this.isActive;
}
  • input select
<div>
  <p>¡Elige tu tema favorito!</p>
  <select [(ngModel)]="tema">
    <option value="" disabled>Selecciona un tema</option>
    <option value="musica">Música</option>
    <option value="teatro">Teatro</option>
    <option value="peliculas">Películas</option>
    <option value="cocina">Cocina</option>
  </select>

  <p>Tema seleccionado: {{ tema }}</p>
</div>
  • routing
constructor(private router: Router) {}
onLogin() {
    this.router.navigate(['/dashboard']);
}
goToForgotPassword() {
    this.router.navigate(['/forgot-password']);
}

<form (ngSubmit)="onLogin()">
  <label for="user">Usuario</label>
  <input type="text" id="user" [(ngModel)]="user" name="user" required />
  <br />

  <label for="pass">Contraseña</label>
  <input type="password" id="pass" [(ngModel)]="pass" name="pass" required />
  <br />

  <button type="submit">Login</button>
  `<span (click)="goToForgotPassword()" style="color: blue; cursor: pointer;"
    >Olvidó su contraseña?</span
  >`
</form>

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";
import { NotFoundComponent } from "./not-found/not-found.component";

const routes: Routes = [
  { path: "", component: HomeComponent }, // Default route
  { path: "about", component: AboutComponent },
  { path: "**", component: NotFoundComponent }, // Wildcard route for 404
];

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