Standalone компоненты в Angular
В этом уроке мы подробнее поговорим о Standalone компонентах (и других сущностях: пайпах и директивах) в Angular.
Подход standalone компонентов — одно из ключевых глобальных изменений в архитектуре Angular приложений. Standalone компоненты делают ненужным использование модулей в приложении: теперь все сущности (пайпы, директивы и пр) можно импортировать прямо в компонент.
app.component
import { Component } from '@angular/core';
import {NgIf, UpperCasePipe} from '@angular/common';
import {CustomUppercasePipe} from './pipes/custom-uppercase-pipe';
@Component({
selector: 'app-root',
imports: [
NgIf,
CustomUppercasePipe
],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
protected name = '';
protected age = 17;
}
app.component.html
{{name | customUppercase}}
<ng-container *ngIf="age >= 18">
You can visit our app
</ng-container>
<!--<router-outlet />-->
custop uppercase pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customUppercase'
})
export class CustomUppercasePipe implements PipeTransform {
transform(value: string): string {
if(!value) {
return 'empty string';
}
return value.toUpperCase();
}
}
0 Комментариев