Standalone components in Angular
In this lesson, we’ll take a closer look at standalone components (and other entities such as pipes and directives) in Angular.
The standalone approach is one of the key global changes in the architecture of Angular applications. Standalone components eliminate the need for modules in your app — now all entities (pipes, directives, etc.) can be imported directly into a component.
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 Comments