pawcode Development

The English original of this post can be found on my GitHub page.

Einleitung

Hey✌🏼,

Willkommen bei meinem ersten kleinen Blogpost, heute über den neuen Angular 16 Release. Vor ein paar Wochen sah ich ein YouTube-Video über ein neues Feature, das mit diesem Update in Angular Einzug hält und dachte: "Das muss ich mal ausprobieren!" Also tat ich es, schnappte mir ein kleines Nebenprojekt von mir (RandomSaber), das sowieso etwas Liebe und Wartung brauchte, installierte den ersten Release Candidate und nun ja... ich war begeistert.

In meiner Aufregung fragte mich mein Chef, ob ich einen kleinen Vortrag für meine Kollegen vorbereiten wolle, um alle auf den neuesten Stand zu bringen, was ich dann auch tat. Ich habe alle Changelogs für die Release Candidates, die Version selbst und einige Entwicklerrichtlinien gelesen, um die wichtigsten Informationen zusammenzutragen. Und da ich diese ganze Arbeit sowieso gemacht habe und ich diese neue Blog-Funktion auf meiner Website habe, dachte ich, warum nicht auch online stellen.

Also kommt mit auf die Reise!

Inputs

Routenparameter

Ab sofort kann man Routenparameter über den @Input Decorator bereitstellen. Um dieses Feature zu aktivieren muss das bindToComponentInputs Flag an den Router über die Optionen übergeben werden. Wenn dann die Komponente, welche die Seite rendert (im <routeroutlet> angezeigt wird) einen Input mit gleichem Namen besitzt, wird der Router diesen Parameter automatisch setzen. Somit müssen wir den Router oder die aktuelle Route nicht mehr per Dependency Injection laden, nur um die Parameter zu lesen oder zu abonnieren.

export class PageComponent implements OnChanges {
    @Input()
    public articleId?: string

    onChanges(changes: SimpleChanges): void {
        // load article data
        // do some more stuff
    }
}

export class ChildComponent {
    @Input()
    public title?: string
}

<article>
    <app-child title="Child's title" />
</article>

Signals