Publisher : V V R Reddy
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe
import { bootstrapApplication } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import { ImageComponent } from './app/image.component';
import { HighlightDirective } from './app/highlight.directive';
@Component({
selector: 'app-root',
standalone: true,
imports: [
ImageComponent, HighlightDirective, // import standalone Components,
Directives and Pipes
CommonModule, MatCardModule // and NgModules
],
template: `
<mat-card *ngIf="url">
<app-image-component [url]="url"></app-image-component>
<h2 app-highlight>{{name | titlecase}}</h2>
</mat-card>
`
})
export class ExampleStandaloneComponent {
name = "emma";
url = "www.emma.org/image";
}
// Bootstrap a new Angular application using our `ExampleStandaloneComponent`
as a root component.
bootstrapApplication(ExampleStandaloneComponent);
@Component()
without an @NgModule()
.const cat = new FormGroup({
name: new FormGroup({
first: new FormControl('Barb'),
last: new FormControl('Smith'),
}),
lives: new FormControl(9),
});
// Type-checking for forms values!
// TS Error: Property 'substring' does not exist on type 'number'.
let remainingLives = cat.value.lives.substring(1);
// Optional and required controls are enforced!
// TS Error: No overload matches this call.
cat.removeControl('lives');
// FormGroups are aware of their child controls.
// name.middle is never on cat
let catMiddleName = cat.get('name.middle');​
Update schematics allows for incremental migration to typed forms, so you can gradually add typing to your existing forms with full backwards compatibility. ng update
will replace all form classes with untyped versions (for example, FormGroup -> UntypedFormGroup
). You can then enable types at your own pace (for example, UntypedFormGroup -> FormGroup
).
// v13 untyped form
const cat = new FormGroup({
name: new FormGroup(
first: new FormControl('Barb'),
last: new FormControl('Smith'),
),
lives: new FormControl(9)
});
// v14 untyped form after running `ng update`
const cat = new UntypedFormGroup({
name: new UntypedFormGroup(
first: new UntypedFormControl('Barb'),
last: new UntypedFormControl('Smith'),
),
lives: new UntypedFormControl(9)
});
In order to take advantage of new typing support, we recommend searching for instances of the Untyped forms controls and migrating to the new typed forms API surface where possible.
// v14 partial typed form, migrating `UntypedFormGroup` -> `FormGroup`
const cat = new FormGroup({
name: new FormGroup(
first: new UntypedFormControl('Barb'),
last: new UntypedFormControl('Smith'),
),
lives: new UntypedFormControl(9)
});
import { NgModule } from '@angular/core';
import { RouterModule, RouterStateSnapshot, Routes, TitleStrategy } from '@angular/router';
import { ContactusComponent } from './contactus/contactus.component';
import { HomeComponent } from './home/home.component';
import { StandalonedemoComponent } from './standalonedemo/standalonedemo.component';
const routes: Routes = [
{path:'',component:HomeComponent, title : "Core Knowledge Sharing"},
{ path: 'standalonedemo', component: StandalonedemoComponent, title : "Stand alone Component" },
{ path: 'contactus', component: ContactusComponent, title : "Contact Us" }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule extends TitleStrategy {
updateTitle(snapshot: RouterStateSnapshot): void {
const pageTitle = this.buildTitle(snapshot);
if(pageTitle != undefined){
document.title = "${pageTitle}"
}
}
}​
We are excited about the flexible framework this introduces for developers to add diagnostics in the future.
@Component({
selector: 'my-component',
template: '{{ message }}', // Now compiles!
})
export class MyComponent {
protected message: string = 'Hello world';
}
viewContainer.createEmbeddedView(templateRef, context, {
injector: injector,
})
And finally, a community contribution by Artur Androsovych closes a top issue and ensures that NgModel changes are reflected in the UI for OnPush components.
@Component({
selector: 'my-component',
template: `
<child [ngModel]="value"></child>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComponent {}
--lower-skewer-case
format. We have removed deprecated camel case arguments support and added support for combined aliases usage.--help
for cleaner output that explains your options.ng sevre
instead of ng serve
happens all the time. Typos are one of the most common reasons a command line prompt throws an error. To solve this, v14’s new ng completion
introduces real-time type-ahead autocompletion!