News Angular 7
New features brought by Angular version 7. Angular Material, virtual scrolling, drag & drop, the new Angular v7 documentation, and much more.
- Date
Just 5 days ago, the Angular team surprised us with a new release, version 7.0.0, which includes improvements in the framework’s core and mainly in “Angular Material.”
How to Update Your Application to Version 7
If your web application is developed in Angular version 6, the process is quite straightforward. You just need to execute this code snippet in the CLI.
ng update @angular/cli @angular/core
If you’re on a different version, don’t worry. The Angular team has developed a mini application to guide you on the path and make your life much easier. You can visit it at update.angular.io, where you’ll find detailed information on how to do it.
Angular Material and the CDK
Following the significant update that Material Design underwent in 2018, the main goal of version 7’s update is to minimize visual differences compared to the previous version.
They have also added to the CDK two modules that will allow us to use “Virtual Scrolling” and “Drag and drop” of elements in a simpler way.
Virtual Scrolling
For those of you who aren’t familiar with this term, virtual scrolling involves dynamically loading elements of a list based on whether they are visible in the DOM or not. This allows us to save loading times for objects, especially in long lists, leading to an improved user experience.
An example of using “virtual scrolling” on a list would be as follows:
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
If you want to learn more about this topic, I’ll provide the link to the Material page.
Drag & Drop
Now, the CDK includes dragging and dropping an element, and it automatically introduces a new method for reordering lists called “moveItemInArray” and another method for transferring items between different lists called “transferArrayItem”.
<!--Template-->
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
// Component
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
For more information about these modules, I’ve attached the link to the documentation.
Update of the Official Documentation
Perhaps one of the highlights of this new version. What I already thought was one of the best official Angular documentation has now been expanded to include the CLI documentation and reorganized the various sections to make everything more concise and make the developer’s life easier.
Official Angular Documentation 👍
Update of Dependencies
It’s also worth noting that they have updated some external library dependencies.
- TypeScript 3.1
- RxJS 6.3
- Node 10, they also support version 8
These are the main changes we can see in the new version 7 of Angular. I should also mention that they’ve addressed performance issues and improved the insertion of Angular Elements, but we won’t delve into that topic.
That concludes today’s post. I hope you enjoyed it, and now it’s time for everyone to try out the new version of Angular.
Best regards, and I look forward to seeing you in future articles 😃.
