Angular: T4- CommonModule

¿Qué es CommonModule?

El CommonModule es uno de los módulos más utilizados en Angular. Proporciona muchas de las directivas comunes necesarias para construir una aplicación Angular, como ngIf, ngFor, ngClass, NgModule, etc.

Directivas Estructurales

1. *ngIf: Condicionalmente incluye una plantilla en el DOM.
2. *ngFor: Repite una plantilla para cada elemento de una colección.
3. *ngSwitch, *ngSwitchCase, *ngSwitchDefault: Condicionalmente incluye una plantilla basada en una expresión de cambio.

 // ejemplo-uno.component.ts
import { Component } from '@angular/core';
// Importando la Directiva CommonModule para hacer uso del ngIf, ngFor, y ngClass,...
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-ejemplo-uno',
  standalone: true,
  // Declarando el mudulo importado
  imports: [CommonModule, ],
  templateUrl: './ejemplo-uno.component.html',
  styleUrl: './ejemplo-uno.component.css'
})

export class EjemploUnoComponent {
 // *ngIF
  isLoggedIn = false;
  toggleLogin() {
    this.isLoggedIn = !this.isLoggedIn;
  }

  // *ngFor
  items = ['Item 1', 'Item 2', 'Item 3'];
	
    // ng-switch
  viewMode = 'map';
  changeView(mode: string) {
    this.viewMode = mode;
  }

 <!-- ejemplo-uno.component.html -->
<h1>Directiva Estructural:</h1>

<br>

<h4>Directiva Estructural: *ngIf</h4>

    <div *ngIf="isLoggedIn">Welcome, user!</div>

    <button (click)="toggleLogin()">Toggle Login</button>

<br><br>


<h4>Directiva Estructural: *ngFor</h4>

    <ul>
    <li *ngFor="let item of items">{{ item }}</li>

    </ul>
<br>

<h3>Directiva Estructural: ng-switch</h3>

    <div [ngSwitch]="viewMode">

    <ng-template ngSwitchCase="map">Map View</ng-template>

    <ng-template ngSwitchCase="list">List View</ng-template>

    <ng-template ngSwitchDefault>Other View</ng-template>

    </div>

    <button (click)="changeView('map')">Map</button>

    <button (click)="changeView('list')">List</button>

    <button (click)="changeView('other')">Other</button>

Directivas Atributo

1. ngClass: Añade y elimina clases CSS.
2. ngStyle: Añade y elimina estilos CSS.
3. ngModel: Enlaza una propiedad de un elemento de formulario a una propiedad de datos.

NgModule: Exporta todo lo básico de las directives y pipes de Angular: NgIf, NgForOf, DecimalPipe, reexportado por BrowserModule, que se incluye automáticamente en la raíz AppModule cuando creas una nueva aplicación new.   

 

 // ejemplo-uno.component.ts
import { Component } from '@angular/core';
// Importando la Directiva CommonModule para hacer uso del ngIf, ngFor, y ngClass, ngStyle,...
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-ejemplo-uno',
  standalone: true,
  // Declarando el mudulo importado
  imports: [CommonModule, ],
  templateUrl: './ejemplo-uno.component.html',
  styleUrl: './ejemplo-uno.component.css'
})

export class EjemploUnoComponent {
  // ngClass
  isActive = false;
  isDisabled = false;
  toggleActive() {
    this.isActive = !this.isActive;
  }
  toggleDisabled() {
    this.isDisabled = !this.isDisabled;
  }

  // ngStyle
  textColor = 'blue';
  fontSize = 14;
  changeStyle() {
    this.textColor = this.textColor === 'blue' ? 'red' : 'blue';
    this.fontSize = this.fontSize === 14 ? 20 : 14;
  }
  
  // ng-model
  name = '';
}

 <!-- ejemplo-uno.component.html -->
<h2>Directiva Atributo: </h2>

<br>

<h4>Directiva Atributo: ngClass</h4>

    <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Content</div>

    <button (click)="toggleActive()">Toggle Active</button>

    <button (click)="toggleDisabled()">Toggle Disabled</button>

<br>
<h4>Directiva Atributo: ngStyle</h4>

    <div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">Styled Content</div>

    <button (click)="changeStyle()">Change Style</button>
    
<h3>Directiva Atributo:  ng-model </h3>

    <input [(ngModel)]="name" placeholder="Enter your name">

    <p>Hello, {{ name }}!</p>

....

 API=   class CommonModule {}

// Generando componentes en carpeta Pipes
ng g c modulo-comun/pipes    

Módulos de uso frecuente

Una aplicación Angular necesita al menos un módulo que sirva como módulo raíz. A medida que agrega funciones a su aplicación, puede agregarlas en módulos. Los siguientes son módulos Angular de uso frecuente con ejemplos de algunas de las cosas que contienen:

NgModule	Import it from	¿Por qué lo usas?
BrowserModule	@angular/platform-browser	Para ejecutar su aplicación en un navegador.
CommonModule	@angular/common	To use NgIf and NgFor.
FormsModule	@angular/forms	Para crear (build) formularios basados en template o plantillas (incluye NgModel).
ReactiveFormsModule	@angular/forms	To build reactive forms.
RouterModule	@angular/router	To use RouterLink, .forRoot(), and .forChild().
HttpClientModule	@angular/common/http	Comunicarse con un servidor mediante el protocolo HTTP.

Módulos importadores

Las importaciones en la parte superior de la matriz son estados de importación de JavaScript, mientras que el imports matriz dentro @Component es específica angular.

 // app.component.ts
import { Component } from '@angular/core';
/* Importando y Agregando módulos de Angular */
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  /* agregue módulos aquí para que Angular sepa usar cómolos */
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'practica3';
}

Cuando utilice estos módulos Angular, importarlos enAppModule, o su módulo de características según corresponda, y enumerlos en el@NgModule importsarray.

Por ejemplo, en una nueva aplicación generada por la CLI angular, BrowserModulese importa en el AppModule. Las importaciones en la parte superior de la matriz son estados de importación de JavaScript, mientras que el imports matriz dentro @NgModulees específica angular.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    /* agregue módulos aquí para que Angular sepa usar cómolos */
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 mmmm

mm