Angular 14 byder på selvstændige komponenter

En ny udgave af Googles Typescript-webframework Angular er på gaden, med versionsnummeret 14. Blandt nyhederne er fritstående komponenter, skriver Emma Twersky fra Google i et blogindlæg. 

Moduler er en  måde at organisere et program på og udvide det med funktioner fra eksterne biblioteker. Men det kan være en mere enkel fremgangsmåde helt at undgå dem.

»Standalone-komponenter til Angular har til formål at strømline udarbejdelsen af Angular-applikationer ved at reducere behovet for NgModules. I version 14 er standalone-komponenterne i preview for udviklere. De er klar til at blive brugt i dine applikationer til udforskning og udvikling, men de er ikke et stabilt api og vil potentielt ændre sig uden for vores typiske model for bagudkompatibilitet,« skriver Emma Twersky.

Et komponent kan nu skabes på denne måde, med property'en standalone sat til true.

@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";
}

En anden nyhed er typer i formularer. Faciliteten har været den mest efterspurgte på Angulars Github-side. Den indebærer, at der er typetjek på værdier i formularer. Det kan se sådan ud:

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');

Der er flere nyheder i blogindlægget.

Ifølge websitet NPM Trends, ligger Angular i bunden målt på antal downloads, i forhold til de to konkurrenter Vue og React.