Что такое CommonModule в Angular 10?
Опубликовано: 24 Августа, 2022
В этой статье мы увидим, что такое CommonModule в Angular 10 и как его использовать.
CommonModule используется для экспорта всех основных директив и каналов Angular. Он повторно экспортируется, когда мы импортируем BrowserModule в наше приложение angular, BrowserModule автоматически импортируется в наше приложение, когда мы создаем наше приложение Angular с помощью команды «ng new».
Синтаксис: CommonModule автоматически импортируется BrowserModule при создании приложения.
import { BrowserModule } from "@angular/platform-browser";
@NgModule({
imports: [
BrowserModule,
]
})
export class AppModule { }Директивы импортированы:
- Нгкласс
- NgComponentOutlet
- Нгфороф
- НгЕсли
- NgPluralCase:
- Нгстиле
- НгСвитч
- NgSwitchCase
- NgSwitchDefault
- NgTemplateOutlet
Трубы импортные:
- Асинкпайп
- ВалютаПайп
- DatePipe
- Десятичная труба
- I18nМножественное числоТруба
- I18nSelectPipe
- JsonPipe
- KeyValuePipe
- нижний регистр
- Процентпайп
- SlicePipe
- НазваниеCasePipe
- UpperCasePipe
Подход:
- Создайте приложение Angular, которое будет использоваться
- Нет необходимости в каком-либо импорте для использования CommonModule.
- В app.module.ts CommonModule импортируется через BrowserModule.
- Трубы и директивы будут импортированы автоматически, поэтому мы можем легко их использовать.
- Создайте необходимые файлы для желаемого результата.
- Служите угловому приложению, используя ng serve, чтобы увидеть результат.
Пример 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 }}" |
Выход:
