Angular 17 Features With Examples - You Must Know That
Angular 17 was just released. This is why in this post you will learn all features of Angular 17 that you must know and start using.
New website
First of all inside Angular 17 we are getting a new logo. Additionally to that we are getting new website with all documentation.
The new website is on https://angular.dev/ and they really implemented it much better than previous documentation. I was not a huge fan of Angular official documentation previously because it was often dry and difficult for beginners to grasp the concept. I already checked quite a lot of docs on the new website and I can say that they are written and structured much better.
First of all here we have all docs on Angular concepts. Here you can get general understanding about some part of Angular and nice examples. It is really written step by step so you can grasp the concept easier.
Another thing that we are getting on new website is called tutorials.
The idea of tutorials is that you can change the code and see how it works directly in browser because we have a build in editor. So you get some documentation on the left and you see the usage of it on the right in real project. Also we have access to the terminal and console which is quite awesome.
Additionally we are getting playground.
Here we are getting a full blown Angular application inside our browser. There are lots of components in editor, we can write any application that we want. We also can change our template and CSS for the project. They it will be shown on the right without the need to setup Angular locally at all.
The main idea of playground is to jump on testing some features without need to setup anything.
The last feature that I use quite often is a search on the website which finds your needed information in seconds.
What is stable?
Previously I made a post about Angular 16 features. Just to remind you there were 2 features which were in development preview. First and most important feature was Angular Signals (a new concept of state management in Angular) and it was in development preview. Now it is stable and you can use it in production inside Angular 17.
Additionally to that inside Angular 16 we got ESBuild which speeds us building of our project a lot. It was also in development mode but now it is fully stable and is there by default.
"builder": "@angular-devkit/build-angular:application",
So you don't need to change or enable anything. It is there from the start.
Setting up Angular 17
But obviously you want to see how we can setup Angular 17 and what cool new features we got inside. Most people have ng CLI tool globally and would just try to update it from Angular 15 or 16 to 17 in order to be able to create Angular 17 applications. This is not optimal because there is an easier way to switch between Angular versions with npx.
npx -p @angular/cli@17 ng new angular-17-project
It won't break your existing ng if you installed it globally but just installs CLI from Angular 17 which you can use. So this command will generate a new project for us.
During installation we get a new question which we never got previously. Angular asks us if we want to enable server side rendering for the project. Previously we never got such option but we must install an additional angular-universal package to enable server side rendering. Now Angular decided to make it better and we can setup SSR out of the box and additionally we don't use angular-universal anymore but we are using angular-ssr package instead.
Most importantly you can really feel that even the initial start of the project is much faster now than before because of ESBuild by default.
Additionally to that Angular 17 generates for us standalone project without any modules. As modules are optional even in Angular 16 now our project is by default without modules.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
This is why as you can see in our main.ts we load not an app.module but directly an app.component.
There is no point to use modules if you start writing project from scratch.
As you can see our initially generated page also looks different.
Control flow
Now let's look on some new features of Angular 17 which are called control flow. The main idea is that they changed how we are writing code inside html.
interface UserInterface {
id: string;
name: string;
role: string;
}
export class AppComponent {
users = signal<UserInterface[]>([
{ id: '1', name: 'foo', role: 'developer' },
{ id: '2', name: 'bar', role: 'admin' },
{ id: '3', name: 'baz', role: 'qa' },
]);
}
Let's say that we have a users property which we want to render in HTML. Previously we always used ngFor attribute to do that.
@for(user of users(); track $index) {
<div>{{ user.name }}</div>
} @empty {
<div>We don't have anything</div>
}
Now we use this @for syntax which is called control flow to achieve the similar result.
Angular team says that control flow reduces the need to use structural directives like we did previously.
Personally I never have a problem with previous syntax and I don't see that it was unnecessary complex but this is what we got now.
Also as you saw here we used @empty syntax together with @for to render something when we don't have any elements. This is a really nice construction to avoid writing additional blocks.
Conditions in Angular 17
Another thing that was introduced is writing conditions with new syntax. In order to test it let's create a single user first.
user = this.users()[0]
Now let's render some information based on this user
@if (user.role === 'developer') {
<div>Developer</div>
}
@else if (user.role === 'admin') {
<div>Admin</div>
}
@else {
<div>QA</div>
}
Here we check the role of the user and render some divs. Most importantly we used here @if syntax from control flow which allows us to write in HTML things similar to Typescript.
@switch (user.role) {
@case ('developer') {
<div>Developer</div>
}
@case ('admin') {
<div>Admin</div>
}
@case ('qa') {
<div>QA</div>
}
}
Exactly the same thing we can do by using @switch and @case construction.
Deffered views
The last thing which is the best is being called deffer. What it does it allows us to render content later when it is needed or when we have resources for this. So we can skip rendering of some components, render placeholders instead or how loading indicators.
@defer {
<div>Defer</div>
}
By wrapping our code in defer it will start rendering the block only when browser has resources for it. This is why it will be rendered only after all other elements on the page are rendered.
Defer blocks will generate a separate chunk of Javascript which will be loaded later and will make the initial chunk smaller.
@defer {
<div>Defer</div>
}
@loading (after 150ms; minimum 150ms) {
<div>Loading..</div>
}
@placeholder (minimum 150ms) {
<div>Placeholder</div>
}
@error {
<div>Error</div>
}
This is the full notation of @defer. We can specify @loading, @placeholder and @errors parts to render different things depending on loading state. On first 150ms we will see a placeholder block, if it takes more time then loading block and if we get an error then an error block.
It is also possible to provide different triggers to our @defer block. And the most popular trigger is for sure on viewport.
@defer (on viewport) {
<div>Defer</div>
}
@placeholder {
<div>Placeholder</div>
}
It will render an element only when it is visible in viewport and it won't even try to do that if we don't see the element on the screen.
As you can see my element is not visible on the screen this is why only a placeholder is being rendered in markup.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
📚 Source code of what we've done