Angular includes 2 (or 3) long-awaited features:
Stricly Typed Reactive Forms
andStandalone Components
, as well as several minor likenew Diagnostics framework
, which provides improved feedback on template errors and best practices.
- Standalone components allow us to create
simpler applications
in afaster way
- Simplifying Angular with Standalone Components: Reducing the need for NgModules
- The built-in Angular directives and pipes offered by CommonModule: NgIf, NgFor, DatePipe, DecimalPipe, AsyncPipe, etc. are now available as standalone! we can import individually
- Angular 14 introduces an alternative way to write applications: Standalone components, directives, and pipes.
- The term “standalone” refers to components, directives, or pipes that can be used independently of NgModule.
With standalone components, directives and pipes, the
standalone: true
flag allows you to add imports directly in your @Component() without an @NgModule().
Standalone components allow us to create
simpler applications
in afaster way
Simplifying Angular with Standalone Components: Reducing the need for NgModules
is a long-standing community request that can be dated to the release of Angular With Angular 14, the FormGroup, formControl, and related classes include type definitions enabling TypeScript to catch many common errors.
const login = new FormGroup({
email: new FormControl(''),
password: new FormControl(''),
});
console.log(login.value.notanemail);
A14 It includes 2 (or 3) long-awaited features:
Stricly Typed Reactive Forms
and Standalone Components
, as well as several minor like new Diagnostics framework
, which provides improved feedback on template errors and best practices.
@Component({
selector: 'app-sample-component',
// standalone component
standalone: true,
template: '',
// imports
imports: [ ComponentOne, ComponentTwo, SampleDirective, SampleService, CommonModule ],
})
export class SampleComponent {
...
}
- Catch the invalid “Banana in a box” error on your two-way data bindings
- Catch nullish coalescing on non-nullable values
- Tree-shakeable error messages
// eg
ng completion
ng analytics
ng analytics enable
ng analytics info
ng cache enable
ng cache info
- CDK Menu
- CDK Dialog
etc.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
ng serve -o --poll=2000
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
Read: # Angular 14. Testing Stand Alone Components. Part II