En este artículo vamos a ver qué es CommonModule en Angular 10 y cómo usarlo.
Sintaxis: CommonModule es importado automáticamente por BrowserModule cuando se crea la aplicación.
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [
BrowserModule,
]
})
export class AppModule { }
Directivas importadas:
- Clase Ng
- NgComponentOutlet
- NgForOf
- NgSi
- Caso NgPlural:
- NgEstilo
- NgSwitch
- NgSwitchCase
- NgSwitchPredeterminado
- NgTemplateOutlet
Tuberías Importadas:
- Tubería asíncrona
- MonedaTubo
- tubería de fecha
- tubería decimal
- I18nPluralTubo
- I18nSeleccionarTubería
- JsonPipe
- Canal de valor clave
- Tubería Minúscula
- Porcentaje de tubería
- RebanadaTubo
- TítuloCasePipe
- UpperCasePipe
Acercarse:
- Cree la aplicación Angular que se utilizará
- No hay necesidad de ninguna importación para que se use CommonModule
- En app.module.ts , CommonModule se importa a través de BrowserModule.
- Las tuberías y directivas se importarán automáticamente, por lo que podemos usarlas fácilmente.
- Cree los archivos necesarios para la salida deseada.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Ejemplo 1:
app.module.ts
import { NgModule } from '@angular/core';
// BrowserModule automatically imports all CommonModule Dependencies
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
// Adding Imports
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
geek = "GeekClass";
g = document.getElementsByClassName(this.geek);
}
app.component.html
<!-- use of ngClass directive -->
<h1 [ngClass] = "geek">
GeeksforGeeks
</h1>
Upper Heading's class is : "{{ g[0].className }}"
Producción:
